Change 'Add to cart' and other buttons colors ?

  • Posts: 79
  • Thank you received: 0
10 years 1 month ago #207831

-- url of the page with the problem -- : www.tousenvol.com
-- HikaShop version -- : 2.5.5
-- Joomla version -- : 2.5.27

Hello

Where should i customize all buttons related to Hykashop : "Ajouter au panier", "Ajouter", "Valider "

I would like to change background color, size and inside font color.

Many thanks for your help,
Regards,

Attachments:

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

  • Posts: 84293
  • Thank you received: 13693
  • MODERATOR
10 years 1 month ago #207838

Hi,

This comes from the CSS of your template. You'll have to edit the www.tousenvol.com/templates/beez_20/css/personal.css CSS file of your template.

#main a:hover,
#main a:active,
#main a:focus
{
	background:#095197;
	color:#fff;
}
You can use the class hikashop_cart_button in your CSS in order to target only the HikaShop buttons.

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

  • Posts: 79
  • Thank you received: 0
10 years 1 month ago #210866

Hello

In my website : www.bapteme.air.tousenvol.com , i can't change font color into the cart buttom, i also would like to change background color and add a border color.

In /templates/jsn_glass_pro/css i have added the following at the end of custom.css file but it does not change button style :

a.hikashop_cart_button{
	color: #F22865;
}

Would you please tell me what is wrong or missing ?

Last edit: 10 years 1 month ago by lcoulon.

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

  • Posts: 84293
  • Thank you received: 13693
  • MODERATOR
10 years 1 month ago #210881

Hi,

Look at the CSS of the button with the inspector and you'll understand:
take.ms/9sNlA
As you can see there, the color CSS code you defined is not taken into account as the one in the CSS code below supersedes it:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button {
    text-decoration: none;
    color: #777777 !important;
    cursor: pointer;
    display: inline-block;
    line-height: 18px;
    margin: 5px;
    padding: 3px 8px;
    text-align: center;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 1px solid;
    border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
    border-radius: 3px;
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee));
    background: -webkit-linear-gradient(top, #ffffff, #eee);
    background: -moz-linear-gradient(top, #ffffff, #eee);
    background: -o-linear-gradient(top, #ffffff, #eee);
    background: linear-gradient(top, #ffffff, #eee);
}
So you want to add !important in your CSS in order to supersedes that other CSS:
a.hikashop_cart_button{
	color: #F22865 !important;
}

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

  • Posts: 79
  • Thank you received: 0
9 years 11 months ago #213734

Thank you, it works fine.

I also tried to change the background color, it worked but hoover color is no longer working :

a.hikashop_cart_button{
	color: #F22865 !important;
	background: #CCE2F9 !important;
}

Can you tell me what is should add to custom.css to choose background color and also hoover color of cart button ?

I'm also looking for replacing the text for cart button : 'ajouter au panier' and 'choisir les options'
can you tell me where i could replace these 2 text fields please ?

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

  • Posts: 84293
  • Thank you received: 13693
  • MODERATOR
9 years 11 months ago #213740

You already have it for the background color:
a.hikashop_cart_button{
color: #F22865 !important;
background: #CCE2F9 !important;
}

For the hover, it's:
a.hikashop_cart_button:hover{
color: #F22865 !important;
background: #CCE2F9 !important;
}

And to change any text in HikaShop, you can use translation overrides:
hikashop.com/download/languages.html#modify

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

Time to create page: 0.040 seconds
Powered by Kunena Forum