How to modify the theme using a child theme

  • JulAmber

    #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

    #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

    #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

    #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

    #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

    #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

    #10915

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

    JulAmber

    #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

    #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

    #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.
Graphene Themes Forum