Loading...
 
Skip to main content

Tiki Design

Forum List Topic List

 
Thread actions

    • Overriding ie6.css

    Posted by ruan on Mon 26 of Jan, 2009 10:10 GMT-0000 posts: 2

    I've gotten into the habit of using conditional comments to use CSS suited to the various quirks of each generation of IE, rather than relying on nasty and fragile hacks in the CSS files themselves.

    header.tpl uses a conditional comment to import /css/ie6.css which is all well and good, but how can I override this behaviour to instead import /styles/mystyle/css/ie6.css?

    This doc page tells me that tiki3 will easily let me do this, but I'm using 2.2 so this doesn't help.

    I'm assuming that there is some magical smarty template variable like $path_to_style_directory which I could make use of, but I can't seem to find a list of the properties I can actually access in templates anywhere. Could someone point me to such a list if it exists, or tell me what the template variable should be?

    Reads: 17067
    Posted by Gary Cunningham-Lee on Tue 27 of Jan, 2009 04:19 GMT-0000 posts: 254 Japan

    Both separate CSS files for IE and browser-specific CSS in a common stylesheet have their adherents. I've used both methods for TikiWiki and its themes, but generally these days I like to keep the IE property variations close to the default (modern browser) ones because I find it easier than having to deal with the extra files. But this is a matter of personal style, for sure. To the best of my knowledge, though, the "hacks" I use, which are widely used and valid CSS, aren't nasty and fragile, as far as that's concerned.

    Anyway, an easy way to use Tiki's css/ie6.css for your site would be to just add your selectors/properties to that file. This would apply to all themes since the file is called regardless of what theme is active.

    I'm not sure about a smarty variable for path to style directory.

    If you need special (and different) IE treatment for more than one theme, you could duplicate header.tpl and make a theme-specific version of it that contains the link to the theme-specific ie.css rather than (or in addition to) the default ie6.css.

    -- Gary

    Posted by ruan on Tue 27 of Jan, 2009 08:29 GMT-0000 posts: 2

    Making a new header.tpl was the way I went on this one in the end. It isn't as clean as I'd like as I have to reference my extra css files directly but it does work and didn't require me to edit global files. There were no smarty variables I could make use of... I carefully checked through the list that the tiki debug console provided and none helped. This is slightly unfortunate, but presumably remedied in some way with version 3.

    I generally prefer having multiple small files to work with than one large one, mostly because it very cleanly separates logic required for different browsers. It is also easier to track changes using a version control system, and also tends to be a little more cache-friendly. I have just read about a rather neat trick involving conditional comments here which I may use instead for fairly lightweight css use in a single file for all browsers though.

    Thanks!

    - Ruan