Guideline on CSS suffix to use in some modules and most important CSS of layout
Modules CSS Suffix
For modules in frontpage:
- -frontpagecharts | -frontpagesongofweek for super article module
- -frontpagearticles for articles module
For modules in other positions of the template:
- -rssatom: for rss atoms module
Main CSS Classes of template's layout
Custom CSS classes for categories.
Radiomusic 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:
-
.music h1, .music h2, .music h3 { color: #66FF00; }
-
.dee-jays h1, .dee-jays h2, .dee-jays h3 { color: #FF0000;}
where music, dee-jays are the seo title of music, dee-jays categories
How manage complex layout for single category.
Suppose to have a category called "best-videos" and his seo title is "best-videos", 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 best-videos.css, open the file template.css and add:
@import url(layout.css);
@import url(customize.css);
@import url(best-videos.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 .best-videos
example:
.best-videos .elx_pathway, .best-videos a.pathway, .best-videos a.pathway:link, .best-videos a.pathway:visited, .best-videos a.pathway:active { color:#CCCCCC; text-decoration: none; }.
If you need manage also RTL languages, in this case you must create a file called best-videos-rtl.css too and add a line in the template-rtl.css file:
@import url(layout.css);
@import url(customize.css);
@import url(best-videos.css); (line to add in the file)
@import url(horizontal_menu.css);
@import url(layout-rtl.css);
@import url(customize-rtl.css);
@import url(best-videos-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.