Change Add to cart text color

  • Posts: 12
  • Thank you received: 0
11 years 11 months ago #78878

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:

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.

  • Posts: 26152
  • Thank you received: 4027
  • MODERATOR
11 years 11 months ago #78902

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

#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.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 12
  • Thank you received: 0
11 years 11 months ago #79042

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.

  • Posts: 26152
  • Thank you received: 4027
  • MODERATOR
11 years 11 months ago #79072

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.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

Time to create page: 0.053 seconds
Powered by Kunena Forum