Enqueing Stylesheets

Home Forums The Lounge Enqueing Stylesheets

This topic contains 5 replies, has 2 voices, and was last updated by  sharon 3 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3978

    sharon
    Participant

    Can someone tell me why my style sheets are not prioritizing correctly?

    I have them enqueued in functions.php, and default in thematic keeps overriding my stylesheet in my childtheme directory…

    function childtheme_thematics_styles() {
    wp_enqueue_style(‘thematic-reset’, get_template_directory_uri() . ‘/library/styles/reset.css’);
    wp_enqueue_style(‘thematic-typography’, get_template_directory_uri() . ‘/library/styles/typography.css’);
    wp_enqueue_style(‘thematic-2c-r-fixed’, get_template_directory_uri() . ‘/library/styles/2c-r-fixed.css’);
    wp_enqueue_style(‘thematic-images’, get_template_directory_uri() . ‘/library/styles/images.css’);
    wp_enqueue_style(‘thematic-default’, get_template_directory_uri() . ‘/library/styles/default.css’);
    wp_enqueue_style(‘thematic-plugins’, get_template_directory_uri() . ‘/library/styles/plugins.css’);
    wp_enqueue_style(‘style.css’, get_stylesheet_directory_uri() . ‘/style.css’);
    }
    add_action(‘wp_enqueue_scripts’, ‘childtheme_thematics_styles’);
    

    the site is skeeping.com WP=3.8 thematic = 1.0.1  Thanks…..

    #3989

    middlesister
    Keymaster

    This is where you will have to learn a bit about css specificity. Your stylesheets appear in the correct order, ie the child style.css is last and should be overriding the others. But the specificity of your css selectors will determine which style declaration gets the most “weight” and therefore wins.

    If you look in firebug for example on the sidebar widgettitles, you see that you style.css has set som styles on ‘.widgettitle’. But in thematic’s default css, they are styled using ‘.aside h3’. Since the latter has both a class and a tag and the former only a class, the latter is more specific and will therefore be the one used – even though it comes earlier in the cascade.

    Css tricks has an article that explains it very well http://css-tricks.com/specifics-on-css-specificity/

    In the upcoming Thematic 2.0 I want to go through the thematic styles and make them as un-specific as possible so that overriding becomes easier. For now, changing your css selector names to match those in the thematic default will make sure that they override. Ie for the sidebar widgettitles, change ‘.widgettitle’ to ‘.aside h3’. ‘.aside .widgettitle’ would also work since that is more specific.

    #3992

    sharon
    Participant

    Thank you, Middle Sister, I will try to work according to your answer, and hopefully get my css to be applied bedfore default.css!

    #3993

    sharon
    Participant

    Middlesister,

    I thought I read somewhere along the way that the last stylesheet that was loaded would trump the elements in previously loaded stylesheets.   Since reading about CSS specifity, does that mean that statement is false?

    Does that mean that simply loading your own style.css file last does not mean it will overrided the styles in the previously loaded thematic/library/styles/default.css?  My own problems would seem to validate that statement, but I just want to be sure that what I thought I learned regarding the loading of style sheets is, in fact, incorrect.

    Thank you for the link, I am reading it now.

    Sharon

    #4003

    middlesister
    Keymaster

    Hm well it is both true and not.

    Loading your own stylesheet last means it will override the previous style – provided the style declarations have the same weight.

    Say the parent have

    .aside h3

    then your stylesheet overrides if you also use

    .aside h3

     

    But if the parent stylesheet has

    .aside .widgettitle

    then the child style of

    .aside h3 will not override but .aside .widgettitle will, since two classes are more specific than a class plus a tag. In the first case, the declaration is not specific enough to win over the parent, while in the second case, the declaration has the same weight and therefore the last loaded stylesheet will win.

    #4010

    sharon
    Participant

    Thanks so much for the link you sent me. I have it all figured out and I know that by just being “more specific” in my declarations I can make them a higher priority.

    It never ceases to amze me that no matter how much I read or study or work on my web sites, I am still learning bascis that I just managed to get by without, but what a difference they make when you know them!

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Enqueing Stylesheets’ is closed to new replies.