Fondo blanco en CSS Like Box

The current dark/light styles for the FB Like Box dont work on a transparent/semi transparent page layout. The like box ends up inheriting the attributes of the page, becoming transparent.

I tried to reset the facebook like box css by creating a fb.css file with the necessary corrections, and adding css="fb.css" into the code as indicated has worked on this forum. However it does not seem to work.

Is there a way to get the FB Like Box to have a simple white background when used on a transparent page? I was able to accomplish this in firebug by editing the attribute .connect_widget { background-color: #FFFFFF; }

El sitio web en cuestión es http://www.laudanumonline.com, like box is in the lower right corner.

Gracias por cualquier ayuda.

preguntado el 08 de noviembre de 11 a las 18:11

6 Respuestas

Puedes intentar usar !important to override the styles set by Facebook:

.connect_widget {background-color: #fff !important;}

respondido 08 nov., 11:22

I tried this. I apologize for not posting it in my initial question. It didnt seem to have any effect. Thank you though. - Edward Stanaway

You can do this via Firebug because it adds the style as an inline style.

One way to do this is to add the style as an inline-style with some jQuery. Something like

$('.connect_widget').css({'background-color':'#fff');

You would probably need to set this to an event, though, unless the box is visible on page load.

respondido 08 nov., 11:22

The box is visible on page load. Where in the code would I put something like this? Im not horribly familiar with how jQuery works. Is this something I'd have in the page.tpl.php file? - Edward Stanaway

You may not style the ".connect_widget" div, but you can style the iframe it's in, or even the div that the iframe is in. In my case, my like box is located in a div "#fb-platform" so I can easily do this:

#fb-platform iframe {background-color: #fff; }

or

#fb-platform .fb-like-box {background-color: #fff; }

Any of these options works fine.

The like box is still transparent, but the parent iframe/div isn't, therefore - white background.

Respondido el 06 de enero de 12 a las 14:01

And that's why they made it transparent. ;) - Tango bravo

Why not just put that connect widget in a single cell table and make the table background white? That's what I did on www.earthakitt.com (inner pages, not the homepage) in the column on the right.

contestado el 10 de mayo de 12 a las 07:05

The easiest way is to add style="background:#fff;" to element

Respondido 13 ago 13, 18:08

I use this and it works. :) Put the code at the end of your css file.

span>iframe{background:#ffffff !important;}

Respondido el 09 de enero de 14 a las 15:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.