[How To?] Integrate a Facebook Connect button into the Guest Welcome Block

[Camgaertner]

Hello all, I've run into some trouble while integrating Facebook connect onto my forum. I'd like only guests to see the Facebook connect button, and I want the button to look like this on my forum


However, the best I've been able to do is to get it to look like this



I guess what I'm asking is, is there a way to get it to look like the first picture? More specifically, I want it to be centered with the "Login" and "Register" links, and to not increase the size of the welcomeblock like it's doing. I'm using this plugin, and this is what my header_welcomeblock_guest looks like:

<script type="text/javascript">
<!--
	lang.username = "{$lang->login_username}";
	lang.password = "{$lang->login_password}";
	lang.login = "{$lang->login}";
	lang.lost_password = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a>";
	lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";
	lang.remember_me = "{$lang->remember_me}";
// -->
</script>
<span style="float: right;">{$lang->welcome_current_time}</span>
		<span id="quick_login">{$lang->welcome_guest} (<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;">{$lang->welcome_login}</a> &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>) </span>
{$fbconnect}

If the solution is too complicated, I'm sure I can live with it. I'm just a perfectionist.

---

Could still use some help on this one, thanks guys.

[blake]

Try putting center tags around it?

<center>{$fbconnect}</center>

[ranjani]

you can add a div for {$fbconnect} AND adjust it with style
OR if fbconnect is from global templates then you can check its content to align the images

[Camgaertner]

I added an IMG class and have gotten here:


I did change the image I'm using btw
Besides that, here's the CSS for the IMG class

.fbconnect {
        display:inline;
        width:157px;
        height:25px;
        position:relative;
        top:5px;
        left:0px;
	padding-left:0px;
}

Still need to know.. How can I make the welcome block NOT increase in height when I add the Facebook login image?

[Jason L.]

I added an IMG class and have gotten here:


I did change the image I'm using btw
Besides that, here's the CSS for the IMG class

.fbconnect {
        display:inline;
        width:157px;
        height:25px;
        position:relative;
        top:5px;
        left:0px;
	padding-left:0px;
}

Still need to know.. How can I make the welcome block NOT increase in height when I add the Facebook login image?

Add a fixed height?

[Camgaertner]

Add a fixed height?

Added a fixed height to #panel in the CSS, now the code is

#panel {
	background: #FFFF99;
	color: #000000;
	font-size: 11px;
	padding: 9px;
        height:36px;
	-webkit-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	-khtml-border-radius: 6px 6px 0 0;
	-o-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	border-bottom: 3px solid #FFC633;

And it still is being pushed to make room for the button :/ http://schoolhelpforums.net

Is there something I need to change in the CSS?

[ranjani]

for fbconnect, you can add vertical-align : middle;

[pyridine]

Try putting center tags around it?

<center>{$fbconnect}</center>

Center tags are deprecated fyi.

[Camgaertner]

Still trying to figure out how to keep the panel height the same with the picture inside it. Thanks everyone for the help.

[ranjani]

^ remove the height attributes which you might have added from previous suggestions AND hard refresh ...
after you get the fbconnect image aligned, work with the panel height if required !