Unable to change Widget header gradient

  • BizCrunchy

    #5052

    I searched before registering and couldn’t find anything on this, so I apologise if this is something that’s been asked before.

    I’ve just set up a website for my podcast at http://www.tfcpodcast.com and decided to use the graphene theme.

    At Appearance > Graphene Options > Colors Options, I changed all of the widget colours, including the header gradient (#940011 – top, and #df3a000 – bottom). However, after saving these options and viewing my site, the gradient is unchanged. I’ve tried doing a cache-refresh and viewing the page in incognito to see if the problem was on my end. I’m using the latest version of Chrome, which, to my knowledge, shouldn’t be a factor. Other gradients I’ve changed using the Graphene Options page seem to have been effective.

    I also tried editing the CSS directly using WordPress’ Editor, and changing the sidebar gradient to my desired colours, but this hasn’t worked either.

    Any help would be greatly appreciated! Thanks.

    ronangelo

    #30490

    maybe your adding it to the wrong object. I searched for a color #940011 and it appears only as a text shadow.

    • Just to make sure.. you pressed “save” at the Graphene Options?
    • what codes did you add and have you tried the “Custom CSS” option in Graphene?

    nice avatar.

    BizCrunchy

    #30491

    I did save, yeah. I’ve just gone back to the Graphene Options now, and the text fields show the hex codes that I entered, but the preview still shows the wrong colours. I haven’t tried using the custom CSS option.

    I edited the stylesheet directly and changed the colours of the gradient for the sidebar like so:

    .sidebar h3 {
    background: url(images/bg-sidebar-h3.png) left bottom repeat-x #3C9CD2;
    background: -moz-linear-gradient(#3C9CD2, #1F6EB6);
    background: -webkit-linear-gradient(#df3a000, #940011);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3C9CD2', EndColorStr='#1F6EB6')";
    background: linear-gradient(#df3a000, #940011);
    border-bottom: 1px solid #195392;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    color: #fff;
    *display: inline;
    font: bold 16px/20px arial;
    margin: -15px 0 5px -12px;
    padding: 7px 12px;
    text-shadow: 0 -1px 0 #555;
    width: 100%;
    zoom: 1;
    }

    That didn’t work either.

    ronangelo

    #30492

    It seems that the settings that’s loading last is the one on options but it’s not the one you chose.

    Try to change the color present, save then change back to default color.. save.

    Then you can either try to adjust the colors again on the Color Options or add your CSS code in the Custom CSS option.

    I recommend that if you plan to add your own css, add it using the Custom CSS or on a Child Theme

    Mod

    Kenneth John Odle

    #30493
    Quote:
    I also tried editing the CSS directly using WordPress’ Editor

    Do not edit theme files directly. You will lose your changes at the next upgrade. As Graphene is in active development, updates come quite frequently. Use Graphene’s built-in options (there are many!) or create a child theme.

    I just did an overhaul of my site. You can see it here: http://blog.kjodle.net/

    You can peek at my child theme css here: http://blog.kjodle.net/wp-content/themes/graphene-stonesinwater/style.css?ver=3.4.1

    That might give you some ideas about which codes you need to change.

    @ronangelo

    I love the modifications you’ve made on your site. It looks awesome!

    BizCrunchy

    #30494
    Quote:
    Do not edit theme files directly. You will lose your changes at the next upgrade. As Graphene is in active development, updates come quite frequently. Use Graphene’s built-in options (there are many!) or create a child theme.

    I just did an overhaul of my site. You can see it here: http://blog.kjodle.net/

    You can peek at my child theme css here: http://blog.kjodle.net/wp-content/themes/graphene-stonesinwater/style.css?ver=3.4.1

    That might give you some ideas about which codes you need to change.

    @ronangelo

    I love the modifications you’ve made on your site. It looks awesome!

    Thanks, I’ll keep that in mind; you probably just saved me several huge headaches in the future 😛 I’ll look into child themes.

    Quote:
    It seems that the settings that’s loading last is the one on options but it’s not the one you chose.

    Try to change the color present, save then change back to default color.. save.

    Then you can either try to adjust the colors again on the Color Options or add your CSS code in the Custom CSS option.

    I recommend that if you plan to add your own css, add it using the Custom CSS or on a Child Theme

    I tried what you said to no avail. Thanks for the help though!

    Edit:

    When I change the colours to a different preset, that preset shows correctly. But then if I change the values for the gradient using graphene options, it reverts back to the default blue.

    Is there any way to override the graphene options? It seems to be that the problem lies with the method I’m editing the theme with. For some reason, the colours panel in graphene options is evidently not working properly for me.

    Admin

    Syahir Hakim

    #30495

    I see this in the CSS being generated by the theme to apply the custom colours:

    .sidebar h3{
    background: #DF3A000;
    background: -moz-linear-gradient( #DF3A000, #940011 );
    background: -webkit-linear-gradient(top, #DF3A000, #940011 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#DF3A000', EndColorStr='#940011')";
    background: linear-gradient( #DF3A000, #940011 );
    }

    You colour code has one too many 0. Hex colour codes can only be either 3 digits or 6 digits (excl. the #)

    BizCrunchy

    #30496

    I can’t believe I made such a stupid mistake… thank you!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.