Change Add to cart text color

cristianciocoi
Topic Author
Offline

13 years 11 months ago #78878 by cristianciocoi

Change Add to cart text color was created by cristianciocoi

Hi, I'm trying to change the color for the add to car text on the add to cart button using CSS button I wrote this code:

Code:

a.hikashop_cart_button, a.hikashop_compare_button{
	background-image:url(../images/button_up.jpg);
        margin-left:0px;	
        color:#FFFFFF;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:12px;
        font-weight:bold;
	padding:5px 30px 5px 8px;
text-align:left;
        text-decoration:none;
        font-weight:bold
	cursor:pointer;
	float:left;
	white-space:nowrap;
	       	weight:128px;
	higt:25px;
}

a.hikashop_cart_button:hover, a.hikashop_compare_button:hover{
	background-image:url(../images/button_down.jpg);
	margin-left:0px;	
        color:#FFFFFF;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:12px;
        font-weight:bold;
	padding:5px 30px 5px 8px;
text-align:left;
	text-decoration:none;
        font-weight:bold
	cursor:pointer;
	float:left;
	white-space:nowrap;
	weight:128px;
	higt:25px;
}

the hover changes to white and bold while the normal does not change.

The site is gifter.ro

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

13 years 11 months ago #78902 by Jerome

Replied by Jerome on topic Change Add to cart text color

Hi,

You can use a CSS inspector like explain in our FAQ
www.hikashop.com/en/support/documentation/faq.html#css

It would help you about CSS styling.

For example, thanks to the Firefox inspector (Ctrl+Maj+I), I am able to see which CSS file set which rule on a element.
So, I saw that there is a rule in the file skin5.css which override the color of the "add to cart" button

Code:

#bt_popup .bt_login_form #bt_login_title, div.productdetails-view div.product-price div.pricesalesprice, .moduletable h3 span.first-word, a:link, a:active, a:visited, #bt_error_message #bt_error_notice_text {
    color: rgb(255, 153, 0);
}

So, you have to use the "!important" keyword in order to set a higher priority level for the "color" rule for "a.hikashop_cart_button".

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Please Log in or Create an account to join the conversation.

cristianciocoi
Topic Author
Offline

13 years 11 months ago #79042 by cristianciocoi

Replied by cristianciocoi on topic Change Add to cart text color

I did that and works perfect on product listing, but now on the product page the button il larger, and on the add to cart pop-up i get buttons messed up.
How can I fix them now?

Thank you for your help!

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

13 years 11 months ago #79072 by Jerome

Replied by Jerome on topic Change Add to cart text color

Hi,

Once again, it is a CSS missing rule for your specific template.
I don't know if you see it but, in the product page, your image is repeating. So you have to add a rule to no repeat the background image.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Please Log in or Create an account to join the conversation.

Time to create page: 0.077 seconds