| addamroy |
05-02-2012 12:21 PM |
I did it Lynne I did it! Here's the answer for anyone who might have the same question...
The original CSS that makes the buttons work is the newcontent_textcontrol class as we already know. It has the following:
Code:
.newcontent_textcontrol {
background: {vb:stylevar control_content_background};
_background-image: none;
-moz-border-radius: {vb:stylevar control_content_radius};
-webkit-border-radius: {vb:stylevar control_content_radius};
-moz-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
-webkit-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
font: {vb:stylevar control_content_font};
color: {vb:stylevar control_content_color};
padding: {vb:stylevar control_content_padding};
border: {vb:stylevar control_content_border};
display:block;
float: {vb:stylevar left};
clear: {vb:stylevar right};
}
Actual HTML for the button is,
Code:
<a class="newcontent_textcontrol" href="http://www.buttonurl.com">Button Text</a>
Notice the float and clear attributes, those are forcing the left alignment. If you remove the alignment however, the button container stretches the full length of whatever div it's inside.
So I solved the problem by creating a new class in additional CSS with all the attributes shown above EXCEPT I removed the bottom float and clear attributes, as well as changed the display: attribute to inline-block instead of block. My final result is the following:
Code:
.my_custom_button {
background: {vb:stylevar control_content_background};
_background-image: none;
-moz-border-radius: {vb:stylevar control_content_radius};
-webkit-border-radius: {vb:stylevar control_content_radius};
-moz-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
-webkit-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
font: {vb:stylevar control_content_font};
color: {vb:stylevar control_content_color};
padding: {vb:stylevar control_content_padding};
border: {vb:stylevar control_content_border};
display:inline-block;
}
The new HTML code for this button is,
Code:
<a class="my_custom_button" href="http://www.buttonurl.com">Button Text</a>
. The only difference is it's not a forced alignment and the button block will be the same size as the text always, so you can do whatever you want with it and put custom buttons anywhere in your forum.
Works like a charm! |
More Information