How to get Facebook Recommend box to be readable

[ricksmith]

Any idea how to get my facebook recommend box on the right hand side / side bar of our [site](http://noahsdad.com/ “noah’s dad”) readable. No matter what option I choose the black background I”m using still comes through.

[Paulie_D]

Readable how?

If you inspect the element with Chrome or use Firebug in FF, there are enough classes in there to use to hook on to.

[Senff]

Looks readable to me.

[Paulie_D]

It has a class of ‘transparent-widget’ so my guess is that this is something selected in the plug-in. There is a file called ‘recommendations.php’ which holds a lot of all this CSS.

How it is generated is another matter,

[ricksmith]

@Senff – The blue on black isn’t easy to read though.

[ricksmith]

@Paulie_D any ideas on how to maybe make it look the same as the Facebook like box above it? (The white background?)

[Paulie_D]

Find your CSS file.

Find the line that starts with

.transparent-widget

and add

background-color:white;

[ricksmith]

@paulie_d thanks for your help. I’m using a child theme. So how would I go about doing this in a child theme?

Thanks again!

[Paulie_D]

Sorry…I can’t help you with WP.

If you didn’t create the child theme I would suggest that you speak to the person who did it for you to help.

[ricksmith]

@paulie_d no worries. Basically the child theme over rides the main style sheet. So I’d just need the whole line of css instead of replacing something.

What those two lines of code you pasted above do it?

[Paulie_D]

If you can find the line…change the part that says

body.transparent_widget{background-color:transparent;overflow:hidden}

to

body.transparent_widget{background-color:white;overflow:hidden}

It appears to be on line 82 of recommendations.php

[ricksmith]

@paulie_D

that’s what I’m saying…there is no line to change. It’s a some what blank style sheet. I add css there by using selectors and it over rides the main style sheet. So I need something that starts with a # or a .

[Paulie_D]

If you have a blank style sheet you put in the second line I gave you.

Actual elements of a page such as body, div etc can be referenced just as they are. They don’t need to start with # or .

body.transparent_widget{
background-color:white;
overflow:hidden
}

[Paulie_D]

If that doesn’t work you will have to find how to change the type of plug in you are using or how to change the settings of the one you have.

[Author]

Posts