Help with Changing Colors
-
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
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:
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;
}
Yes yes now its work…big thanks to all
Best regards,
Gitte
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);
}Admin
Kim, next time wrap your codes in backticks (`). Makes it much more readable.
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!
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 😉
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;
}
- You must be logged in to reply to this topic.