CSS suffix - CSS classes
Guideline on CSS suffix to use in some modules and most important CSS of layout.
Modules CSS Suffix
- -language: for language module
- -content: for content module
Main CSS Classes of template's layout
Custom CSS classes for categories.
EI News Blog template afoers you the possibility to create custom layouts to be matched to each category present in your site.
For to do css style categories or autonomous pages based, u need use the seo title as identifier the css classes:
Example
- .famous-place h1 a { bla bla bla }
- .sample-gallery h1 a { bla bla bla }
- .elxis h1 a { bla bla bla }
where famous-place, sample-gallery, elxis are seo title of Famous Place, Sample Gallery, Elxis categories.
How manage complex layout for single category.
Suppose to have a category called "blog" and his seo title is "blog", 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 blog.css, open the file template.css and add:
@import url(layout.css);
@import url(horizontal_menu.css);
@import url(vertical_menu.css);
@import url(customize.css);
@import url(blog.css); (line to add in the file)
in the file css you have created, define your css classes using as first identifier class .blog
example:
.blog.elx_pathway, .blog a.pathway, .blogs a.pathway:link, .blog a.pathway:visited, .blog a.pathway:active { color:#CCCCCC; text-decoration: none; }.
If you need manage also RTL languages, in this case you must create a file called blog-rtl.css too and add a line in the template-rtl.css file:
@import url(layout.css);
@import url(horizontal_menu.css);
@import url(vertical_menu.css);
@import url(customize.css);
@import url(blog.css); (line to add in the file)
@import url(layout-rtl.css);
@import url(horizontal_menu-rtl.css);
@import url(vertical_menu-rtl.css);
@import url(customize-rtl.css);
@import url(blog-rtl.css); (line to add in the file)
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.
Defining an existing style to a categories or autonomous pages
Before to do this modify, please make a copy of file. Use an appropriate software for develope html and php pages.
Open the file templates/simplyblog/includes/einewsblog.class.php
Go to the line 260 or find these lines
if ($alternatecss == 'simplyblog-template'){
$css = 'style5';
}
For more categories copy and past this block.
Replace simplyblog-template with your seo title category and replace style5 with style1, style2, style3, style4.
Hiding image uploaded in details article of a category and to be substitute with other images plugin.
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;}
For Mobile Template.
Open mobile.css and add in this file
.your_category_seo_title 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.
