Home › Forums › Graphene WordPress theme › Support

How to modify the theme using a child theme

  • JulAmber

    June 15, 2011 at 6:26 pm #10909

    Please help! I activated the child theme and it’s not working. 🙁 It is not taking any of the changes I put in. My website is http://www.naturallifemom.com Here is the style.css I have in my child folder.

    /*
    
Theme Name:     GrapheneChild
    
Theme URI:      http://naturallifemom.com/
    
Description:    Child theme for the Graphene theme
    
Author:         Julia
    
Author URI:     http://naturallifemom/about/
    
Template:       graphene
    
Version:        1.0
    
*/
    
@import url("../graphene/style.css");
    

    
.featured_slider {
    
    background: -moz-linear-gradient(left top , #49622D, #789C4F) repeat scroll 0 0 transparent;
    
    margin-bottom: 20px;
    
    padding-bottom: 25px;
    
    padding-top: 15px;
    
    position: relative;
    
    width: 100%;
    
}
    
.sidebar h3 {
    
    background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
    border-bottom: 1px solid #789C4F;
    
    border-radius: 5px 5px 0 0;
    
    color: #FFFFFF;
    
    font: bold 16px/20px arial;
    
    margin: -15px 0 5px -12px;
    
    padding: 7px 12px;
    
    text-shadow: 0 -1px 0 #94E43A;
    
    width: 100%;
    
}
    
.block-button, .block-button:visited, .Button {
    
    background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
    border: 1px solid #789C4F;
    
    border-radius: 5px 5px 5px 5px;
    
    box-shadow: 0 0 5px #555555;
    
    color: #FFFFFF;
    
    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 #94E43A;
    
}
    
a, a:visited {
    
    color: #789C4F;
    
    text-decoration: none;
    
}

    Kim

    June 15, 2011 at 8:40 pm #10910

    Hi Julia

    This just might help You 🙂

    /*
    
Theme Name: Graphene Child Theme
    
Theme URI: http://www.naturallifemom.com
    
Description: Child theme for The Graphene Theme
    
Author: Julia
    
Author URI: http://www.naturallifemom.com/about
    
Template: graphene
    
Version: 0.1.3.1
    
*/
    
@import url("/wp-content/themes/graphene/style.css");
    
/* Your modification goes from here */
    
.featured_slider {
    
background: -moz-linear-gradient(left top , #49622D, #789C4F) repeat scroll 0 0 transparent;
    
margin-bottom: 20px;
    
padding-bottom: 25px;
    
padding-top: 15px;
    
position: relative;
    
width: 100%;
    
}
    

    
.sidebar h3 {
    
background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
border-bottom: 1px solid #789C4F;
    
border-radius: 5px 5px 0 0;
    
color: #FFFFFF;
    
font: bold 16px/20px arial;
    
margin: -15px 0 5px -12px;
    
padding: 7px 12px;
    
text-shadow: 0 -1px 0 #94E43A;
    
width: 100%;
    
}
    

    
.block-button, .block-button:visited, .Button {
    
background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
border: 1px solid #789C4F;
    
border-radius: 5px 5px 5px 5px;
    
box-shadow: 0 0 5px #555555;
    
color: #FFFFFF;
    
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 #94E43A;
    
}
    

    
a, a:visited {
    
color: #789C4F;
    
text-decoration: none;
    
}

    Then again, with this code You might have some .block-button issues with IE8/9

    You can find My Grey Button here: https://forum.graphene-theme.com/topic/changing-button-color

    Regarding slider – Im using another setup:

    https://forum.graphene-theme.com/topic/my-graphene-slider-picture-setup

    Well You decide 🙂

    Kim

    JulAmber

    June 16, 2011 at 4:35 pm #10911

    Okay, that did help some. I like the idea of your slider but it is not working for me, as you can see on my site naturallifemom.com

    It is just all grey where the excerpt is and the image is tiling. I’m not sure how to get my colors the way I would like them either but I will look again at the button link you gave me and see if I can figure it out maybe. The colors are still blue instead of the green I wanted.

    JulAmber

    June 16, 2011 at 4:41 pm #10912

    This is the code I have in now but still does not look right.

    /*

    Theme Name: Graphene Child Theme

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

    Description: Child theme for The Graphene Theme

    Author: Julia

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

    Template: graphene

    Version: 0.1.3.1

    */

    @import url(“/wp-content/themes/graphene/style.css”);

    /* Your modification goes from here */

    .featured_slider{

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    margin-bottom: 2px;

    }

    .full-sized .slider-entry-wrap {

    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);

    height: 100%;

    position: absolute;

    right: 0;

    top: 0;

    width: 35%;

    }

    .full-sized .slider_post h2 a, .full-sized .slider_post h2 a:visited {

    color: #AFAEAE;

    font: 18px georgia;

    }

    .full-sized .slider_post_entry p {

    color: #808080;

    }

    .sidebar h3 {

    background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;

    border-bottom: 1px solid #789C4F;

    border-radius: 5px 5px 0 0;

    color: #FFFFFF;

    font: bold 16px/20px arial;

    margin: -15px 0 5px -12px;

    padding: 7px 12px;

    text-shadow: 0 -1px 0 #94E43A;

    width: 100%;

    }

    .block-button, .block-button:visited, .Button {

    -moz-border-radius: 5px 5px 5px 5px;

    -webkit-border-radius:5px;

    border-radius:5px;

    border: 0px solid #CCCCCC;

    display:block;

    font:bold 12px arial;

    text-decoration:none;

    padding:5px 15px 6px 15px;

    color:#FFFFFF;

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

    margin-top:10px;

    position:relative;

    float:right;

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

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

    box-shadow:0 0 0px #333333;

    background:#afaeae;

    background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;

    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#afaeae), to(#6E6E6E));

    background:linear-gradient(#afaeae, #6E6E6E);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#49622D’, endColorstr=’#789C4F’); /* for IE */

    -pie-background: linear-gradient(#49622D, #789C4F);

    -moz-transition: color 0.25s ease-in-out 0s;

    }

    a, a:visited {

    color: #789C4F;

    text-decoration: none;

    }

    Kim

    June 16, 2011 at 5:25 pm #10913

    Your picture sizes are wrong, take this thirsties.jpg is 200x200px

    You need to resize the pictures/bacground to fit the slider:

    660px x your height in slider setup 🙂

    Please read this about inserting code here in Forum:

    https://forum.graphene-theme.com/topic/help-us-to-help-you-1#post-4535

    Kim

    JulAmber

    June 16, 2011 at 9:22 pm #10914

    I think I’m about to give up. 🙁 I guess I just don’t understand. I took everything out of the child them style.css and just put in one code and it still would not work and I don’t know why. I just want to change the colors. That is all I want to do. When I use Firebug, everything looks correct but when I put the code into the style.css, it changes nothing at all.

    JulAmber

    June 16, 2011 at 9:45 pm #10915

    NEVER MIND! I finally did it! Yay!!!!

    JulAmber

    June 19, 2011 at 12:05 am #10916

    Any idea why slider looks correct (green) in Safari and Firefox but is still blue in Internet Explorer?

    Here’s my css code in my child theme:

    /*
    
Theme Name: Graphene Child Theme
    
Theme URI: http://www.naturallifemom.com
    
Description: Child theme for The Graphene Theme
    
Author: Julia
    
Author URI: http://www.naturallifemom.com/about
    
Template: graphene
    
Version: 0.1.3.1
    
*/
    
@import url("/wp-content/themes/graphene/style.css");
    
/* Your modification goes from here */
    
.block-button, .block-button:visited, .Button {
    
-moz-border-radius: 5px 5px 5px 5px;
    
-webkit-border-radius:5px;
    
border-radius:5px;
    
border: 0px solid #CCCCCC;
    
display:block;
    
font:bold 12px arial;
    
text-decoration:none;
    
padding:5px 15px 6px 15px;
    
color:#FFFFFF;
    
text-shadow:0 -1px 1px #000000;
    
margin-top:10px;
    
position:relative;
    
float:right;
    
-moz-box-shadow: 0 0 0px #333333;
    
-webkit-box-shadow:0 0 0px #333333;
    
box-shadow:0 0 0px #333333;
    
background:#afaeae;
    
background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#49622D), to(#789C4F));
    
background:linear-gradient(#49622D, #789C4F);
    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49622D', endColorstr='##789C4F'); /* for IE */
    
-pie-background: linear-gradient(#49622D, #789C4F);
    
-moz-transition: color 0.25s ease-in-out 0s;
    
}
    

    
a, a:visited {
    
color: #789C4F;
    
text-decoration: none;
    
}
    

    
.sidebar h3 {
    
-pie-background: linear-gradient(#49622D, #789C4F);
    
background: #49622D;
    
background: linear-gradient(#49622D, #789C4F);
    
background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#49622D), to(#789C4F));
    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49622D', endColorstr='#789C4F'); /* for IE */
    
text-shadow: 0 -1px 0 #000000;
    
}
    

    
.featured_slider{
    
background: -moz-linear-gradient(left top , #49622D, #789C4F) repeat scroll 0 0 transparent;
    
background: -webkit-gradient(linear, left top, right bottom, from(#49622D), to(#789C4F));
    
background: linear-gradient(left top, #49622D, #789C4F);
    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49622D', endColorstr='#789C4F'); /* for IE8 */
    
-pie-background: linear-gradient(#49622D, #789C4F);
    
-moz-box-shadow: inset 0px 0px 1px 1px #49622D;
    
-webkit-box-shadow: inset 0px 0px 1px 1px #49622D;
    
box-shadow: inset 0px 0px 1px 1px #49622D;
    
filter: progid:DXImageTransform.Microsoft.Shadow(color='#6d0019', Direction=90, Strength=3) !important; /* for IE */
    
}
    

    
.featured_slider #slider_root {
    
-moz-box-shadow: inset 0px 0px 1px 1px #49622D;
    
-webkit-box-shadow: inset 0px 0px 1px 1px #49622D;
    
box-shadow: inset 0px 0px 1px 1px #49622D;
    
background: none repeat scroll 0 0 #FFFFFF;
    
}
    

    
h1.page-title {
    
-pie-background: linear-gradient(#49622D, #789C4F);
    
background: #49622D;
    
background: linear-gradient(#49622D, #789C4F);
    
background: -moz-linear-gradient(#49622D, #789C4F) repeat scroll 0 0 transparent;
    
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#49622D), to(#789C4F));
    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49622D', endColorstr='#789C4F'); /* for IE */
    
text-shadow: 0 -1px 0 #000000;
    
}

    Aman

    June 20, 2011 at 10:15 am #10917

    Dear Syahir:

    I am using graphene with a child theme. Thanks for the nice work. However, I have a small problem:

    The text size that one sees while making a comment input is very small (not after publication. After publication this is okay). Could you please advise a fix for this through the child theme?

    Sincerely,

    Admin

    Syahir Hakim

    June 25, 2011 at 11:16 pm #10918

    Aman, please post your question in a separate topic. That will keep this thread’s discussion on topic and not veer off to something else.

Viewing 10 posts - 81 through 90 (of 107 total)

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