Change colors in the slider
-
I bought the css upgrade for my latest site and want to change the gray colors in the slider. I can’t seem to find where this is in the CSS. Any pointers?
Here’s the site: http://safehealthyct.wordpress.com/
The blog I need help with is: (visible only to logged in users)
-
Hi there,
Only Staff usually designsimply and one Volunteer thesacredpath regularly provide CSS editing support. As you can see neither one appears to be logged into WordPress.com and posting to the forum. Please be patient while waiting for them to answer you. -
-
-
I didn’t mean to offend! I’m sure they both are, I only have experience with thesacredpath :-) He’s helped me a ton
-
-
There is not a way to change out the background color and also keep the gradient because that is not supported in the CSS editor yet (we have plans to possibly add that in the future), so for now what you can do is change it to a solid color. Here’s an example using “darkblue” just so you can see how it works:
.slideshow-items .entry-title, #sidebar-feature, #feature, .slideshow-caption-text p { background: darkblue; }The slideshow controls are a more tricky. They are done with what is called an image sprite. Here is the image:
In order to change out the color for those, you would need to download that image and create it again with new colors or just create your own image from scratch and then change out the CSS pieces required. If you would like to create an image with new color, or get a graphic designer to help you, upload the finished image to your media library and let us know the image URL and we will help you with the CSS bits.
-
Hi designsimply! Thanks for getting back to me. I put in this css and it only changes a little bit of the color of the slider and from how you wrote it above I thought it would change the whole slider (minus the controls of course) to one single color. Did I misunderstand?
-
The slider uses mostly gradients, and gradients have been an issue here. The issue is that the CSS Tidy program our custom CSS is run through is not allowing multiple background declarations in rules, so that means we cannot effectively change gradients. We can change it for a small fraction of browsers, but others will not do the gradient since their browser specific code ends up getting stripped out of our custom CSS.
Here is the code for the right size greyish area on the slider. The “filter” declaration is what is required for Internet Explorer which always has to be difficult.
#sidebar-feature { background:#111; background:-webkit-linear-gradient(top, #494949, #222222); background:-moz-linear-gradient(top, #494949, #222222); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#222222'); }Same thing with the grey title bar above the image on the left.
.slideshow-items .entry-title { background:-webkit-linear-gradient(top, #404040, #595959, #555555); background:-moz-linear-gradient(top, #404040, #595959, #555555); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#555555'); }The control bar at the bottom is a repeating image. The image used is an image “sprite” and has multiple images in each and then which image is ultimately show on the side depends on the positioning values in the background declaration.
.slideshow-controls { background: url("images/slider-controls.png") repeat-x scroll 0 0 transparent; } .slideshow-controls .slideshow-pager a { background: url("images/slider-controls.png") no-repeat scroll right -61px transparent; }Since it is highly unlikely the multiple gradient background declataions will survive a “save stylesheet” then you are likely going to be back to just using a standard solid color
#sidebar-feature { background: #111111; } .slideshow-items .entry-title { background: #404040; }And that is the extent of my energy for a while. This cold/whateveritis just won’t go away.
-
-
-
Also, thesacredpath’s reply has lots of extra/neat background/helpful info.
@shelly7644, here’s what I see in a test using Firefox 9.0.1: http://cl.ly/DsqT
What browser are you using please?
-
You are both incredibly appreciated! Hope you feel better thesacredpath. I’m going to go try out the css you gave me.
-
-
Mine doesn’t look like your screen shot but I love how it looks the way you did it so I think I’ll just switch it over. What color green did you use? It looks great.
-
The gradient CSS won’t work in the custom CSS editor.
In my last example, I switched darkblue to darkgreen, same CSS:
.slideshow-items .entry-title, #sidebar-feature, #feature, .slideshow-caption-text p { background: darkgreen; }I will try testing using Internet Explorer. Are you running the latest version, which is version 9?
-
No, we have internet explorer 8 at work and the security settings won’t let me upgrade it…
Can I ask another question? I keep doing something to mess up the layout one the homepage. I was able to get it so that below the slider just posts show up but I keep doing something (which I don’t understand) to make the more articles show up with the little box. I really don’t want that more articles box, I just want the posts to show up. What am I doing wrong?
-
I actually was just able to upgrade to internet explorer 9 and the slider still isn’t completely green like it was for you in firefox…
-
- The topic ‘Change colors in the slider’ is closed to new replies.
WordPress.com Forums 