[Darkness95]

Originally Posted by 409industries

As much as it pains me to admit... I struggled to figure out how to get this button to appear "in line" with the other links.

Here is where I inserted my facebook like code (in the facebook_header template):

<li id="fb_headerbox" class="hidden">
<div class="fb-like" data-href="http://facebook.com/myfacebookpage" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="verdana" data-colorscheme="dark">
</div>
<vb:if condition="$show['facebookuser']">
	<a id="fb_link" href="{vb:raw profileurl}">
		<img id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
		<img id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
	</a>
<vb:else />
	<a id="fb_loginbtn" href="#"><img src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</vb:if>
</li>

and this is the result (see attached image)

How do i get the "Like" button to appear to the left of the facebook connect icon, and have them all lined up in a wonderfully horizontal flow?

p.s. I appreciate your confidence in my ability to work with vB... LOL :up:

You can use two different tricks:

1) float-left / float-right CSS property
2) display: inline-block CSS property

I recommend you to use the float-left CSS property because this facebook "like" button code is too messy and it should be too difficult use inline-block!

Try this:

PHP Code:

<vb:if condition="$show['facebookuser']">
    <a id="fb_link" href="{vb:raw profileurl}">
        <img style="float: left; margin-left: 5px;" id="fb_squarepic" width="16" height="16" alt="{vb:rawphrase facebook_connect}" src="{vb:raw squarepicurl}" />
        <img style="float: left; margin-left: 5px;" id="fb_icon" width="14" height="14" alt="{vb:rawphrase facebook_connect}" src="{vb:stylevar imgdir_misc}/facebook.gif" />
    </a>
<vb:else />
    <a id="fb_loginbtn" href="#"><img style="float: left; margin-left: 5px;" src="{vb:stylevar imgdir_misc}/facebook_login.gif" alt="{vb:rawphrase facebook_connect}" /></a>
</vb:if>
</li> 


I'm not sure that the code will works perfectly because i can't see the properties of #fb_squarepic and #fb_icon and i can't see the result on your forum, but i think it will works!

You're welcome