CSS suffix - CSS classes

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

Modules CSS Suffix

For modules in frontpage:

• -frontpage : for modules in frontpage2 position
• -frontlat : for modules in frontpage1 e frontpage3 positions (lateral positions of frontpage)

For modules in module positions of the template:

• -latmenu : for module menu in left / right module postions
• -bottom : for module menu bottom1, bottom2 and eventually bottom3 module positions
• -rssatom : for rss / atom - socialnetwork module in bottom3 module position.

Main CSS Classes of template's layout

Custom CSS classes for categories.

Tripping template affoers you the possibility to create custom layouts to be matched to each category present in your site.
In the sample site of tripping template, the links in various header h1, h2 etc display a different background image depending on the category to which the selected item is part of:

• .destinations h1 a { background:  url("../images/site3/article-destinations.png") no-repeat scroll left 50% transparent; }
• .hotels h1 a { background:  url("../images/site3/article-hotels.png") no-repeat scroll left 50% transparent; }
• .blog h1 a { background:  url("../images/site3/article-blog.png") no-repeat scroll left 50% transparent; }
• .user h3 a { background:  url("../images/site3/user.png") no-repeat scroll left 50% transparent; }

where destinations, hotels, blog e user are the seo title of destinations, hotels, blog categories and user

How manage complex layout for single category.

Suppose to have a category called "Travels in africa" and his seo title is "africa-travels", and for all the items you want to create a complex layout with many css classes.
The advice is to create a css file called africa-travels.css, open the file template.css and add:
@import url(layout.css);
@import url(customize.css);
@import url(africa-travels.css); (line to add in the file)
@import url(horizontal_menu.css);

in the file css you have created, define your css classes using as first identifier class .africa-travels
example:
.africa-travels .elx_pathway, .africa-travels a.pathway, .africa-travels a.pathway:link, .africa-travels a.pathway:visited, .africa-travels a.pathway:active { color:#CCCCCC; text-decoration: none; }.

If you need manage also RTL languages, in this case you must create a file called africa-travels-rtl.css too and add a line in the template-rtl.css file:

@import url(layout.css);
@import url(customize.css);
@import url(africa-travels.css); (line to add in the file)
@import url(horizontal_menu.css);
@import url(layout-rtl.css);
@import url(customize-rtl.css);
@import url(africa-travels-rtl.css); (line to add in the file)
@import url(horizontal_menu-rtl.css);

Operating in this way, in presence of complex layouts for more categories, you have the opportunity to be more ordered and identify or add a css class more easily than putting everything inside custom.css file.

Hiding image uploaded in details article of a category and to be substitute with Nivo Slide plug-in

With the system has the template and offers to you the possibility to manage different layouts in according to categories, u can hide the image uploaded in details article and if u need subsistute it with an image gallery thanks to nivo slide plugin.
The css classes used to hide the images is

.your_category_seo_title .elx_article_page div.elx_content_imagebox {display: none;}

In our exemple site
.hotels .elx_article_page div.elx_content_imagebox {display: none;}

For Mobile Template.
Open mobile.css and add in this file
.your_category_seo_title  figure.elx_content_imagebox { display: none; }

in our example site:
.hotels figure.elx_content_imagebox { display: none; }

In this way in mobile you can show nivoslide plugin and not image article.
 

The parameters templates give u the opportunity to show or hide this image for all articles in any category.
These procedures not have effect in the articles images showed in the various elxis modules used in the example site.