How to modify the theme using a child theme

  • Admin

    Syahir Hakim

    #41

    Child theme allows you to modify the theme without actually modifying the theme’s core codes, so it makes sure that you can safely update the theme whenever there’s a new update without losing your modifications.

    I strongly recommend that you use child theme to modify the theme instead of modifying the theme’s files directly.

    It’s quite easy to do. Here’s how:

    1. Create a graphene-child folder in wp-content/themes/
    2. Create a new style.css file inside the graphene-child folder
    3. Copy and paste the following code into the new style.css
      /*
      Theme Name: Graphene Child
      Theme URI: http://example.com/
      Description: Child theme for the Graphene theme
      Author: Your name here
      Author URI: http://example.com/about/
      Template: graphene
      Version: 1.0
      */
      @import url("../graphene/style.css");
      /* Your modification goes here */

    4. You will only need to modify the values of the properties for the elements that you want to modify. There’s no need to copy and paste the entire style.
    5. Go to your WordPress Appearance > Themes admin page and activate the child theme.

    You can learn more about using child theme at the WordPress codex page.

    jkeis

    #10830

    Thanks for posting this.

    So I followed these directions, accurately too I believe, but can’t seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows…

    Thanks.

    Jason

    jkeis

    #10831

    I also tried the following to change the background color to purple but to no avail

    #content.one_column{

    background:#362942;

    }

    jkeis

    #10832

    ok n/m the last post with the color change, that worked. But the REMming doesn’t seem to work the way I thought it would… perhaps I need to REM out the original stylesheet?

    Admin

    Syahir Hakim

    #10833

    So I followed these directions, accurately too I believe, but can’t seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows…

    What you did, essentially, is nothing. When you commented what you copied, you are basically making the codes invisible to the browser, so the codes from the original CSS is still used. CSS’s cascading property allows you to override the styling, not disable them.

    Do this instead:

    #rss a {
    display:none;
    }

    jkeis

    #10834

    Oh ok, thanks, that helps. This example concerns removing the entire object, but how about in those circumstances when say one just wants a particular line to be disregarded inside of an object? The following is how I would do it in the main style.css without a child. How would this be done with a child theme?

    .post-meta p.post-author{

    font:normal 11px tahoma;

    float:right;

    display:block;

    line-height:18px;

    color:#dfedff;

    /*position:relative;*/

    Admin

    Syahir Hakim

    #10835

    In that case you have to find a value to reset that CSS property. position:static, maybe?

    BenGladden

    #10836

    When I activate my Graphene-Child theme, some of my colors are wrong. The gray-to-black fade is now just solid black in the footer and the RSS/Search bar above the header and the menu bar is a dull light gray. Also, some of the interior gray between main and sidebar is missing. I copied the style.css file ONLY to graphene-child directory and changed only the header as you have instructed.

    Admin

    Syahir Hakim

    #10837

    Hi BenGladden,

    Do not copy the entire style.css file from the Graphene theme’s folder into the child theme. Create a new style.css file instead, and only add CSS codes for the elements that you want to change.

    The main style.css contains reference to background images which do not exist in the child theme folder. Of course, you can copy the entire images folder as well, but this is unnecessary.

    The purpose of child theme is to make modifications easier and preserve the changes when there’s an update. Copying the entire style.css file into the child theme defeats both of those purposes.

    BenGladden

    #10838

    Thanks for your quick response to my dumb question! Would it be too much for me to ask another? Will you please provide the code necessary to include in my child style.css file that will remove “home” from the menu bar and remove the page title from the top of each of my static pages? Sorry, I don’t know code and your assistance would be most appreciated!

    Thanks

    Ben

Viewing 10 posts - 1 through 10 (of 110 total)

You must be logged in to reply to this topic.