CSS for WP-facebookConnect

The css that comes with WP-FacebookConnect is of really NO use, Chris Wallace already written a nice CSS override to the article so I am taking it from him for sharing purpose. The CSS file you need to modify is inside the plugin folder (fbconnect.css).

 

/* Facebook Connect Styles by Chris Wallace */
.facebook-connect{ /* I added this div wrapper myself, was not part of the plugin */
  position: relative;
  float: right;
  width: 300px;
  margin-top: -65px;
  text-align: right
}
.facebook-connect a,  /* you probably won't need this css */
.facebook-connect a:hover,
.facebook-connect a img,
.facebook-connect a:hover img{
  border: 0
}
.facebook-connect .fbc_connect_button_area { /* This is the button container for your comment form */
  border: 0;
  float:none;
  margin:0;
  padding:0
}
body .fbc_profile_header { /* I added body to override the CSS from Facebook Connect's default CSS */
  background:#000000;
  border:1px solid #3d3e3d;
  border-right: 0;
  padding:10px 5px 5px 10px;
  position:fixed; top: 45%; right:0;
  text-align:left;
  width:220px
}
body .fbc_profile_header a.logout{ /* this is a custom class I added to the HTML in fbconnect.php */
  font-size: .9em;
  color: #999
}
Did this help?
VN:F [1.3.2_665]
Rating: 4.0/5 (1 vote cast)

One Response to “CSS for WP-facebookConnect”

  1. Facebook Connect tutorial | Digital Explosion Says:
    July 9th, 2009 at 2:27 pm

    [...]  http://www.dedesigner.com/2008/07/css-for-wp-facebookconnect/ [...]

Leave a Reply

You must be logged in to post a comment.