MyBB Community Forums
[How To?] Integrate a Facebook Connect button into the Guest Welcome Block - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Community Archive (https://community.mybb.com/forum-106.html)
+--- Forum: Archived Forums (https://community.mybb.com/forum-143.html)
+---- Forum: Archived Development and Support (https://community.mybb.com/forum-155.html)
+----- Forum: MyBB 1.6 (https://community.mybb.com/forum-138.html)
+------ Forum: 1.6 General Support (https://community.mybb.com/forum-127.html)
+------ Thread: [How To?] Integrate a Facebook Connect button into the Guest Welcome Block (/thread-101182.html)

Pages: 1 2


Integrate a Facebook Connect button into the Guest Welcome Block - Camgaertner - 2011-08-09

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
[Image: fIO9G.png]

However, the best I've been able to do is to get it to look like this
[Image: r3YwI.png]


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.


RE: Integrate a Facebook Connect button into the Guest Welcome Block - blake - 2011-08-09

Try putting center tags around it?
<center>{$fbconnect}</center>



RE: Integrate a Facebook Connect button into the Guest Welcome Block - ranjani - 2011-08-09

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


RE: Integrate a Facebook Connect button into the Guest Welcome Block - Camgaertner - 2011-08-09

I added an IMG class and have gotten here:
[Image: KOKib.png]

I did change the image I'm using btw Toungue
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?


RE: Integrate a Facebook Connect button into the Guest Welcome Block - Jason L. - 2011-08-09

(2011-08-09, 07:25 AM)Camgaertner Wrote: I added an IMG class and have gotten here:
[Image: KOKib.png]

I did change the image I'm using btw Toungue
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?


RE: Integrate a Facebook Connect button into the Guest Welcome Block - Camgaertner - 2011-08-09

(2011-08-09, 09:22 AM)Jason L. Wrote: 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?




RE: Integrate a Facebook Connect button into the Guest Welcome Block - ranjani - 2011-08-10

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


RE: Integrate a Facebook Connect button into the Guest Welcome Block - pyridine - 2011-08-10

(2011-08-09, 04:31 AM)blake Wrote: Try putting center tags around it?
<center>{$fbconnect}</center>

Center tags are deprecated fyi.


RE: Integrate a Facebook Connect button into the Guest Welcome Block - Camgaertner - 2011-08-10

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


RE: Integrate a Facebook Connect button into the Guest Welcome Block - ranjani - 2011-08-10

^ 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 !