New to the community? Start here

Very small CSS fix for facebook connect widget – I'm stuck :(

Hey guys,

Right now I feel like a real asshole, I just can’t get this thing right. All I want to do is to adjust the alignment of the facebook connect to page widget (Can be seen in the homepage sidebar of motkina.se, login using julia / juliajulia

I think I not WHAT to do, but I can’t figure out HOW to do it.. I assume the CSS should look something like this:

.whatelement? {

border: none; (I also want to remove the blue border)

width: 250px;

margin-left: 5px;

margin-top: 10px;

margin-bottom: 10px;

}

But i can’t figure out where to put it, or what element I should use. I get the alignment right using “inspect element” with google chrome, but I still can’t get it right.

Where should I put the styling? the theme’s style.css, or in the plugin styling? How do I get rid of the border?

Thanks so much for the help, I don’t believe it’s something complicated.. I’m just too newbie I guess :slight_frown:

Sat, 3 Aug 2013 14:57:07
  • aristath
    • Recruit

    Try this as your CSS selector:

    .widget iframe

    Please keep in mind that you might have to enter !important at some of your rules for them to take effect, and I would advise you to use % instead of px.

    For example

    .widget iframe {
    
width: 100% !important;
    
}

    I hope that helps!

    Cheers,

    Ari.

  • Gustav
    • New Recruit

    Sorry, no go… Gonna sleep a bit on it and go back on it tomorrow. I’ve never been stuck like this with what I thought would be supersimple css tweaking! Wow.

    (using the !important). Feels like there’s something fishy about the caching as well, even though I’ve disabled my plugin.

    Anywhoo, thanks for the help so far.. I’ll probably if I find the solution / continue to get nowhere. =)

  • Gustav
    • New Recruit

    Hey Ari! Yeah, after some headache I finally switched back to good ol’ Firefox.. Now the CSS updates correctly after editing, and through your help i got it to look proper enough for the time being.

    Ended up using the following code (if someone else as noob as me would need it):

    .widget iframe{
    
width: 235px !important;
    
height: 427px !important;
    
margin-top: 15px !important;
    
margin-left: 15px !important;
    
margin-bottom: 15px !important;
    
margin-right: 15px !important;
    
}