WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Modifying Child Theme "style.css" File for Gantry Theme (6 posts)

  1. John H Gregory
    Member
    Posted 5 months ago #

    Hello.. I am using the Gantry template in WP and have been trying unsuccessfully for some time now to discover how to modify the child theme's style.css file in order to change the background color or ideally add a background image instead to my site. I have read every forum post from RocketTheme, WordPress (and everywhere else I could Google) and have tried everything that has been recommended. I am at my wit's end.. Could you please give me the necessary coding/proper syntax to help me to make this work? I have included my most current "style.css" file content below. I've been FTP-ing the changes and they show up in my WP Admin interface, but so far I have been unable to get any changes to happen. Thank you so much for your help!!

    <john>

    body {
    background-image: url("/images/CotownBackgroundPatternFull.png");
    }
    header#rt-top-surround {
    background-color: transparent;
    background-repeat: repeat;
    }
    div#rt-top {
    background-color: transparent;
    }
    div#rt-top .rt-container, div#rt-header .rt-container {
    background-color: transparent;
    }

    #rt-maintop {
    background-image: url("../images/CotownBackgroundPatternFull.png");
    }

    /*
    Theme Name: Gantry-Child Theme for WordPress
    Theme URI: http://cotownrecords.com/wp-content/themes/rt_gantry_wp-child
    Description: A child theme for the Gantry theme for WordPress
    Template: rt_gantry_wp
    Version: 1.01
    Author: John
    Author URI: http://cotownrecords.com/
    */
    @import url("../rt_gantry_wp/style.css");

  2. CrouchingBruin
    Member
    Posted 5 months ago #

    The problem is that you put the import statement at the very bottom, so the parent theme's CSS is overriding any identical selectors that you have. It should be moved to the very top. That way, your child's style.css will override anything in common from the parent (the rules which come last override anything identical which comes earlier). You should move the header to the very top, too.

    So your child style.css should start out like this:

    /*
    Theme Name: Gantry-Child Theme for WordPress
    Theme URI: http://cotownrecords.com/wp-content/themes/rt_gantry_wp-child
    Description: A child theme for the Gantry theme for WordPress
    Template: rt_gantry_wp
    Version: 1.01
    Author: John
    Author URI: http://cotownrecords.com/
    */
    @import url("../rt_gantry_wp/style.css"); 
    
    body {
    background-image: url("/images/CotownBackgroundPatternFull.png");
    }
    
    etc...
  3. John H Gregory
    Member
    Posted 5 months ago #

    Thanks so much for the lightning-fast response! I wish I could report that this has solved it, but so far it hasn't. Something is obviously still wrong with my css. Here is the content of my "style.css" file as it currently resides on my server, which (I believe?) includes your suggestions:

    /*
    Theme Name: Gantry-Child Theme for WordPress
    Theme URI: http://cotownrecords.com/wp-content/themes/rt_gantry_wp-child
    Description: A child theme for the Gantry theme for WordPress
    Template: rt_gantry_wp
    Version: 1.01
    Author: John
    Author URI: http://cotownrecords.com/
    */
    @import url("../rt_gantry_wp/style.css");

    body {
    background-image: url("/images/CotownBackgroundPatternFull.png") !important;
    }
    header#rt-top-surround {
    background-color: transparent !important;
    background-repeat: repeat;
    }
    div#rt-top {
    background-color: transparent !important;
    }
    div#rt-top .rt-container, div#rt-header .rt-container {
    background-color: transparent !important;
    }

    #rt-maintop {
    background-image: url("../images/CotownBackgroundPatternFull.png") !important;
    }

  4. CrouchingBruin
    Member
    Posted 5 months ago #

    First of all, no need to include the contents of your style.css, just post a link to your site and we can view it from there.

    I can see your child theme is being read by using Chrome Developer Tools. The problems are:

    1. The rule for the background image for the body says this:

    background-image: url("/images/CotownBackgroundPatternFull.png") !important;

    But there is no such image file at http://www.cotownrecords.com/images/CotownBackgroundPatternFull.png.

    2. For all of the other rules, the IDs that you specified are incorrect. There is no header element, much less one with an ID of rt-top-surround. There are also no elements with an ID of rt-top or rt-maintop. Where did you get these IDs from?

    Last tip: you do not need to use the !important clause in your CSS rules as long as you understand how CSS specificity works. Using !important when you don't have to will just screw you up later.

  5. John H Gregory
    Member
    Posted 5 months ago #

    Link to site: http://cotownrecords.com

    Thanks again for your response! Per your instructions, I tried adding the images folder into the root folder and placed the image file inside. But as before, it didn't seem to do anything. Just for kicks, I added the same "images" folder and image file into my "rt_gantry_wp-child" theme directory, as well. Still nothing. You'll note I also removed the "!important" clause from my style.css file.

    As for where I came up with the names of the rules as you'd mentioned in your response in #2 above, I got them using Firebug (and guessing which of any of the positions that were called out might be affected by a change in "background" attributes) combined with bits and pieces I (apparently incorrectly) gleaned from some of the many forum posts I've waded through trying to figure this out. You will notice that I have done away with all of them. ;)

    So I still can't seem to make this work. Do you have any further thoughts on how to lick this thing? I continue to really appreciate all of your help!!!

    john

  6. John H Gregory
    Member
    Posted 5 months ago #

    Nope. Now it works!! But I hate my background image. So I removed it. Sorry. SOLVED. I just need a better image!!

    Thanks so much!!!!!

Reply

You must log in to post.

About this Topic