WordPress.com Forums » Topic: Twitter widget follow button

timethief on "Twitter widget follow button"

timethief — Wed, 09 Jan 2013 20:20:02 +0000

@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!

designsimply on "Twitter widget follow button"

designsimply — Wed, 09 Jan 2013 20:19:04 +0000

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.

habannah on "Twitter widget follow button"

habannah — Sun, 06 Jan 2013 16:39:29 +0000

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!

rachelmcr on "Twitter widget follow button"

rachelmcr — Sat, 05 Jan 2013 23:18:49 +0000

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 { border: 4px solid #948471; }

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!

habannah on "Twitter widget follow button"

habannah — Sat, 05 Jan 2013 23:00:02 +0000

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 :)

rachelmcr on "Twitter widget follow button"

rachelmcr — Sat, 05 Jan 2013 22:15:25 +0000

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!

habannah on "Twitter widget follow button"

habannah — Sat, 05 Jan 2013 21:55:04 +0000

Yes, I tried both ways with and without !important -- so far, no luck.

rachelmcr on "Twitter widget follow button"

rachelmcr — Sat, 05 Jan 2013 21:47:33 +0000

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.

habannah on "Twitter widget follow button"

habannah — Sat, 05 Jan 2013 21:27:38 +0000

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!

rachelmcr on "Twitter widget follow button"

rachelmcr — Sat, 05 Jan 2013 20:22:08 +0000

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 { color: #fcf4d2; background-color: #948471; background-image: none; }

The button also has a border, so you'll probably want to add a border-color property in the color that you prefer.

habannah on "Twitter widget follow button"

habannah — Sat, 05 Jan 2013 18:41:13 +0000

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 :(

habannah on "Twitter widget follow button"

habannah — Sat, 05 Jan 2013 18:40:20 +0000

Thanks, expattranslator. I tried it using:

.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...

rachelmcr on "Twitter widget follow button"

rachelmcr — Sat, 05 Jan 2013 09:53:04 +0000

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!).

habannah on "Twitter widget follow button"

habannah — Fri, 04 Jan 2013 22:19:26 +0000

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...