sensitive CSS
Yesterday, I found a nice blog entry about time sensitive CSS while managing my favourites on del.icio.us. First, I was thinking that i did not understand that stuff, because i could not find a problem needing this set of solutions. For what the hell should i switch my CSS on time events?
… yes, there it is, the time sensitive Problem, a client wants to have a different theme on each day of the week. It’s a bit like switching the pair of shoes every 2 hours, isn’t it? In our case we do not need any php here for we can use smarty instead and only switch the stylesheet:
… src=< {$smarty.now|date_format:"%A"}>Style.css
Of course you can play with date_format, sure! Ah, … and of course, only copy and paste will not work as there are some errors while being rendered by wordpress editor. SO don’t beat me if there is missing a < or > and stuff. I think you guys are seeing it!
Yes, we have some nice possibilities with smarty in our themes without having to learn too much php.
The last 3 years I played with xoops, CSS themes and smarty engine and i do switch my CSS on events such as “if blockright is true”, “if blockleft is true”, “if user is logged in”, “if is module=’xxx’ ” and more …
I did some experiences loading different stylesheet files.
Having in mind that we can administrate the block settings for each modules different, as an example we can use < {$xoops_lblocks}> which is rendered as “Array” when there are left blocks to be displayed, and “” when no left blocks are to be displayed.
…. src=Pagelayout< {$xoops_lblocks'}>.css will give me 2 different possibilities of eg. columnlayouts, using 2 different Styles, “PagelayoutArray.css” for a 2 column, “Pagelayout.css” for an one column layout.
< {$xoops_showrblock}> is rendered as “1″ when there are right blocks and “0″ when there are no right blocks to be displayed. A combination of both can be used like:
… src=Pagelayout< {$xoops_lblocks}>< {$xoops_showrblock}>.css
and now there are 2 more solutions:
Pagelayout0.css — no left, no right block (1-column no blocks)
Pagelayout1.css — no left, right block (2-column block onright)
PagelayoutArray0.css — left but no right block (2-column block on left)
PagelayoutArray1.css — left and right block (3-column)
Hey, these were only 2 Blocks, do you rember that we have 5 different blocks possible in blockadmin? And do you remember that there are some more smartys we can use in themefiles? Did you ever turned on the smarty debug on without a popupblocker? We do have some other nice smartys we can use haven’t we?
We can, of course load different stylesheets on different modules
using “Module< {$xoops_modul}>.css” or we can grab the pagetitle to build a filename like
“T< {$xoops_pagetitle}>.css”
And, of course we can combine some other smarty functions like “truncate” with the existing examples. < {$xoops_pagetitle|truncate:3:""}> will be the first 3 letters of the pagetitle. When you are missing a smarty, just define yourself by assigning.
< {php}>
$GLOBALS[’xoopsTpl’]->assign(’xoops_themeautor’, ‘Michael Hokamp’ );
< {/php}>
and use < {$xoops_themeautor}> in your themefiles.
The question in this case is, if it is usefull to load different stylesheet files. I think, it depends on the situation, perhaps on the sum of changes you want to achieve. We can load a generel and an occaisional (additional) stylesheet file and combine both.
What do you think about different Identifier and Classnames in ONE stylesheet? In my last themes i did used:
body id=”body< {$xoops_lblocks}>< {$xoops_showrblock}>” or
pagelayer id=”body< {$xoops_lblocks}>< {$xoops_showrblock}>” …
for i can use:
#pagelayerArray0 { … }
#pagelayerArray1 { … }
#pagelayer0 { … }
#pagelayer1 { … }
in my styles.css file. Again, no frontieres here while using the other possible smarty results given in theme.html
Some will say that the filesize of css file will be too big with these different possibilities but it depends on the changes you will have to achieve. Perhaps some of you remember that “easterEGG” article i wrote 2 years ago about creating “dynamic” ID with smarty expressions. Changing background-images? Remember?
As an example, define a header ID depending on the module which is actually displayed?
header id=”header< {$xoops_module}>”
#headersystem { background: url(images/header-bei-module-system.gif) #fff top left no-repeat; }
#headernews { background: url(images/header-bei-module-news.gif) #fff top left no-repeat;}
#headernewbb { background: url(images/header-bei-module-newbb.gif) #fff top left no-repeat;}
…
creating image filenames ?:
or even much easier but not so nice, … use img src=”header< {$xoops_module}>.gif” alt=” …
chapi wrote some stuff on xoops.org to define modulename and use it to create files too. An other solution i learned to know while working with marc on a project was a smartfactory module where you can define your own smartys (of course languages) to use in your theme.
For such small changes in a CSS i would not use different stylesheets, what do you think? That time i called it XASS abbreviation=Xoops Active Style Sheets. Active is meant as “dynamic”.
Besides the fact that we are using smarty as a template engine we can additionally use php to achieve our needs within xoops themefiles embedding in < {php}> …. < {php}>
Where are the frontieres? Some say, frontieres only exist in our <heads>.
Happy XOOPSing of course.
