CSS on cart buttons

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
1 week 1 day ago #309904

-- HikaShop version -- : 4.2.1
-- Joomla version -- : 3.9.11
-- PHP version -- : 7
-- Browser(s) name and version -- : ff

Hi,
i would like to change the style of the card buttons Claas: hikashop_cart_button.
So i added the following to my templates custom.css

.hikashop_cart_button{
  background-color:#1c3051;
  color:#fff !important;
  height:32px;
  border-radius:5px;
  padding:5px 15px;
  border:solid 1px #999;
  box-shadow:2px 2px 2px #333;   
  transition:all 0.2s ease-in-out 0s; 
}
.hikashop_cart_button:hover{
    background-color:#ff6600;
}

But it does not work.
What did i do wrong ?

regards Jan

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

  • Posts: 66619
  • Thank you received: 9806
  • MODERATOR
1 week 11 hours ago #309939

Hi,

Hard to say without looking at the page in order to analyse the CSS on the add to cart buttons as there are many things which could change the way the CSS is used on the buttons.
Could you provide a URL so that we could look into it ?

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
1 week 9 hours ago #309944

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
4 days 13 hours ago #309992

Any idea yet ?

regards Jan

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

  • Posts: 12090
  • Thank you received: 1666
  • MODERATOR
4 days 9 hours ago #309983

Hello Jan,

If you want your CSS code to be totally applied, you should have longer css identifiers like :

.hikashop_container .hikashop_cart_button{
  background-color:#1c3051;
  color:#fff !important;
  height:32px;
  border-radius:5px;
  padding:5px 15px;
  border:solid 1px #999;
  box-shadow:2px 2px 2px #333;   
  transition:all 0.2s ease-in-out 0s; 
}
.hikashop_container .hikashop_cart_button:hover{
    background-color:#ff6600;
}

Kind regards,
Mohamed Thelji.

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
4 days 8 hours ago #310016

Hi
i tried your solution, but it did not work. Now the bottons are almost white.
I did not temove the changes so you can see for your self.

Button should be Dark Blue with white letters en Hover in orange backgound

regards Jan

p.s. i changed the font-color to black,so my customers can read the buttons

Last edit: 3 days 19 hours ago by Polleke.

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

  • Posts: 23612
  • Thank you received: 3666
  • MODERATOR
3 days 15 hours ago #310021

Hello,

I'm sorry but Mohamed fixed your CSS so it can be applied and visible in your website.
He did not change the content, which include the colors, height, borders, etc.
Now that you have a correct "CSS selector", you are able to perform every modification you want into to change the colors and the rest to fill your requirements.
But, as you understand, we are not aware of how you want to customize your website and our support is not a customization support.

If you want to know more about CSS and customization, I invite you to read more in our documentation and the various links it includes :
www.hikashop.com/support/documentation/1...the-display.html#css

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: 83
  • Thank you received: 2
  • Hikashop Business
2 days 18 hours ago #310070

Hi Jerome,
I tried the documentation.
( i am not a programmer !!!!)
So i used this piece of documentatation

To change the color and the size of the price you can use a property like:
.hikashop_product_price{ color: #99cc00;font-size: 14px;}
If you need to edit the class in, for example, only one module, you can prepend the id of the module to the CSS code.
When using the CSS code:
#module_25 .hikashop_product_price{ color: #99cc00;font-size: 14px;}
the color and the size of the price will be changed only in the module with the id “module_25”.
Remember that “#” is used for the IDs and “.” for the classes.
To learn more about CSS, you can visit these websites:

And i tried the add to cart css.


With the css:
hikacart{background-color:#1c3051;color:#000;height:20px;border-radius:5px;padding:5px 12px;border:solid 1px #999;box-shadow:2px 2px 2px #333;transition:all 0.2s ease-in-out 0s;}

But that doe not work either.

regards Jan

Attachments:

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

  • Posts: 66619
  • Thank you received: 9806
  • MODERATOR
2 days 12 hours ago #310075

Hi,

In the documentation link provided you have this sentence:

In HikaShop > Configuration > Display > CSS, you can edit the "Style for the frontend" to add your custom CSS.

So you need to add your custom CSS via that "Style for the frontend" edit icon, and not in the "Extra CSS for add to cart button" as it can only have CSS classes, not CSS code.

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
2 days 11 hours ago #310091

Hi Nicolas,
thanks for your reply. But iam niet allowed to that:
While saving i get the message : The webmaster has forbidden your access to this site
Warning: Cannot modify header information - headers already sent by (output started at ......

I am administrator with the highest levels.
Should i do something before editting this file ?

regards Jan

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
2 days 11 hours ago #310092

i found the security issue and solved it.

I did what you said. But it did not work.

regards Jan

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
2 days 10 hours ago #310094

I think the only thing not working is the background-color Also not working on hover.

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

  • Posts: 66619
  • Thank you received: 9806
  • MODERATOR
1 day 18 hours ago #310109

Hi,

You've added an !important to the background-color in non hover. And you didn't add it for the hover:
monosnap.com/file/0pKjrFseYU4N7iq8uwuvmW0rBVDqSc
So in that case, the non hover backgroun-color is priority, even for the hover.
Also, you have many other CSS code everywhere for the buttons and their gradient background mess with the background-color on hover. So You have to add a background:none; rule too:
monosnap.com/file/cLNSZhb4BEgJyaDjSFBpCxo1BSgBEv

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

  • Posts: 83
  • Thank you received: 2
  • Hikashop Business
1 day 17 hours ago #310117

Hi Nicolas,
yes thats works fine. THANKS

and background:none in the non hover part:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
  background-color: #1c3051 !important;
    background:none;
  color: #fff !important;
  height:18px;
  border-radius:5px;
  padding:5px 5px;
  border:solid 1px #999;
  box-shadow:2px 2px 2px #333 !important;
  transition:all 0.2s ease-in-out 0s; 
}

a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover{
    background-color:#ff6600 !important;
    background:none;
}

regards Jan

p.s.
other buttons works fine too now..

Last edit: 1 day 17 hours ago by Polleke.

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

Time to create page: 0.087 seconds
Powered by Kunena Forum