An interesting question came my way a few days ago: Which version of CSS is compatible with Sage CRM 6.1 and 6.2?
I think the question was asked because of the fact that CSS (Cascading Style Sheets) have a number of standards.
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 seperating 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 markup 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:
Sage CRM 6.1 Example
<HTML>
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Company</TITLE>
<LINK REL="stylesheet" href="/crm61/eware.css" mce_href="/crm61/eware.css">
Sage CRM 6.2 Example
<HTML>
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>Company</TITLE>
<LINK REL="stylesheet" href="/crm62/Themes/default.css" mce_href="/crm62/Themes/default.css">
Note: The above two examples show how the style sheet is referenced in the standard screens. The location is different in Sage CRM 6.2 because of the introduction of the new Themes feature.
CSS Standards
There are different different CSS standards. CSS 1.0 or CSS 2 etc. 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 6.2 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. I have discussed elsewhere that Sage CRM supports only Microsoft Internet Explorer. Please see: http://dpp.sagecrm.com/tags/Internet+Explorer/default.aspx
With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3.
Overriding CSS in screens.
You can easily override CSS settings by adding style information into a screen's custom content box. So for example you could change the screen defintion of the companyboxlong and add:
<style>
.ButtonItem{
color:red;
font-family: Verdana;
text-decoration:overline;
font-size: 16px;
cursor:crosshair;}
</style>
This example override will dramatically change the appearance of buttons on the company summary screen.
Changing Sage CRM 6.1 master styles.
Sage CRM 6.1 and prior versions used a style sheet that sits in the main install directory.
C:\Program Files\Sage\CRM\[installname]\WWWRoot\eware.css
This version of the eWare.css file can be difficult to read as all whitespace has been removed. Development Partners can download an expanded version of this style sheet here: http://dpp.sagecrm.com/files/folders/utilities_and_sample_code/entry42.aspx
However when CRM is started up the eWare.css file is recreated. This makes it difficult to change the appearance of CRM using the eWare.CSS file.
Changing Sage CRM 6.2 master styles.
Sage CRM 6.2 introduces the concept of Themes.
Development Partners can access different resources.
Themes are discussed in the documentation: Sage CRM 6.2 What's New Guide
http://dpp.sagecrm.com/files/folders/sage_crm_v62/entry1018.aspx
They are covered by the training slides in the Sage CRM 6.2 What's New: A technical Deep Dive.
http://dpp.sagecrm.com/files/folders/training_resources/entry494.aspx
There is also an example Theme set that can be downloaded and installed.
http://dpp.sagecrm.com/files/folders/example_themes_for_sage_crm_62/default.aspx
Report and Cascading Stylesheets
HTML Reports are also covered by CSS files. In Sage CRM 6.2 the HTML reports are also covered by the Themes concept with the different Themes applying.
I have disussed Reports and Cascading Stylesheets here: http://dpp.sagecrm.com/blogs/hints_tips_and_tricks/archive/2008/03/26/editing-report-styles.aspx
Other Resources
I have use a free simple CSS editor from Bradsoft called TopStyle Lite.
http://www.newsgator.com/download/products/ts3lite.exe
You can download an excellent CSS 2.1cheatsheet resource from here: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/