How do i change blue colours in Graphene theme?

  • ABasketballJones

    #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

    Kim

    #13783

    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

    ABasketballJones

    #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

    Kim

    #13786

    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

    Kim

    #13787

    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

    Kim

    #13788

    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

    Kim

    #13789

    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

    ABasketballJones

    #13790

    Hey mate, thanks for the help.

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

    Kim

    #13791

    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

    Ricardo

    #13792

    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;
    }
Viewing 10 posts - 1 through 10 (of 26 total)

You must be logged in to reply to this topic.