rlab
rlab

Reputation: 449

Changing transparency of Facebook share box

What CSS property should I change at this page to disable transparency of a share iframe which appears when Like button is clicked?

When you hover on that Facebook box after clicking Like button, it becomes partially transparent and if you move your cursor away from it, it becomes solid white. I want it to be completely opaque all the time.

Upvotes: 0

Views: 1016

Answers (2)

Steve Meisner
Steve Meisner

Reputation: 756

I was also having the exact same problem.

I am using an AddThis widget set, and I don't know if this was the case for you or not (it looks like you may have chosen a different solution as I can't see the Like button on your site).

I ended up using

.addthis_button_facebook_like {
     opacity:1 !important;
    }

but you would use whatever selector that wrapped your like button. if using the standard embed from Facebook, it would probably be

.fb-like {
     opacity:1 !important;
    }

Someone else was having a similar problem with a Send button, which got me on the right track.

See it working like it ought to here. I'm sure it had something to do with some conflict from other styles, or possibly AddThis, but it's working now!

Upvotes: 1

Nitzan Tomer
Nitzan Tomer

Reputation: 164177

Well, I see no transparency on that box, only for the fade-in effect when it opens, but once it's fully opened it's not transparent.

To answer your question, you can see for yourself using firebug (firefox) or the development tools (chrome/safari) which css rules apply to what element. From what I've seen now, you can use the use these: fb_edge_comment_widget fb_iframe_widget which are the classes of the span containing the iframe, or you can use the iframe itself.

The thing is though, is that you should not hack that. Why? Since then you'll have to always check for updates facebook are making, changes that they do not update you about (API changes they update on the blog), if you fail to be aware of these changes it can "break" your code/style.

Upvotes: 1

Related Questions