Twitter widget follow button

  • Author
    Posts
  • #1114914

    habannah
    Member

    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.

    #1115155

    rachelmcr
    Staff

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

    #1115183

    habannah
    Member

    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…

    #1115184

    habannah
    Member

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

    #1115185

    rachelmcr
    Staff

    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.

    #1115188

    habannah
    Member

    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!

    #1115190

    rachelmcr
    Staff

    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.

    #1115191

    habannah
    Member

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

    #1115193

    rachelmcr
    Staff

    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!

    #1115195

    habannah
    Member

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

    #1115196

    rachelmcr
    Staff

    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!

    #1115208

    habannah
    Member

    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!

    #1115249

    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.

    #1115250

    timethief
    Member

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

The topic ‘Twitter widget follow button’ is closed to new replies.