cssggfb

/*
Infos de css para aplicações do facebook no
wordpress do guerrilha
editado e criado em 25/05/2011
por carlos@guerrilhagig.com
*/

image online with how i want the box to look
http://imageshack.us/photo/my-images/156/fbgg.jpg/

above is the code iv copyed from firebug

this is the post for confirmation on where to get the classes, and where to put the code:
http://wordpress.org/support/topic/plugin-simple-facebook-connect-css-tuning?replies=3

.fan_box .full_widget

/* AQUI COMEÇA O QUE VAI PRO AR*/
.border: none;
.a:link {color: #FDBB57;}
.a:hover {color: #6BF25C;}
.a:visited {color: #FDBB57;}
.a:active {color: #FDBB57;}
.connect_top {background: #212121; border: none;}
.connect_top .name_block {color: #FDBB57;}
.connect_top .name_block a:link {color: #FDBB57;}
.connect_top .name_block span.name a:link {color: #FDBB57;}
.connect_top .name_block:link {color: #FDBB57;}
.connect_top .name_block span.name:link {color: #FDBB57;}

.connections {background-color: #212121;}
.body {font:11px verdana; color: #FDBB57;}
.connections .connections_grid .grid_item a {color:#6BF25C;}

/* FINAL DO SCRIPT Q VAI PRO WIDGET */

.fan_box .full_widget {border: 1px solid #F50;}
 .fan_box .full_widget a:link {color: #F50;}
 .fan_box .full_widget a:hover {color: #000;}
 .fan_box .full_widget a:visited {color: #F50;}
 .fan_box .full_widget a:active {color: #F50;}

.connect_top {background: #212121; border-bottom: 0px solid #6BF25C;}
verde - #6BF25C
laranja - #FDBB57


2  – Connect header
 .fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A  – Connect header facebook image
 .fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
 .fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE:  I didn’t like the way how the blue edge around the facebook looked, so I downloaded it and gave it a new colour. The link might change but I got the image from here.


3  – Connect top
 .fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A  – Connect top image
 .fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B  – Connect top – Name (Miklas Njor Fotografi)
 .fan_box .full_widget .connect_top .name_block {color: #F50;}
 .fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
 .fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
 .fan_box .full_widget .connect_top .name_block:link {color: #F50;}
 .fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C  – Connect top The Like Button
 .fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
 .fan_box .full_widget .connect_widget_like_button span {color: #f50;}
 .fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
 .fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
 .fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
 .fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE:  Same as above I downloaded the image and changed it. I got it from here


4  – Pagestream – all stories
 .fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
 .fan_box .full_widget .page_stream a:link {color: #F50;}
 .fan_box .full_widget .page_stream a:hover {color: #000;}
 .fan_box .full_widget .page_stream a:visited {color: #F50;}
 .fan_box .full_widget .page_stream a:active {color: #F50;}

4A  – Pagestream – single story
 .fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B  – User link – Miklas Njor Fotografi
 .fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
 .fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
 .fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
 .fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
 .fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
 .fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
 .fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C  – ‘Det er bare så fedt at han svæver’
 .fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
 .fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
 .fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022?; }
 .fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022?;}

NOTE:  I am using the pseudo css styles :before and :after to insert the character “ before and after the text. You can use any character from this list of HTML entities. You can also use images. The pseudo classes don’t work in IE6 and IE7.

4D  – Post Images
 .fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E  – Post title – Kim Rahbek Svæver – Direktør Sticks n Sushi
 .fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
 .fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
 .fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
 .fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
 .fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F  – Websitelink – miklasnjor.com
 .fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G  – Bodycopy – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…
 .fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H  – Pagestream – borderbottom
 .fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }



5  – Facepile
 .fan_box .full_widget .connections {background-color: #f0f0f0;}

5A  – Facepile text – x people like Miklas Njor Fotografi
 .fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B  – Facepile – Facesgrid
 .fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
 .fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}