Vb Template is confusing, color change help

[katie hunter]

Hi, it is really confusing when editing vb 4.x template

If i have this code

background: {vb:stylevar postbit_userinfo_background.backgroundColor} url(vbseo/resources/images/forum/vbseo_like.png) 5px center no-repeat;

But i want the background color to be white not gray ex see by the heart and the like, the background color is transparent so it is gray http://forum.nihonomaru.com/site-ann...ts-new.343485/

But i want the color to be white, how can i change this code to make it white? I did this but it removed the heard pic.

background: #fffff; url(vbseo/resources/images/forum/vbseo_like.png) 5px center no-repeat;

So it is not right i think to write it this way, how can i write it so it is using a white color?

Fixed (: no semicolon

[Lynne]

I would not suggest editing any of the default vbulletin css templates *except* adding your own CSS to the additional.css template. That template is loaded last and therefore if you put the same CSS (only different color) in there, it will override the other CSS.

[katie hunter]

Originally Posted by Lynne

I would not suggest editing any of the default vbulletin css templates *except* adding your own CSS to the additional.css template. That template is loaded last and therefore if you put the same CSS (only different color) in there, it will override the other CSS.

Hi Lynne, so what can i do to fix it? What should i add in the additional css?

I tried to add this to the additional css but it caused the little black heart to dissapear or i guess it is under the white color

.vbseo_buttons .vbseo_liked {
    background: #f2f6f8     
}

This is the template i did edit before vbseo_buttons.css and i simply changed the background color, is that wrong?

.vbseo_buttons .vbseo_liked {
	border-color:#D5D5D5 #B3B3B3 #999999;
	border-style:solid;
	border-width:1px; 
	background: {vb:stylevar postbit_userinfo_background.backgroundColor} url(vbseo/resources/images/forum/vbseo_like.png) 5px center no-repeat;
	-moz-border-radius: {vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius}; 
	clear: both;
	display: block;
	padding: {vb:math {vb:stylevar padding}-3} {vb:math {vb:stylevar padding}-3} {vb:math {vb:stylevar padding}-3} ;
	padding-{vb:stylevar left}: {vb:math {vb:stylevar padding}*2.5};
	margin: {vb:stylevar padding};
	<vb:if condition="$stylevar['textdirection'] == 'rtl'">
		background-position: right;
	</vb:if>
}

[tbworld]

Originally Posted by katie hunter

I tried to add this to the additional css but it caused the little black heart to dissapear or i guess it is under the white color

.vbseo_buttons .vbseo_liked {
    background: #f2f6f8     
}

I believe you used the wrong CSS property, try this:

.vbseo_buttons .vbseo_liked {
    background-color: #f2f6f8;     
}

--------------- Added 11 Oct 2013 at 18:17 ---------------

Originally Posted by katie hunter

This is the template i did edit before vbseo_buttons.css and i simply changed the background color, is that wrong?

Not wrong, just not preferred for such a simple CSS change.

[katie hunter]

Works like a charm :0) thanks!