Change 'Add to cart' and other buttons colors ?

lcoulon
Topic Author
Offline

11 years 2 months ago #207831 by lcoulon

Change 'Add to cart' and other buttons colors ? was created by lcoulon

-- 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,

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

nicolas
Offline

11 years 2 months ago #207838 by nicolas

Replied by nicolas on topic Change 'Add to cart' and other buttons colors ?

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.

Code:

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

lcoulon
Topic Author
Offline

11 years 1 month ago - 11 years 1 month ago #210866 by lcoulon

Replied by lcoulon on topic Change 'Add to cart' and other buttons colors ?

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 :

Code:

a.hikashop_cart_button{
	color: #F22865;
}

Would you please tell me what is wrong or missing ?

Last edit: 11 years 1 month ago by lcoulon.

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

nicolas
Offline

11 years 1 month ago #210881 by nicolas

Replied by nicolas on topic Change 'Add to cart' and other buttons colors ?

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:

Code:

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:

Code:

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

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

lcoulon
Topic Author
Offline

11 years 3 weeks ago #213734 by lcoulon

Replied by lcoulon on topic Change 'Add to cart' and other buttons colors ?

Thank you, it works fine.

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

Code:

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.

nicolas
Offline

11 years 3 weeks ago #213740 by nicolas

Replied by nicolas on topic Change 'Add to cart' and other buttons colors ?

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.179 seconds