WordPress.org

1. bespokeordie
   Member
   Posted 2 years ago #

   Hello everyone!!! I am trying to incorporate a custom .css styled Facebook Fan Page Box at the bottom of my site: http://www.bespokeordie.com

   I seem to have worked out all of my formatting issues and was so happy to be done with it. Then, like a total idiot I check Safari compatability and guess what? It doesn't look right. My eyes and mind are fried and I could use a fresh look at the coding.

   Here is what I got:
   Theme Stylesheet
   

   #footer h5.widget_title {
   	font-size: 14px;
   	background: #757771;
   	color: #fff;
   	padding: 10px 15px;
   	margin: 0 0 10px 1px;
   	display: block;
   	float: none;
   }
   /* Footer (blockbottom) */
   #footer .blockbottom {
   	width: 940px;
   	float: left;
   	margin-left: 20px;
            display: inline;
   }
   #footer .blockbottom ul, #footer .blockbottom .textwidget , #footer .blockbottom #calendar_wrap{
   	border: #2A2A2A 5px solid;
   	background: #EDEDED;
   	padding-bottom: 0px;
   	clear: both;
   	margin:0 0 15px;
   }
   
   #footer .blockbottom .textwidget {
   	padding: 5px 10px;
   }

   Footer PHP
   

   div class="blockbottom">
                   <h5 class="widget_title">Facebook Page Fans</h2>
                   <ul>
                   <li>
                   <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
   <script type="text/javascript">FB.init("XXXXX");</script>
   <fb:fan profile_id="XXXXX" stream="0" connections="12" width="910" height="95" css="http://www.bespokeordie.com/omitted/fbfan.css"></fb:fan>
            </li>
            </ul>
            </div>

   Custom Facebook Stylesheet
   

   /* FB Fan Rev 2 */
   
   .fan_box
   .full_widget
   .connect_top {
   	border: none;
   	background-color: #EDEDED;
   	float:left;
            }
   .fan_box
   .full_widget {
   	border: none;
   	background-color:#EDEDED;
   }
   .connect_top a {
   	color: #636363;
   }
   .connect_top  {
   	background-color: #EDEDED !important;
   }
   .connect_top a:hover {
   	color: #D2344F;
   }
   .fan_box
   .connections {
   	background-color: #EDEDED;
   	border: none;
   	color: #636363;
   }
   .fan_box
   .connections_grid
   .grid_item
   .name {
   	color: #636363;
   }
   .fan_box
   .connections_grid
   .grid_item
   .name a:hover{
   	color: #D2344F;
   }
   .connect_button{
   color:#636363;
   background-color:#EDEDED;
   }
   .UIActionButton_Text, .UIActionButton_Wrap{
   background:#636363 none no-repeat scroll 0 0;
   
   }
   .UIActionButton_BlueText .UIActionButton_Text {
   color:#636363;
   }
   .name_block{
   background-color:#EDEDED;
   width:165px;
   margin:0;
   padding:0;
   }
   .name a:hover{
   	color: #D2344F;
   }
   a:hover{
   color:#D2344F;
   }

   Any thoughts or help of any kind would be greatly appreciated.

   Thank you!!

Topic Closed

This topic has been closed to new replies.