Sage CRM only has a browser based interface. The system screens that a user see as they navigate around the product are rendered in HTML.
HTML tags are used to define the structure and content of a document. They say "This is a header", "This is a paragraph", "This is a table", by using tags like h1, p, table, and so on. The layout of the document is then taken care of by the browser.
But HTML is a pretty wide language and it has grown to include not just layout/content information but also tags and attributes that control the presentation. These tags and attributes include <font> and the color attribute. These could be used to say that this header is blue or that table is red. But adding presentational information into the HTML increases the complexity of the HTML and makes it both more difficult to be consistent in page design and more difficult to maintain a complex page.
A cascading stylesheet provides a way of separating the structure/content of a document with the presentational information. It is important to be aware that CSS is not just applicable for HTML but for any any kind of XML document.
CSS can be used to define colours, fonts, layout, and other aspects of document presentation. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same mark-up page to be presented in different styles for different rendering methods, such as on-screen, on mobile devices or in pdf documents.
At the top of every page in Sage CRM the contain HTML will contain some tags that look like this:
<html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache,no-Store"> <TITLE>Company </TITLE> <link rel="shortcut icon" href="/crm/Themes/img/ergonomic/Icons/favicon.ico?82753" type="image/x-icon"> <LINK REL="stylesheet" HREF="/crm/Themes/ergonomic.css?82753"> <LINK REL="stylesheet" HREF="/crm/Themes/Kendo/kendo.common.min.css"> <LINK REL="stylesheet" HREF="/crm/Themes/Kendo/kendo.default.min.css"> <LINK REL="stylesheet" HREF="/crm/Themes/Calendar/ergonomic/stylesheets/sagecalendar.css">
CSS Standards
There are different different CSS standards. The current version is CSS 3.0. Each level of CSS builds upon the last, typically adding new features. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
The critical thing to realise about support for CSS in Sage CRM is that it is actually the browser or user agent that has the responsibility for interpreting the CSS instructions.
So it is the browser that matters.
With each new browser version support for the Cascading Style Sheets (CSS) standard has steadily improved. All currently supported browsers are fully CSS Level 3-compliant.
Overriding CSS in screens.
You can override some CSS settings by adding style information into a screen's custom content box. So for example you could change the screen definition of the companyboxlong and add:
<style>
.ButtonItem{
cursor:crosshair;}
</style>
This example override will make a small change the appearance of buttons on the company summary screen.
From Sage CRM 2021 R2 System administrators have the ability to override the look & feel of the screens that are presented to users. This includes control down to individual fonts & screen elements, and this is achieved by using upgrade-safe custom style sheets.
Report and Cascading Stylesheets
HTML Reports are also covered by CSS files.
Editing Report Styles - Sage CRM Hints, Tips and Tricks - Sage CRM - Sage City Community