Fork me on GitHub

Better css control/order in themes  Bottom

  • Every theme has a CSS file loaded in theme templates. This is normally done by

    Code

    <link rel="stylesheet" href="<!--[$stylepath]-->/style.css" type="text/css" />


    But after that line there are many more stylesheets loaded from modules, blocks and so on. Those stylesheets can change your theme CSS because the files are loaded later.
    Sometimes you need to change just a little declaration from a module stylesheet and you don't wnat to make use of an own CSS file in your theme folder.

    An example:
    You are using menutree with a dropdown menu. The modules/menutree/pnstyle/cssplay_simpledrop_blackred.css is loaded and generates a font size that doesn't fit for your theme.

    You can modify the cssplay_simpledrop_blackred.css directly in module folder - but the next upgrade will overwrite your changes.

    Sure you can copy cssplay_simpledrop_blackred.css to your theme and modify font size there.
    But why not add the small correction directly to your theme CSS when there are just 2-3 lines to add?

    In this case it's better to get your theme CSS loaded after the modules CSS.

    What to do?

    1.
    Add the modifications to your theme CSS.
    The example:

    Code

    .cssplay_drop a, .cssplay_drop a:visited {
    font-size:0.9em;
    width:100px;
    }


    2.
    Remove

    Code

    <link rel="stylesheet" href="<!--[$stylepath]-->/style.css" type="text/css" />
    from the header part of yout theme templates.

    3.Add

    Code

    <!--[pnpageaddvar name="stylesheet" value="themes/yourtheme/style/style.css"]-->

    right before closing body tag /body.
    So you prevent module style overwriting and get your theme CSS loaded as last CSS file which can overwrite any stylesheet declaration done before.

    --
    | scribite! | TNGz | piwik | zweet |
  • Sounds like a good idea indeed.

    --
    campertoday.nl, Module development, Dutch Zikula Community
  • Currently
    that can be done positioning the pagevars before our theme CSS
    so, you can have:

    Code

    <!-- pagevars -->
    <link rel="stylesheet" href="<!--[$stylepath]-->/style.css" type="text/css" />
    and your theme CSS will override all the others icon_wink

    BlankTheme uses this cool feature icon_smile

    --
    - Mateo T. -
    Mis principios... son mis fines
  • There is no "pagevars" in my themes ... but good to know ;)

    --
    | scribite! | TNGz | piwik | zweet |
  • Yes, and finally you could put the CSS change into:
    config/styles/menutree/style.css
  • bp

    Yes, and finally you could put the CSS change into:
    config/styles/menutree/style.css


    I mentioned that already.

    But if only one or two lines are changed my solution is much quicker ;)

    --
    | scribite! | TNGz | piwik | zweet |

This list is based on users active over the last 60 minutes.