[Plugin: Simple Facebook Connect] css tuning

  • Resolved crlsgms

    (@crlsgms)


    12 years, 11 months ago

    Hello everyone! Im trying to customize the like box iv putted on my site 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

    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 (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)

    (@otto42)

    WordPress.org Admin

    12 years, 11 months ago

    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

    (@crlsgms)

    12 years, 11 months ago

    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

    (@crlsgms)

    12 years, 11 months ago

    here is some more information iv collected over 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

    (@crlsgms)

    12 years, 11 months ago

    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. Please use the pastebin]

    T3Kaos

    (@t3kaos)

    12 years, 9 months ago

    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

    Any help would be appreciated.

    Superbrarian

    (@superbrarian)

    12 years, 1 month ago

    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