Home › Forums › Graphene WordPress theme › Support

Help with Changing Colors

  • Gitte Dahm

    February 16, 2011 at 6:32 pm #11961

    Hi Kim

    Do you think that I can use that also?

    Where do I change it .. just have so little sense of it here

    Best regards

    Gitte

    Kim

    February 16, 2011 at 7:26 pm #11962

    Hej Gitte.

    I think You are running old Graphene 1.1.3.1 ???

    Take a backup before any upgrade.. (ask)

    This style CSS works for me so far in Graphene 1.4a,

    im sure more to come. Check here first:

    http://www.nørrebo.dk

    Well im running Firefox, Opera, Chrome, Safari.

    IE8 are IE9 are more tricky, but we get there.

    I think you can use this CSS for child in 1.4a:

    /*

    Theme Name: Graphene Child

    Theme URI: http://www.jungleman.dk/junglemans_blog/

    Description: Child theme for the Graphene theme

    Author: Gitte Dahm

    Author URI: http://www.jungleman.dk

    Template: graphene

    Version: 0.1.0

    */

    @import url(“../graphene/style.css”);@import url(“http://www.jungleman.dk/junglemans_blog/wp-content/themes/graphene/style.css”);

    /* Your modification goes here */

    #top-bar {

    height: 46px;

    }

    #rss a {

    margin: 8px 0 0 23px;

    }

    .menu li a, .menu li a:visited {

    color: #F5F5F5;

    font: 12px/24px arial;

    padding: 0 6px;

    text-decoration: none;

    }

    .post {

    -moz-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    -webkit-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    }

    .featured_slider{

    background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;

    background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));

    background: linear-gradient(left top, #E0E0E0, #EEEEEE);

    -moz-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    -webkit-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    }

    .featured_slider #slider_root {

    -moz-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    -webkit-box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    box-shadow: inset 0px 0px 1px 1px #C4C4C4;

    background: none repeat scroll 0 0 #FFFFFF;

    }

    .sidebar h3 {

    background:#B5B5B5;

    background: -moz-linear-gradient(#D4D4D4, #8A8A8A) repeat scroll 0 0 transparent;

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#8A8A8A));

    background: linear-gradient(#D4D4D4, #8A8A8A);

    -pie-background: linear-gradient(#D4D4D4, #8A8A8A);

    border-bottom: 1px solid #9096A1;

    }

    #footer {

    -moz-box-shadow: 0px 0px 5px 0px #000000;

    -webkit-box-shadow: 0px 0px 5px 0px #000000;

    box-shadow: 0px 0px 5px 0px #000000;

    }

    Gitte Dahm

    February 16, 2011 at 8:15 pm #11963

    Yes yes now its work…big thanks to all

    Best regards,

    Gitte

    Kim

    February 16, 2011 at 10:58 pm #11964

    And maybe a grey slider button:

    .block-button, .block-button:visited {
    
-moz-border-radius: 5px 5px 5px 5px;
    
-moz-box-shadow: 0 0 5px #C4C4C4;
    
background: -moz-linear-gradient(#D4D4D4, #8A8A8A) repeat scroll 0 0 transparent;
    
-webkit-border-radius:5px;
    
border-radius:5px;
    
border: 1px solid #C4C4C4;
    
display:block;
    
font:bold 12px arial;
    
text-decoration:none;
    
padding:5px 15px 6px 15px;
    
color:#FFFFFF;
    
text-shadow:0 -1px 1px #444444;
    
margin-top:10px;
    
position:relative;
    
float:right;
    
-webkit-box-shadow:0 0 5px #C4C4C4;
    
box-shadow:0 0 5px #C4C4C4;
    
background:#B5B5B5;
    
background:-moz-linear-gradient(#D4D4D4, #8A8A8A);
    
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#8A8A8A));
    
background:linear-gradient(#D4D4D4, #8A8A8A);
    
-pie-background: linear-gradient(#D4D4D4, #8A8A8A);
    
}
    

    
.block-button:hover{
    
text-decoration:none;
    
color:#FFFFFF;
    
cursor:pointer;
    
background:#D4D4D4;
    
background:-moz-linear-gradient(#D4D4D4, #707070);
    
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#707070));
    
background:linear-gradient(#D4D4D4, #707070);
    
-pie-background: linear-gradient(#D4D4D4, #707070);
    
}

    Sunshyne

    February 16, 2011 at 11:36 pm #11965

    That’s really nice, Kim. Thanks!

    This is a great theme, and y’all are making it even better.

    Admin

    Syahir Hakim

    February 17, 2011 at 4:03 am #11966

    Kim, next time wrap your codes in backticks (`). Makes it much more readable.

    lv

    February 17, 2011 at 8:02 pm #11967

    I too am trying to change the color from the standard blue as it does not meet the color scheme of the rest of my site, however, when I enter the code that you provided there is no change & it remains blue. Please let me know if there is another code I could enter or advice I could try. (I’m looking to change the blue to green). Thanks!

    unknown

    February 18, 2011 at 3:30 am #11968

    Hello everybody!

    First I want to say that i LOVE this theme!!!

    Since the update to 1.1.4 the Widget-Menu-Bars are blue. As suggested in this post I added this into the Custom CSS section.

    (.featured_slider{

    background: -moz-linear-gradient(left top, #333, #aaa);

    background: -webkit-gradient(linear, left top, right bottom, from(#333), to(#aaa));

    background: linear-gradient(left top, #333, #aaa);

    -pie-background: linear-gradient(left top, #333, #aaa);

    }

    .sidebar h3{

    background:#3C9CD2;

    background:-moz-linear-gradient(#aaa, #555);

    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#aaa), to(#555));

    background:linear-gradient(#aaa, #555);

    -pie-background: linear-gradient(#aaa, #555);

    border-bottom:1px solid #444;

    })

    But the color the bars changed to is a little bit too dark for me. The color these bars have on this site (http://www.nørrebo.dk/) would be perfect for me. 🙂

    How can I change the bars into this color? Unforutanely I know nothing about CSS, but I am willing to learn 😉

    Kim

    February 18, 2011 at 5:09 pm #11969

    Hi unknown.

    Well then you can have my present changes and pick what

    you need. Some of the colors need a little trimming:

    #top-bar {
    
height: 46px;
    
}
    

    
#rss a {
    
margin: 8px 0 0 23px;
    
}
    

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

    
.post {
    
-moz-box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
-webkit-box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
}
    

    
.entry-content p, .slider_post_entry p, .entry-content ul, .entry-content ol, .comment-entry ol{
    
font-size: 13px,1em;
    
font-family: Helvetica,Arial,sans-serif;
    
color: #686E6B;
    
}
    

    
.slider_post h2 a, .slider_post h2 a:visited{
    
font:normal 22px georgia;
    
}
    

    
.featured_slider{
    
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
    
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
    
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
    
-moz-box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
-webkit-box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
box-shadow: inset 0px 0px 1px 1px #C4C4C4;
    
}
    

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

    
.block-button, .block-button:visited {
    
-moz-border-radius: 5px 5px 5px 5px;
    
-moz-box-shadow: 0 0 5px #C4C4C4;
    
background: -moz-linear-gradient(#D4D4D4, #8A8A8A) repeat scroll 0 0 transparent;
    
-webkit-border-radius:5px;
    
border-radius:5px;
    
border: 1px solid #C4C4C4;
    
display:block;
    
font:bold 12px arial;
    
text-decoration:none;
    
padding:5px 15px 6px 15px;
    
color:#FFFFFF;
    
text-shadow:0 -1px 1px #444444;
    
margin-top:10px;
    
position:relative;
    
float:right;
    
-webkit-box-shadow:0 0 5px #C4C4C4;
    
box-shadow:0 0 5px #C4C4C4;
    
background:#B5B5B5;
    
background:-moz-linear-gradient(#D4D4D4, #8A8A8A);
    
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#8A8A8A));
    
background:linear-gradient(#D4D4D4, #8A8A8A);
    
-pie-background: linear-gradient(#D4D4D4, #8A8A8A);
    
}
    

    
.block-button:hover{
    
text-decoration:none;
    
color:#FFFFFF;
    
cursor:pointer;
    
background:#D4D4D4;
    
background:-moz-linear-gradient(#D4D4D4, #707070);
    
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#707070));
    
background:linear-gradient(#D4D4D4, #707070);
    
-pie-background: linear-gradient(#D4D4D4, #707070);
    
}
    

    
.sidebar h3 {
    
background:#B5B5B5;
    
background: -moz-linear-gradient(#D4D4D4, #8A8A8A) repeat scroll 0 0 transparent;
    
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D4D4D4), to(#8A8A8A));
    
background: linear-gradient(#D4D4D4, #8A8A8A);
    
-pie-background: linear-gradient(#D4D4D4, #8A8A8A);
    
border-bottom: 1px solid #9096A1;
    
}
    

    
.sidebar, .sidebar p, .sidebar li {
    
font-family: helvetica,arial,sans-serif;
    
font-size: 13px;
    
color: #686E6B;
    
}
    

    
#footer {
    
-moz-box-shadow: 0px 0px 5px 0px #000000;
    
-webkit-box-shadow: 0px 0px 5px 0px #000000;
    
box-shadow: 0px 0px 5px 0px #000000;
    
}

    unknown

    February 19, 2011 at 2:15 am #11970

    Hi Kim!

    Thank you very, very much! It’s awesome! 😀

Viewing 10 posts - 21 through 30 (of 45 total)

  • You must be logged in to reply to this topic.