Theme switcher
News
And the rework is finished
After a busy time, some great feedback from the community and applying BlankTheme to several projects with great results, some details were added to improve the theme framework capabilities. Other parts were cleaned up. Now the pending task is to update the already ported themes to the latest BlankTheme revision and after that we can release the official 0.9 version. Read about the most important changes:
- Rework of the theme configuration:
After some reading into the Xanthia logic, the pageconfiguration.ini file of BlankTheme was cleaned. There are custom templates for specific sections as downloads, forum and calendar, and two examples:- Relay custom config, this shows how to change the XHTML standard to XHTML 1.0 Transitional (instead of strict) when needed, and
- FAQ as an example of the nocolumns.ini use, that also applies to the available noleftcolumn.ini and norightcolumn.ini configurations.
The .ini files now have a different format. A default block template is defined and the specific block settings are in the order that Xanthia uses: blockinstances, blocktypes, blockpositions. Under these deafults are some comments about the possibilities, check them out
.
- Rework of the $current variable:
Previous revisions of BlankTheme defined the 'current' variable on each module template, assigning some value like 'news', 'forum' or 'contact'. Then the bt_userlinks plugin (if enabled) compares that value with each link ID, if match, the link is marked with the currentClass to be highlighted through CSS. This has now changed.
The $current variable is now optional. If the module template doesn't define it, BlankTheme plugins will take the name of the current module and process it, so the IDs are changed to real module names now. This variable now plays a different role: it's useful to mark special templates/sections, like 'home'.
Remember that in Xanthia you can define specific templates for specific sections, i.e. I'm working with directory shortURLs and I want to assign a different template for articles in the Sport section. First, Xanthia needs a common URL-path to identify them, so i define a custom article URL structure in the News settings to begin with the category name: %category%/%storytitle%. Then, define in a special template for them in the pageconfiguration.ini file of my theme:
Code(format: [$module/$type/$func/URL-path])
[News/user/display/News/Sports]
file = sports.ini
Now i can clone some files like home.ini, and name it sports.ini, and clone home.htm naming it sports.htm. Edit sports.ini to update the page value to sports.htm, and also edit sports.htm to customize the layout. There, $current var can be important. Assigning the value 'sports' will let us define special styles only for this section (Sports articles in this case), but this is discussed in the next change.
By now, let's say that if we put a "Sports" link in the navigation menu (editing the bt_userlinks plugin maybe), we should need to assign sports.ini to the articles list of the Sports category:
Code[News/user/view/News/view/Main/Sports]
file = sports.ini
And it's done, a customized category, with the link hightlighted when the current page is the list of Sports articles or displaying one of them
.
- Tree levels of CSS classes to enhance the control:
After centralization of the CSS classes management to the bt_htmloutput plugin, it was pretty easy to think in further possibilities. Previously, the body CSS classes were the name of the base template used, and the enabled zone-names prefixed with 'bt_'. i.e:CodeBut we needed to reduce the number of CSS files (removing the YAML's basemod_xxx.css and merging them into basemod.css only), so, new CSS classes were added to the #page_margins container to have two level of classes, and be able to define styles like:body id='bt_CurrentModule' class='bt_2col bt_21 bt_2cb'Codefor an specific template/layout. Ok, that was done and now we only need two CSS files (content.css and basemod.css)..bt_2col .bt_21 { ... }
Now what about a next step in CSS-based customization?
Yes, sometimes it's necessary to specify details for some specific content. i.e. I need to define some styles for a specific Page only (Pages module). Solution: a custom template and inline styles? requires more work than just define a specific style for it. What about have a style like:Codeand define special stuff for the Page with ID = 1? Cool isn't it? And it's can be used for a whole category, a PageMaster publication type, practically anything! That's the reason to add a third level of CSS classes in the theme containers; body, #page_margins and #page respectively, all with a central management of the bt_htmloutput plugin.#bt_Pages .bt_func_display .bt_pageid_1 { ... }
With enough PHP skills you can add your custom logic in the third level, to detect the current module (like Pages) and extract the parameter that you need (pageid in this case); this example is commented inside the bt_htmloutput plugin
.
(Note: The use of this three classes can be observed in the source code of this site).
- Added a lang-based CSS class to the body: bt_lang_$lang:
Ok, three levels is cool and can be pretty useful to solve details fast and with ease. Now, sometimes we deal with multilingual sites, and we need different background images for each lang, and other stuff, so, a lang-based body class was needed too: bt_lang_$lang.
So, you have a header background image to your default language:Codebut you need a different one for other langs, let's say spanish, easy:#header {
background-image: url('../../images/design/bg_header.jpg');
...
}CodeAnd that will override the default css class. This way for a lot of stuff, and you can customize the classes generated by the plugin to control any section..bt_lang_spa #header {
background-image: url('../../images/design/bg_header_spa.jpg');
}
- Example logo image in the header:
One of the first questions about themes is: "How do I change the background color/image?" or "How do I change the logo?", well, we've included a default images/logo.png as a default logo for the theme. Dave did a great job building this blank-logo and we recommend, that depending of the logo, keep the sitename title or not; to hide it just add a line in the content.css where the styles for the title are set:CodeIt can be changed to a custom one with ease, just replace the image file or if you want to change the extension to .gif or .jpg just edit the base templates; we recommend PNG to have high quality transparency, indispensable if there's a design in the #header background. BlankTheme will have no problems in IE6 thanks to the last update:#header h1 { display: none; }
- Better IE pngfix method:
Thanks to Angus Turnbull (at http://www.twinhelix.com/) for his updated work on an unobtrusive and LGPLed IE pngfix, we'll have no problems with PNGs under the ugly IE6.
As said, the remaining work is to update the already ported themes with the latest changes, and we'll have the 0.9 release out the door. It will not be 1.0, because we want some more feedback about different scenarios and special needs.
Enjoy BlankTheme!
visit our documentation at Cozi,
open tickets if you find a bug or have a suggestion
comments are appreciated
and tell us what you think of all this stuff
Comments
those days were Cozi maintenance time, i hope you have already checked the docs without problems ;-)
Just to personnaly congrat you about the port of the theme for the main community, By the way, was the main community theme based on a blanked theme ?

Comentario por:
adrianen24 Oct 2008 - 12:20AM
Inicie sesión o regístrese
para enviar comentarios
http://code.zikula.org/blanktheme it does not work.