CSS website theming based on URL
For a while now, I have been using similar methods for controlling the appearance (themes) of sections and pages using CSS. This method initially came about as an idea, hence I will focus on it multiple functionality.
Perhaps it’s best to start from the "most complicated" example, which refers to multilingual sites.
The URL is one of the crucial points and I always try to be as practical and intuitive with it so the end user can navigate through the website through the URL and of course based on the SEO. I’ll take the following multilingual website (English & Italian) and the its respective URLs:
- www.example.com/en/section/page-name
- www.example.com/it/sezione/nome-pagina
If you have extension ( .php, .html) , you will have to remove it in order for a more clear CSS syntax. It’s also advisable to use a underscore or a dash.
Be aware of geotargeting and whether your "country code" is valid, because your search engine (Google, Yahoo) will better index and target the country who’s country code is found in the URL.
Let’s give the URL some explosion through a simple example. If you use a CMS, you can call the URL through server variables. It’s important to extract and use the variable that will facilitate your work with the CSS. There are different ways to do this, but we’ll focus on this basic example:
//making array and remove first slash
$URL_class=explode('/',ltrim($_SERVER["REQUEST_URI"],'/'));
foreach($URL_class as $css_class){
if(end($URL_class)!=$css_class){
$body_class.=$css_class." ";
}else {
// avoiding white space at the end
$body_class.=$css_class;
}
}
print '<body class="'.$body_class.'">' ;With Drupal’s "Path" and "Path Auto" modules, you can create URLs any way you like.
Here we’ll basically insert the entire path in a class. However, if you think about the term "class" and "ID", it's logical that the name of the page be entered as the ID since it's "universal" while the properties as class which would then be shared with other pages from the section. In this case, no difference is made and this is only a question of preference. Through class, the syntax is aesthetic and intuitive since slashes replaced periods. For better navigation within the CSS, use the full path:
URL: www.example.com/en/section/page-name
HTML: <body class="en section page-name">
.en { property: value;} /*refering language site*/
.en.section { property: value;} /*refering section*/
.en.section.page-name { property: value;} /*refering page*/
This is just one of the examples how an entire site could be managed, depending on its structure, size and appearance. A lot also depends on the properties of the CSS and Inheritance, as classes need to be formed and the appearance changed from it. Perhaps the names of the two classes "sectione" and "section" are unnecessary and redundant since the classes "en" and "it" in themselves determine as different, but that depends on the architecture and the architect.
In addition, not too long ago there was quite a bit of commotion in relation to "blogzines", which in my opinion could benefit greatly from such a way of Class creation. These types of classes could easily find their implementation in such "presentations", but the only problem is the stockpiling of the CSS in a file. On the other hand, inheritance of certain CSS properties would certainly find application. The question remains what should be used as the common denominator for the pages. If I was to ever make a blogzine, I would certainly use a style tag - with every page having its very own design.
It’s a great feeling to have complete control over the design of a website.
Illustration: Bogdan Maksimovic
Translation: Vasilije Perovic
2 Comments
11 Dec 2010
Great Article Nikola. I think
Great Article Nikola. I think that styling different pages or sections of your website with a unique look and feel is becoming a bit of a trend these days with people like Jason Santa maria leading the way (http://jasonsantamaria.com/). It's a great concept but it does take a lot more work. ;-)
15 Dec 2010
Thanx Adham, I agree with you
Thanx Adham, I agree with you this is basic concept, would be very satisfied if developers start thinking about this and develop more universal approach.
Post new comment