Title: [Plugin: Simple Facebook Connect] css tuning
Last modified: August 20, 2016

---

# [Plugin: Simple Facebook Connect] css tuning

 *  Resolved [crlsgms](https://wordpress.org/support/users/crlsgms/)
 * (@crlsgms)
 * [15 years ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/)
 * Hello everyone! Im trying to customize the like box iv putted on my site [guerrilhagig.com](http://blog.guerrilhagig.com/),
   using the marvelous otto SFC modular plugin for this. Iv setted up my application
   and everything is fine, but i couldnt figure how to use the specific classes 
   css for this plugin inside the “add custom css here” box, and before i go over
   editing my theme style.css, im wondering on how to really use the css plugin 
   box.
 * So iv come to this guide, which have all the css avaiable for this facepile plugin:
   [miklasnjor css guide](http://miklasnjor.com/en/2011/css-style-facebook-fanbox-fanpage-facepile-pagestream/)
 * and assumed that the plugin would start to read the class after the .fan_box .
   full_widget, so iv made a css info like [this](http://pastebin.com/7h7Xg3r0) (
   tuning with firebug) but not all info gets altered, only the background color
   and the main title font color.
 * I would be very happy if i could manage to solve this, and for otto i lay out
   the suggestion to put this info on the plugin readme, since css box is there,
   and Im pretty sure eveyone wants the box to fit beautifuly on theyr wp sites.
 * cheers

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/)
 * (@otto42)
 * WordPress.org Admin
 * [15 years ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098277)
 * The Fan Box is in an iframe from Facebook. So editing the style.css of your site
   won’t have any effect on the styling of the Fan Box. This is why I added that
   CSS box there. Only CSS put into the CSS box field will affect the Fan Box display.
 * Easiest way to do it is to right click it and open that iframe in a new window,
   then use your preferred CSS editor to add the rules you want. Once you’ve styled
   it to your preferences, copy and paste your rules into the CSS box on the settings
   page.
 *  Thread Starter [crlsgms](https://wordpress.org/support/users/crlsgms/)
 * (@crlsgms)
 * [15 years ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098280)
 * Well, on a saparated box iv oppened the frame earlyer, and the css iv pasted 
   here Iv made up this way.
 * still trying to use both example codes
 *     ```
       .app_content_121831614562807 .a:hover {color: #6BF25C;}
       .app_content_121831614562807 .a:visited {color: #FDBB57;}
       .app_content_121831614562807 .a:active { color: #FDBB57;}
       .app_content_121831614562807 .connect_top { background: none repeat scroll 0 0 #212121;border: medium none #FFFFFF;}
       ```
   
 * or
 *     ```
       .a:hover {color: #6BF25C;}
       .a:visited {color: #FDBB57;}
       .a:active { color: #FDBB57;}
       .connect_top { background: none repeat scroll 0 0 #212121;border: medium none #FFFFFF;}
       ```
   
 * but still no go.
 *  Thread Starter [crlsgms](https://wordpress.org/support/users/crlsgms/)
 * (@crlsgms)
 * [15 years ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098418)
 * here is some more information iv [collected over](http://pastebin.com/Gqgg9BHH)
   this work, but yet still i cant customize my box.
 * from line 19 to 33 is the code im trying to use on the SFC configuration interface
   css box.
 *  Thread Starter [crlsgms](https://wordpress.org/support/users/crlsgms/)
 * (@crlsgms)
 * [15 years ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098562)
 * Iv managed to change all the css I needed, not quite equal to the reference documment
   Iv found. Here is the css iv used, for someone who needs the code to put on the
   plugin box and tune as he likes.
 * _[CSS moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome).
   Please use the [pastebin](http://wordpress.pastebin.com/)]_
 *  [T3Kaos](https://wordpress.org/support/users/t3kaos/)
 * (@t3kaos)
 * [14 years, 11 months ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098690)
 * Hi
 * I’m having the same problem also. I can’t get the damned CSS to work properly.
   Does anyone know how to make the whole thing black as if it were using the ‘Dark’
   Color Theme?
 * [Suggested Custom CSS](http://pastebin.com/uUKQD0Cn)
 * Any help would be appreciated.
 *  [Superbrarian](https://wordpress.org/support/users/superbrarian/)
 * (@superbrarian)
 * [14 years, 3 months ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098748)
 * I followed Otto’s suggestion to open the iframe in another window and to make
   changes using firefox developer’s edit css. I was able to make the following 
   changes:
    `body {width:260px; border: 1px #d1d1d1 solid}` in the editor, but 
   when I copy/pasted that code in the SFC custom CSS field on the settings page,
   nothing happened.
 * So my question is: what is the formatting for the custom CSS? Do we just put:
 * `body{width: 260px; border:1px d1d1d1 solid;}`
    or
 *     ```
       <style type="text/css">
       body{width: 260px; border:1px d1d1d1 solid;}
       </style>
       ```
   
 * or is it supposed to be something else?
    thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: Simple Facebook Connect] css tuning’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [sfc](https://wordpress.org/support/topic-tag/sfc/)

 * 6 replies
 * 4 participants
 * Last reply from: [Superbrarian](https://wordpress.org/support/users/superbrarian/)
 * Last activity: [14 years, 3 months ago](https://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning/#post-2098748)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
