How to modify the theme using a child theme

  • Anonymous

    #10879

    Hey Syahir,

    I love your theme and thank you so much and we will be making a donation for what is excellent work by you!

    My concerns are that I have made adjustments to the colors in the style.css (on my LIVE domain http://www.mostabear.INFO), after reading the posts here it’s seems that I should have done that in a child theme to avoid having to make those changes again with every update to the theme, which I have attempted (in my very limited abilities) to do on my TEST site http://www.boganartwork.COM.

    t

    Although it looks terrific on the LIVE .INFO site with the modifications I made to the parent style.css when I make the child style.css file in the graphene-child folder which is in graphene folder under themes I don’t see the color changes on my TEST site. I did a clean install of the graphene theme on the TEST site and then made the child folder as I thought was directed however it does not seem to be working form me. I’m sure it is something simple and as I am NOT a coder by any stretch of the imagination I could use a little help from you. I am including the code I put in the child theme….there are no backticks since I’m not clear on what that is or how to do/use them (sorry). Any input would be greatly appreciated.

    /*

    Theme Name: Graphene Child

    Theme URI: http: //mostabear.com/

    Description: Child theme for the Graphene theme

    Author: Christine Grouhel

    Author URI: http: //mostabear.com/about/

    Template: graphene

    Version: 1.0

    */

    @import url(“../graphene/style.css”);

    /* My modifications go here */

    body {

    background: url(images/bg_g.png) repeat #000 fixed;

    font: 12px Tahoma, Arial;

    }

    a,

    a:visited {

    color: #669966;

    text-decoration: none;

    }

    a:hover {

    color: #003300;

    text-decoration: none;

    }

    }

    #nav .menu li a,

    #nav .menu li a:visited {

    color: #99ff99;

    font: normal 12px arial;

    line-height: 24px;

    padding: 0 6px;

    text-decoration: none;

    }

    }

    #nav #secondary-menu.menu li a,

    #nav #secondary-menu.menu li a:visited {

    color: #71716F;

    font-size: 11px;

    text-transform: none;

    }

    }

    h1.page-title {

    background: #336633;

    background: linear-gradient(left top, #003300, #ccff99);

    background: -moz-linear-gradient(left top, #003300, #ccff99);

    background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));

    -pie-background: linear-gradient(left top, #003300, #ccff99);

    color: #e3e3e3;

    font-size: 130%;

    margin: 0 auto 10px;

    padding: 8px 0;

    text-align: center;

    text-shadow: 0 -1px 0 #333333;

    }

    }

    .featured_slider {

    -pie-background: linear-gradient(left top, #003300, #ccff99);

    background: #336633;

    background: linear-gradient(left top, #003300, #ccff99);

    background: -moz-linear-gradient(left top, #003300, #ccff99);

    background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));

    margin-bottom: 20px;

    padding-bottom: 25px;

    padding-top: 15px;

    position: relative;

    width: 100%;

    }

    }

    .full-sized .block-button,

    .full-sized .block-button:visited {

    border-color: #003300;

    position: absolute;

    right: 10px;

    bottom: 10px;

    }

    }

    .block-button,

    .block-button:visited {

    background: url(images/bg-block-button.png) left bottom repeat-x #336633;

    background: -moz-linear-gradient(#003300, #ccff99);

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    background: linear-gradient(#003300, #ccff99);

    border: 1px solid #336633;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    -moz-box-shadow: 0 0 5px #555;

    -webkit-box-shadow: 0 0 5px #555;

    box-shadow: 0 0 5px #555;

    color: #fff;

    cursor: pointer;

    display: block;

    float: right;

    font: bold 12px arial;

    margin: 10px 5px 5px;

    padding: 5px 15px 6px;

    position: relative;

    text-decoration: none;

    text-shadow: 0 -1px 1px #444;

    }

    .block-button:hover {

    background: url(images/bg-block-button-hover.png) left bottom repeat-x #336633;

    background: -moz-linear-gradient(#003300, #ccff99);

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    background: linear-gradient(#003300, #ccff99);

    color: #fff;

    cursor: pointer;

    text-decoration: none;

    }

    }

    .sticky {

    background-color: #bdff8e;

    }

    }

    p code {

    background-color: #edffd6;

    }

    }

    /*

    #comments li.bypostauthor {

    background-color: #003300 !important;

    -moz-box-shadow: 0 0 5px #333333;

    -webkit-box-shadow: 0 0 5px #333333;

    box-shadow: 0 0 5px #333333;

    color: #FFFFFF;

    }

    #comments .children li.bypostauthor {

    padding: 10px 10px 0 60px !important;

    border:1px solid #003300;

    }

    #comments ol li.bypostauthor img.avatar {

    border-color:#003300;

    }

    }

    .sidebar h3 {

    -pie-background: linear-gradient(#003300, #ccff99);

    background: #003300;

    background: linear-gradient(#003300, #ccff99);

    background: -moz-linear-gradient(#003300, #ccff99) repeat scroll 0 0 transparent;

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#003300′, endColorstr=’#ccff99′); /* for IE */

    text-shadow: 0 -1px 0 #000000;

    }

    }

    .sidebar h3 a,

    .sidebar h3 a:visited,

    .sidebar h3 a,

    .sidebar h3 a:hover {

    color: #336633;

    }

    Anonymous

    #10880

    Syahir,

    Well I did find a couple of problems, I removed the /* My modifications go here */ line and found some blank lines and and an errant } or two. I believe the code is clean now and my pages are rendering as I would expect them too with one small exception….the sidebar widgets on my TEST http://www.boganartwork.com are still blue. I’ll keep plugging away but if you can see my issue in the code above as it relates to color I would appreciate your input. My LIVE http://www.mostabear.info site looks glorious and thanks again for the beautiful theme.

    Rambunxious

    #10881

    Hi there,

    I don’t know anything about code, so this is tough. I’m trying to make the new links that appeared with the update at the bottom of the page. What should I be disabling and what’s the code to do it?

    OR, how can I get the proper thumbnail to display in relation to the page it’s linking to?

    Example: http://rambunxious.com/?page_id=24

    Thanks a million! <3

    weirdseyeview

    #10882

    hello,

    I wanted to make test wrap around images in my post so I created a child theme style.css, inside …themes/graphene/graphene-child

    then I copied/pasted a code given by wordpress

    but I couldn’t find in graphene options how to enable the child theme… pls help. thanks

    btw, here’s the style.css I created

    /* CSS Document */

    /*

    Theme Name: Graphene Child

    Theme URI: http://weirdseyeview.com/blog/

    Description: Child theme for the Graphene theme

    Author: WEV

    Author URI: http://weirdseyeview.com/blog/author/

    Template: graphene

    Version: 1.0

    */

    @import url(“../graphene/style.css”);

    img.alignright {float:right; margin:0 0 1em 1em}

    img.alignleft {float:left; margin:0 1em 1em 0}

    img.aligncenter {display: block; margin-left: auto; margin-right: auto}

    a img.alignright {float:right; margin:0 0 1em 1em}

    a img.alignleft {float:left; margin:0 1em 1em 0}

    a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

    Kim

    #10883
    /*
    Theme Name: Graphene Child
    Theme URI: http://weirdseyeview.com/blog/
    Description: Child theme for the Graphene theme
    Author: WEV
    Author URI: http://weirdseyeview.com/blog/author/
    Template: graphene
    Version: 0.1.2.1
    */
    @import url("/wp-content/themes/graphene/style.css");
    /* My modification goes from here, example top-bar */
    #top-bar {
    height:46px;
    background: url("/wp-content/uploads/sprite_tb110.png");
    }

    #top-bar just to show a section. The 6 lines You have looks wrong, no section start & no } finish.

    The Child Theme must show up under Themes. It seems You have some section to move into Child Theme from either Custom CSS or core style.css 🙂

    Kim

    weirdseyeview

    #10884

    thanks kim

    but i don’t know which section to put it under. the code comes from wordpress, it is supposed to make text wrap around images, which is not happening in my blog

    Kim

    #10885

    Remove them. This post talks about text wrap:

    Kim

    Vaibhav

    #10886

    Hello

    I did what you mentioned but when i go to themes here is what it shows

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description

    graphene-child Stylesheet is missing.

    I have done what you mentioned. Here is my style.css code –

    /*

    Theme Name: Graphene Child

    Theme URI: http: //www.rudragems.com/

    Description: Child theme for the Graphene theme

    Author: Vaibhav Bathla

    Author URI: http: //www.rudragems.com/about/

    Template: graphene

    Version: 1.0

    */

    @import url(“../graphene/style.css”);

    /* h2, h2 a, h2 a:visited {

    font-family: georgia,verdana,tahoma,arial;

    font-size: 20px;

    padding-bottom: 4px;

    } */

    Please tell me what to do now???

    duskinchains

    #10887

    I’ve installed my child theme and almost everything is working fine, except the footer. It’s all the way to the left and the copyright link is all screwy. I would also like to find a way to remove the RSS/search bar on the top, if possible.

    Website (contains adult material): http://duskinchains.com/

    Kim

    #10888

    The error with the Footer was there before You made the Child Theme 🙂

    So It must be some Plugin installed there. You just might have to remove

    plugins in Footer to see whats doing this 🙂

    Kim

Viewing 10 posts - 51 through 60 (of 107 total)

  • You must be logged in to reply to this topic.