Return to Support

How do i change blue colours in Graphene theme?

Home Forums Graphene WordPress theme Support How do i change blue colours in Graphene theme?

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #852

    Hi there,

    I’ve just recently created a new website and have installed theme Graphene 1.2.1 on my WP. By the way, this is a great theme/skin you got going here.

    I’m just curious on how to change the blue in the theme. There’s a dark blue on the feature slide and a light blue on the sidebars and also the view post is a blue. I’d like to change these to a dark red and red.

    I put a code in the Editor > Custom CSS which i found in another thread, but it did nothing to the colours.

    Would be great if someone could help me out.

    I’m fairly new to this stuff as well.

    Cheers,

    Aj

    #13783
    Kim
    Member

    Hi Aj

    Ive give it at try. Lets take .sidebar h3 elements first 🙂

    If You already have this element & lines i Custom CSS, remove them.

    Put these CSS lines in Custom CSS, the red color codes You might have to reselect “from/to” with this CSS color link: http://www.color-hex.com/color/6d0019

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

    Also when You can please read this first post carefully:

    https://forum.graphene-theme.com/topic/how-to-modify-the-theme-using-a-child-theme

    Kim

    #13784

    That worked a treat mates. Thanks for that.

    Yeah i had a go at reading that, started to follow it, then got lost haha

    How did you find out it was .sidebar h3? And do you know what it is for the middle feature, with the dark blue background?

    Thanks

    #13786
    Kim
    Member

    Okay.

    You can find elements like .sidebar h3 with Firebug add-in for say Firefox 🙂

    Try look at my middle feature we call slider. I think this slider setup have to

    look nice om Your site?

    Kim

    #13787
    Kim
    Member

    Here is another change: h1.page-title (Bar – when You click: 2010-2011 NBA Season)

    h1.page-title {
    -pie-background: linear-gradient(#8f0222, #6d0019);
    background: #6d0019;
    background: linear-gradient(#8f0222, #6d0019);
    background: -moz-linear-gradient(#8f0222, #6d0019) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#8f0222), to(#6d0019));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8f0222', endColorstr='#6d0019'); /* for IE8 */
    text-shadow: 0 -1px 0 #000000;
    -moz-border-radius: 0 5px 0 0;
    }

    Kim

    #13788
    Kim
    Member

    And before You get lost: .block-button in two states 🙂

    .block-button, .block-button:visited {
    -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:#8f0222;
    background: -moz-linear-gradient(#8f0222, #6d0019) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#8f0222), to(#6d0019));
    background:linear-gradient(#8f0222, #6d0019);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8f0222', endColorstr='#6d0019'); /* for IE */
    -pie-background: linear-gradient(#8f0222, #6d0019);
    }

    .block-button:hover{
    text-decoration:none;
    color:#FFFFFF;
    cursor:pointer;
    background:#6d0019;
    background:-moz-linear-gradient(#6d0019, #8f0222);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#6d0019), to(#8f0222));
    background:linear-gradient(#6d0019, #6d0019);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d0019', endColorstr='#6d0019'); /* for IE */
    -pie-background: linear-gradient(#6d0019, #8f0222);
    }

    Kim

    #13789
    Kim
    Member

    Lets go for the .featured_slider :

    .featured_slider{
    background: -moz-linear-gradient(left top , #6d0019, #8f0222) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, right bottom, from(#6d0019), to(#8f0222));
    background: linear-gradient(left top, #6d0019, #8f0222);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d0019', endColorstr='#8f0222'); /* for IE8 */
    -pie-background: linear-gradient(#6d0019, #8f0222);
    -moz-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    -webkit-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    box-shadow: inset 0px 0px 1px 1px #CE0B50;
    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 #CE0B50;
    -webkit-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    box-shadow: inset 0px 0px 1px 1px #CE0B50;
    background: none repeat scroll 0 0 #FFFFFF;
    }

    Then again, there might be some color needs a twist (#CE0B50)

    or You want to turn these round: from(#6d0019), to(#8f0222)

    Kim

    #13790

    Hey mate, thanks for the help.

    That last code for the Slider. Seems as though it’s only coloured the border?

    #13791
    Kim
    Member

    Yes I know, but I wanted to wrap this up:

    How do i change blue colours in Graphene theme?

    There might be some issues with text color fonts & sizes 🙂

    But maybe its time to explain how to have full background pictures in the slider?

    Waist if You dont want that 🙂

    Kim

    #13792
    Ricardo
    Member

    Hey Kim,

    I’ve been staring at the code all morning, and my slider just doesn’t want to change color in IE9 (I got the sidebar to work though^^). My code for the slider looks exactly the same as yours, only the color codes are different. Could you please help me out? I’m out of options. I must miss something in my code.

    http://www.fastforwardandrewind.com

    /*
    Theme Name: Graphene Child
    Theme URI: http://www.fastforwardandrewind.com
    Description: Child theme
    Author: Ricardo
    Author URI: http://www.fastforwardandrewind.com
    Template: graphene
    Version: 1.0
    */
    @import url("../graphene/style.css");
    /* Your modification goes here */

    .entry-content img, .child-page img {
    border: medium none;
    margin: 5px;
    }

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

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

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

    .block-button, .block-button:visited {
    -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: 2 2 2px #333333;
    -webkit-box-shadow:2 2 2px #333333;
    box-shadow:2 2 2px #333333;
    background:#ea5c24;
    background: -moz-linear-gradient(#ea5c24, #dc3e00) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ea5c24), to(#dc3e00));
    background:linear-gradient(#ea5c24, #dc3e00);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc3e00', endColorstr='#dc3e00'); /* for IE */
    -pie-background: linear-gradient(#ea5c24, #dc3e00);
    }

    .block-button:hover {
    text-decoration:none;
    color:#FFFFFF;
    cursor:pointer;
    background:#972b01;
    background:-moz-linear-gradient(#972b01, #dc3e00);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#972b01), to(#dc3e00));
    background:linear-gradient(#972b01, #dc3e00);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#972b01', endColorstr='#dc3e00'); /* for IE */
    -pie-background: linear-gradient(#972b01, #dc3e00);
    }

    #nav .menu li a, #nav .menu li a:visited {
    color: #dc3e00;
    font: 19px/24px arial;
    padding: 0 6px;
    text-decoration: none;
    }

    #13793
    Kim
    Member

    Hifi

    While Burn-In A Tube Amp over the Week-end – Just Great Sound 🙂

    I Simply Decided to Change My Graphene Slider with Another Style:

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

    Kim

    #13794
    mvallarino
    Member

    Hi, I am sooo lost.

    I want to change all the blue colors to a pink (I know where to select the color code).

    So, I went to Appearance, then Editor then to the right I selected sidebar and this is what I see:

    (Edit moderator: functions.php removed here)

    Where should I change stuff? I need step by step instructions, I am not at all familiar with any of this. Thank you!

    #13795
    Kim
    Member

    Hi Amanda.

    Just insert CSS code in userdefined CSS on this page:

    http://www.amandacardoze.com/wp-admin/themes.php?page=graphene_options&tab=display

    Start with sidebar codes. Then look at color codes & find Your Pink color codes 🙂

    http://www.color-hex.com/color/a43ea4

    PS. Im shorten You post, the code is functions.php & not for color change!

    Kim

    #13796
    kanjipad
    Member

    Hi everyone,

    Thanks for this theme. I am still setting up my site but the theme seems to be working well. I just installed a child theme, to modify the colours, and it is also working. Some of my settings were reset to default values when I switched to the child theme but I guess that is expected.

    I had to make one small change to the style.css template – I changed the import line to read:

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

    I realise now that this actually matches the above example. My version, probably copied from some other thread, did not have the initial two dots so the url was wrong. The other mistake I made at first was putting the child directory as a sub-folder of the graphene folder, so my dashboard didn’t see it. I only mention this in case others make the same mistake.

    Many thanks for your help,

    Cheers,

    Craig.

    #13797
    Kim
    Member

    Hi Craig

    Your Child Theme Will Help You Down The Line!

    I Just Hope More Users Would Make A Child Theme.

    But it Discovers After an Update by Any WordPress Theme 🙂

    Kim

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.