CSS Suffix and CSS Classes

Guideline on CSS suffix to use in some modules and most important CSS of layout.

Modules CSS Suffix

-homemenu for mod_menu
-footermenu for mod_menu
-articles for mod_articles
-rossatom for mod_rssatomsocnet
-opensearch for mod_opensearch

Main CSS Classes of template's layout

Custom CSS classes for categories and autonomous pages.

Company template offers you the possibility to create custom layouts of the full page to be matched to each category present in your site and any autnomous page. You have the possibility to use to option:

Solution A: customing all laouyt of you category.
The tips is to proceed as create a new theme. Suppose to have a category called "Company Template" and his seo title is "company-template". If u wanna use a theme of the template, u can copy and past the entire folder of theme and rename it:
example:
copy and past the folder /company/css/style1/ and remane the new folder in /company/css/company-template/

rename the file content in this folder:
example:

standard.css in company-template.css (file of style)
standard-rtl.css in company-template-rtl.css

/mobile_standard.css in mobile_company-templatecss
/mobile_standard-rtl.css in mobile_company-template-rtl.css

make the same thing if u wanna use a custom layout. in this case create also a folder /company/css/company-template/images/ where put the images used in your custom layout

For autonomous pages use the suffix "_html" after the seo title of the page: example contact_us_html

Solution B: customing some classes of layout.
You can proceed in two ways:
create classes using .seo_title (for categories) or .seo_title_html (for autonomous pages).
Example

.company-template .elx_pathway, .company-template a.pathway, .company-template a.pathway:link, .company-template a.pathway:visited, .company-template a.pathway:active { color:#CC0000; text-decoration: none; }.

.contac-us_html .elx_pathway, .contac-us_html a.pathway, .contac-us_html a.pathway:link, .contac-us_html a.pathway:visited, .contac-us_html a.pathway:active { color:#CC0000; text-decoration: none; }.

For little or parzial modify of page layout, better use the css identifier that elxis automatically create. Example:
#elx_category_page_3 .elx_category_image { display:none;}
#elx_category_page_3 h1 a { font-size:20px; }
#elx_article_page_10 h1 a { font-size:30px; }

browserselector.js

Company template has a great js create by rafael to create specific classes for any browser.

Set CSS attributes with the code of each browser/os you want to hack

Examples:

    html.gecko div#header { margin: 1em; }
    .opera #header { margin: 1.2em; }
    .ie .mylink { font-weight: bold; }
    .mac.ie .mylink { font-weight: bold; }
    .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

    win - Microsoft Windows (all versions)
    vista - Microsoft Windows Vista new
    linux - Linux (x11 and linux)
    mac - Mac OS
    freebsd - FreeBSD
    ipod - iPod Touch
    iphone - iPhone
    ipad - iPad new
    webtv - WebTV
    j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me
    blackberry - BlackBerry new
    android - Google Android new
    mobile - All mobile devices new

Available Browser Codes [browser]:

    ie - Internet Explorer (All versions)
    ie8 - Internet Explorer 8.x
    ie7 - Internet Explorer 7.x
    ie6 - Internet Explorer 6.x
    ie5 - Internet Explorer 5.x
    gecko - Mozilla, Firefox (all versions), Camino
    ff2 - Firefox 2
    ff3 - Firefox 3
    ff3_5 - Firefox 3.5
    ff3_6 - Firefox 3.6 new
    opera - Opera (All versions)
    opera8 - Opera 8.x
    opera9 - Opera 9.x
    opera10 - Opera 10.x
    konqueror - Konqueror
    webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
    safari3 - Safari 3.x
    chrome - Google Chrome
    iron - SRWare Iron