cvalk
04-18-2012, 07:30 PM
I don't like the default location where VBulletin puts the Facebook Like button on individual threads. It unnecessarily takes up an entire horizontal row under the thread title, when it could be fit into the left side of the thread tools bar. The problem is, when I move it to the thread_controls div (in showthread.css), the position is incorrect. I would like to situate it on the far left side of the div.
Here's a picture of where the button is currently positioned, and where I would like it to be:
http://i799.photobucket.com/albums/yy271/cvalk/likebutton.jpg
Here's the beginning code for the thread_controls div, with the relevant button code in red:
<div id="thread_controls" class="thread_controls toolsmenu">
<div>
<vb:if condition="$show['fb_likebutton']">
{vb:raw fblikebutton}
</vb:if>
<ul id="postlist_popups" class="postlist_popups popupgroup">
<vb:if condition="$show['firstunreadlink'] AND $thread['replycount']">
<li class="popupmenu"><h6><a class="firstunread" href="{vb:raw firstunread}">{vb:rawphrase view_first_unread} </a></h6></li>
</vb:if>
{vb:raw template......
</div>
How do I set an absolute position for this button? I'm new to CSS and have experimented with wrapping the button in a custom DIV, using positioning attributes like margin and padding, etc. to no avail. If I move the button code to before the second <div> tag, it positions the button in the top left corner, but it puts it on a separate horizontal row and moves all the text for the drop down menus to the row below. Any guidance would be greatly appreciated.
--------------- Added 1334846016 at 1334846016 ---------------
I got it to work by removing a div. I removed the div in red. Is this okay to do?
<div id="thread_controls" class="thread_controls toolsmenu">
<vb:if condition="$show['fb_likebutton']">
{vb:raw fblikebutton}
</vb:if>
<div>
<ul id="postlist_popups" class="postlist_popups popupgroup">
<vb:if condition="$show['firstunreadlink'] AND $thread['replycount']">
<li class="popupmenu"><h6><a class="firstunread" href="{vb:raw firstunread}">{vb:rawphrase view_first_unread} </a></h6></li>
</vb:if>
{vb:raw template_hook.threadtoolbar}
<li class="popupmenu" id="threadtools">
<h6><a class="popupctrl" href="javascript://">{vb:rawphrase thread_tools}</a></h6>
<ul class="popupbody popuphover">
<li><a href="{vb:raw $vboptions.vbforum_
Result:
http://i799.photobucket.com/albums/yy271/cvalk/untitled.jpg
Could anyone give me some tips on how to now get the button centered vertically and a small left margin? If I use padding or margins it affects the other elements in the div.
Here's a picture of where the button is currently positioned, and where I would like it to be:
http://i799.photobucket.com/albums/yy271/cvalk/likebutton.jpg
Here's the beginning code for the thread_controls div, with the relevant button code in red:
<div id="thread_controls" class="thread_controls toolsmenu">
<div>
<vb:if condition="$show['fb_likebutton']">
{vb:raw fblikebutton}
</vb:if>
<ul id="postlist_popups" class="postlist_popups popupgroup">
<vb:if condition="$show['firstunreadlink'] AND $thread['replycount']">
<li class="popupmenu"><h6><a class="firstunread" href="{vb:raw firstunread}">{vb:rawphrase view_first_unread} </a></h6></li>
</vb:if>
{vb:raw template......
</div>
How do I set an absolute position for this button? I'm new to CSS and have experimented with wrapping the button in a custom DIV, using positioning attributes like margin and padding, etc. to no avail. If I move the button code to before the second <div> tag, it positions the button in the top left corner, but it puts it on a separate horizontal row and moves all the text for the drop down menus to the row below. Any guidance would be greatly appreciated.
--------------- Added 1334846016 at 1334846016 ---------------
I got it to work by removing a div. I removed the div in red. Is this okay to do?
<div id="thread_controls" class="thread_controls toolsmenu">
<vb:if condition="$show['fb_likebutton']">
{vb:raw fblikebutton}
</vb:if>
<div>
<ul id="postlist_popups" class="postlist_popups popupgroup">
<vb:if condition="$show['firstunreadlink'] AND $thread['replycount']">
<li class="popupmenu"><h6><a class="firstunread" href="{vb:raw firstunread}">{vb:rawphrase view_first_unread} </a></h6></li>
</vb:if>
{vb:raw template_hook.threadtoolbar}
<li class="popupmenu" id="threadtools">
<h6><a class="popupctrl" href="javascript://">{vb:rawphrase thread_tools}</a></h6>
<ul class="popupbody popuphover">
<li><a href="{vb:raw $vboptions.vbforum_
Result:
http://i799.photobucket.com/albums/yy271/cvalk/untitled.jpg
Could anyone give me some tips on how to now get the button centered vertically and a small left margin? If I use padding or margins it affects the other elements in the div.