css question for vbulletin forum - html

Question

I'm trying to move the "likes" gray bar right above the signature, to the left of the "like" link found on top right w/ tiny icon.
Example:
http://www.talkjesus.com/bible-study-hall/44722-antimonianism.html#post220422
The css code now
.vbseo_buttons .vbseo_liked {
background: rgba(46, 53, 57, .8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
display: block;
padding: 12px;
margin: 5px 30px;
<vb:if condition="$stylevar['textdirection'] == 'rtl'">
background-position: right;
</vb:if>
}
If I change display: block to display: inline, it'll move it to the same row, like this:
http://i49.tinypic.com/348lonc.png
However, it loses the margin property and width property. I tried fixing the width by adding width: 50%; but that changed nothing. How can I keep it inline while fixing margin and width?

Answer 1

Do you mean your want the gray bar at the far top right where it shows the quantity of likes the thread has with the heart? To keep the margin you should just float the gray box
Floated left
.vbseo_buttons .vbseo_liked {
background: rgba(46,53,57,.8);
color: #fff;
border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
clear: both;
padding: 12px;
margin: 5px 30px;
float: left;
}
To move this all the way to the top right you would need to modify the template and it would end up looking something like this but you need to move the entire after_content div or restyle it as needed if only moving the vbseo_liked container. And also remove the clear:both style.