Different style sheets in a Child Theme

Hi gain, lads.

Like you see I'm start using Child Themes and got tons of questions.

For example: When customizing a Child Theme from a Parent theme that have not just one style sheet (style.css) but also layout.css, what can I do? If I put the css pieces in the style.css of the child theme nothing happens, I'll have to modify directly the layout.css in the parent theme, but, if I do that, when updating I'll lose all the changes in the layout.csss

which is the correct way to do this?

  • James Dunn

    Goodday alejandroguau.

    My initial thought is I would copy the layout.css from my parent theme folder to my child theme folder. Then modify the layout.css in my child theme folder to get the results I wanted (noting EACH line/section that I modified).

    Once I had what I wanted, then I would go back and delete any CSS that was not modified (this step may be unnecessary, but I was taught to do that by a member of the Genesis forum). That way, the only thing in your child theme folder's layout.css file would be the items that you want the child theme to override from the parent theme. Since the settings of the child theme take precedence over the parent theme, WP will look there first for layout information. If it finds it, it will use it. If it doesn't, then it will look to the parent folder. If it finds it, it uses it there.

    Regardless, the child theme info takes precedence over the parent theme. And, the only css file that is REQUIRED in a child theme is style.css. But, the codex doesn't say that's the only one that you should have - just the only one that is required.

    Hope this is helpful. Let me/us know. Maybe I can dig up some additional information if you need it.

    James Dunn
    Athens, GA USA

  • Timothy Bowers

    It depends on the theme, the css called last rules all.

    But in some instances !important can change that and can cause issues. Consider !important as a tool which can be used as a last resort because when called it will supersede anything not using !important regardless of the order it is called. Of course when used with other !important then it is which is declared last.

    I mentioned this because it could be that which is preventing your child CSS from working so worth looking at.

    You can use Firebug in FireFox of Developer Tools in Chrome, you can look at your site and see which CSS is being overruled and ensure your own CSS is being declared.

    Ensure you are using IDs and Classes correctly as well within your new CSS.

    Take care.

  • Timothy Bowers

    @JamesDunn I know it is used in some of our CSS for child themes at least.

    I have seen some themes in the past where it was constantly used, it was a nightmare to work with. Rather than fixing code and writing it properly it was used to overrule other overrules, overruling more overrules. lol


    Sure you are most welcome, let us know how you go. :slight_smile:

    Take care.

  • James Dunn

    @Timothy - I see. "A HACK!!" by any other name it's still a hack. It's one of those things that made me pull my hair out when I started taking other people's code apart. It made me long for the days when "pretty programming" was taught rather than just throw a bunch of code together and make it run. I have always hated following behind people that just throw code together to make stuff run. Guess I'm a bit old school, but I like a structure and order to my programming - even when you're talking about OOP and such - I just believe it should have some structure and order.

    Personally, if I hack it together and then sleep overnight, without some documentation I don't even know what I've done, most less expect someone else to follow what I've done.

    Sorry, let me get off this soapbox before this becomes a thesis. :wink:

    James Dunn
    Athens, GA USA

  • alejandroguau

    Yes, Timothy you where right... this is exactly what is happening in this theme... I create a new layout.css in my child theme folder but the browser didn't pull anything from it... I then add the !important rule but neither worked...

    This is the code I'm trying to run...

    Maybe you guys have an other idea... I'm working with merchant woothemes theme and runing it locally...

    /* Top Nav */
    #top .col-full {
    	background: url(http://agda.com/wp-content/uploads/2012/06/fondo.jpg) !important;
    #top {
    	background: url(http://agda.com/wp-content/uploads/2012/06/fondo.jpg) !important;
    	border-bottom: 2px grey solid !important;
    	-webkit-box-shadow: 0 0 56px 4px !important; -moz-box-shadow: 0 0 56px 4px !important; box-shadow: 0 0 56px 4px !important;
    	/* Nav */
    #top .nav a {
    color: #A68367 !important;
  • ehoanshelt

    Hey alejandroguau,

    This is what I would do to get around all this:

    Like Timothy said, the last CSS loaded rules all. To do this, create a new stylesheet in your child theme. For this example, I will names it child_custom.css. Then add this to your functions.php file.

    function alejandroguau_add_style(){
            echo '<link media="all" type="text/css" rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/child_custom.css">;
    add_action('wp_head', 'alejandroguau_add_style', 10);

    What this will do is load that style sheet last. Now put the rules you want to overwrite from the layout.css file in the new child_custom.css file and it should work.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.