Grow your CSS skills. Land your dream job.

How to get Facebook Recommend box to be readable

  • # September 26, 2012 at 5:29 am

    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.

    # September 26, 2012 at 6:53 am

    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.

    # September 26, 2012 at 7:58 am

    Looks readable to me.

    # September 26, 2012 at 8:05 am

    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,

    # September 26, 2012 at 4:19 pm

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

    # September 26, 2012 at 4:19 pm

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

    # September 26, 2012 at 5:06 pm

    Find your CSS file.

    Find the line that starts with

    .transparent-widget

    and add

    background-color:white;

    # September 26, 2012 at 5:41 pm

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

    # September 26, 2012 at 5:44 pm

    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.

    # September 26, 2012 at 5:53 pm

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

    # September 26, 2012 at 6:00 pm

    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

    # September 26, 2012 at 6:25 pm

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

    # September 26, 2012 at 6:49 pm

    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
    }

    # September 26, 2012 at 6:52 pm

    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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".