How do i change blue colours in Graphene theme?

April 17, 2011 at 9:19 am #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,

Kim

April 17, 2011 at 1:23 pm #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

April 18, 2011 at 6:49 am #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

April 18, 2011 at 12:59 pm #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

April 18, 2011 at 3:36 pm #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

April 18, 2011 at 3:48 pm #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

April 21, 2011 at 10:06 pm #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

April 22, 2011 at 12:39 am #13790

Hey mate, thanks for the help.