mySkin.css

This - skin related - CSS file is one of a series of CSS files that zoglair evaluates, compacts and serves as a single and combined site-wide CSS. Specifically, zoglair searches for and evaluates the following stylesheets, in the exact listed order:

1. *.reset.css
   A stylesheet that resets common attributes to zero or default values, so that browser inconsistencies are reduced to a minimum.
2. *.lists.css
   A stylesheet that deals with common list (UL, OL, DL) formats, such as menus, trees, etc.
3. *.shell.css
   A stylesheet that deals with popup windows and icon sprites.
4. zClipBase::css()
   Some common style rules (such as the navigation bar), found in <zoglair>/clip/base.php.
5. zClip*::css()
   The style rules of all clips, in the “clip” folder.
6. *.css
   The skin specific stylesheet.
7. The zSkinBase::render_unit_css() hook

In cases 1,2,3 and 6, the asterisk is replaced with the name of the active skin. First, zoglair looks for the particular CSS file in the skin's folder. If it does not exist, the corresponding “default.*” CSS (from the default skin) is loaded.

As you can see in the above list, “mySkin.css” will be the last one evaluated (apart from the hook). This means that you can override any rule defined in an earlier CSS.

The expected/recommended code, inside a CSS file, is the following:

<?php
extract($this->get_style(), EXTR_PREFIX_ALL, 's');

$css = <<<EOS
/* Enter your rules here */
EOS;

echo $css;

You may copy/paste the above code as is. In the place denoted as “/* Enter your rules here */” you can write your CSS rules, exactly as you know it, with an additional bonus: style variables! You can choose anyone from the defaults or your own defined earlier in mySkin.php.

To use a variable, prefix it with “$s_”. For example:

<?php
extract($this->get_style(), EXTR_PREFIX_ALL, 's');

$css = <<<EOS

/**
 *  body
 */

body
    {
    margin         : $s_view_margin;
    background     : $s_view_bg;
    color          : $s_view_clr;
    }
body a
    {
    color          : $s_view_lic;
    }

/**
 *  Layout divs
 */

#page
    {
    width          : $s_page_width;
    margin         : 0 auto;
    }
#logo
    {
    margin-bottom  : {$s_padding}px;
    }
...

EOS;

echo $css;