WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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 safehealthyct.wordpress.com.
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.
Thanks timethief, thesacredpath is amazing at CSS so I'll wait for him
Both of them are amazing. :)
I didn't mean to offend! I'm sure they both are, I only have experience with thesacredpath :-) He's helped me a ton
No offense taken.
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:
shelly7644
designsimply.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:
http://s1.wp.com/wp-content/themes/pub/nuntius/images/slider-controls.png
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.
http://s1.wp.com/wp-content/themes/pub/nuntius/images/slider-controls.png
.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.
Wow, all that energy I could have saved if I had just refreshed.
I did that earlier today. :)
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.
Oh, perhaps it's my brower, it's internet explorer
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...
You have some of the stuff set to white in your custom CSS. Modify the following two rules and change the #FFFFFF to darkgreen.
#sidebar-feature {
background: darkgreen;
}
.slideshow-items .entry-title {
background: darkgreen;
}Nice catch!
Yes, great catch! Now that I fixed that it looks great. Can I change the font color within the slider? It's a little hard to read so I'm thinking either white or black. Thanks!
In addition to my last question about changing the font color in the slider, is it possible to move the header text (I don't have it showing right now) down so it's below the header image? Right now it goes right through it if I have it display. I'm not sure it's clear right away whose website it is, you know? I'm thinking it might help if I add in the site title text... I know I'm taking a lot of your time but know that I really, REALLY appreciate it!
Yes, great catch! Now that I fixed that it looks great. Can I change the font color within the slider? It's a little hard to read so I'm thinking either white or black.
To adjust the text color on the right to white and the color of the active slide gray, try this:
#sidebar-feature, #sidebar-feature .wp-caption-text {
color: white;
}
.slideshow-controls .slideshow-pager a.activeSlide {
color: gray;
}Note that you should add new CSS to the bottom of your Appearance → Custom Design → CSS page.
Is it possible to move the header text (I don't have it showing right now) down so it's below the header image?
I can't see an easy way to move the text at the top of the slider in the Modularity Lite theme, for example where it says "Send a Holiday Wish to Your Senator", is that the text you mean?
Oh no, I meant the site title, not the text in the top of the slider. I'll go make it so you can see what I mean. The text is Coalition for a Safe & Healthy CT and I want it to display below the header image instead of through it.
Start with this and adjust the numbers as necessary:
#site-title {
margin: 158px 12px 0;
}Yay! That works perfectly! Now I feel like I'm being really annoying by asking more follow up questions but can I center that site title and change the font?
First look at the Appearance → Custom Design → Fonts page to change the site title font.
To center it, remove the last #site-title thing, and add this instead:
#site-title {
margin: 158px 0 0 0;
width: 980px;
text-align: center;
}Once again, you are amazing!! Are you allowed to give feedback and suggestions about how to make a site look better? If so, do you have any suggestions for me?
Is there a way to add a line of text into the footer, it doesn't seem like this template allows that.
Thanks a MILLION!!
Just a quick follow up -
the switch to dark green for the full slider WAS working, and now it's not. I don't think I changed any of the CSS. Help?
This topic has been closed to new replies.
