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 managed to change the colors of the Search and Follow Blog buttons, but I'd also like to change the color of the Follow @ button in the Twitter widget (right sidebar). I've tried a few codes, including twitter-follow-button, a#follow-button.btn, and span#l.label, but I'm obviously not putting things together properly because nothing's working :(
Any advice? I'd be very grateful!
Coraline theme...
The blog I need help with is frcic.com.
It should work to change the color with a#follow-button.btn, but you will have to change more than just the background-color property. The background-image property creates a gradient on top of the background-color. If you just want a solid color instead of a gradient, you can set the background-image to none.
Let me know if it's still unclear (or if that doesn't work for you!).
Thanks, expattranslator. I tried it using:
habannah
rachelmcr.a#follow-button.btn {
color: #fcf4d2;
background-color: #948471;
}But that didn't work. I added !important but that didn't work either. I'd like to get it working and see what it looks like before I play with background-image (thanks for telling me about that, I had no clue!).
Any suggestions as to how I can improve the code? Thanks so much for your help! I had given up on getting this...
I should mention that I've tried the code without the . at the beginning as well as with # at the beginning, and none of that worked :(
The background-image property is just for the button (not for the whole page or anything) and it shows up as a gradient over the background color, so you won't see a change in the button color until you change that property. Try using this:
a#follow-button.btn {<br />
color: #fcf4d2;<br />
background-color: #948471;<br />
background-image: none;<br />
}
The button also has a border, so you'll probably want to add a border-color property in the color that you prefer.
Sorry, that still didn't work. This is exactly what I put in:
a#follow-button.btn {
color: #fcf4d2;
background-color: #948471;
background-image: none;
border: #948471;
}I even tried with !important on the background-image, but no go :(
Can you suggest anything else? Thanks so much!
Did you take out the period before the a in a#follow-button.btn? (I see that you had a period at the beginning of the code you posted earlier.) That would cause the code not to work as intended.
Yes, I tried both ways with and without !important -- so far, no luck.
I just looked again at the code and noticed that the entire Follow @ button is enclosed in an iframe that is hosted on twitter's website. Sadly, as far as I know you can't override the style used in an iframe. :( Sorry for taking so long to notice that detail!
I used this to style my Facebook Likeboxes and this works:
.widget_facebook_likebox iframe {
border: 4px solid #948471;
background-color: #fcf4d2;
width: 180px;
}However, "a#follow-button.btn iframe" didn't work. Perhaps the code just needs to be written differently?
If it's really not possible, then oh well, it's not that big a deal. But it's too bad the Twitter button doesn't match the other buttons on the site.
Thanks so much for trying! Much appreciated :)
I think with the Facebook code you are actually styling the iframe itself, not its contents. The Facebook widget seems to have a transparent background, so if you give the iframe a background color it will show through.
In contrast, the Twitter widget has a background color, so that covers up any styling you do to the iframe itself. You can kind of see the effects by using this code:
.widget_twitter iframe {<br />
border: 4px solid #948471;<br />
}
That puts a border around the iframe, which shows up. But any changes to the background-color won't show up, because the background-color specified within the iframe covers it up.
Thanks for putting up with my meandering advice—I learned something new!
You and me both! Thanks for explaining this to me. It's a lot easier to accept it won't work when I understand why that is!
Cheers!
For the record, it's not possible to use CSS to change the appearance of elements which are inside iframes that are served from different domains, such as the Facebook widget and some of the sharing buttons offered by outside services like Facebook and Twitter.
@designsimply
it's not possible to use CSS to change the appearance of elements which are inside iframes that are served from different domains
bookmarked!
This topic has been closed to new replies.
designsimply
