Hover color cart button in css

  • Posts: 4
  • Thank you received: 0
10 years 1 month ago #201658

-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.0
-- PHP version -- : 5.5.24
-- Browser(s) name and version -- : all
-- Error-message(debug-mod must be tuned on) -- : no error

Well, my first post on this board. Looked into this forum, but can't find my answer.

Just a simple question, but going crazy about this, because I can't find what and where to edit.

Changed the color of my cart button and font color. That's fine, but where can I edit the hover color? File and line? When I hover my brown buttons they turn white. I need the button to be #f9d616 with this font color #654f47 when I hover over them.

Thank you in advance for asnwering this question.
Regards,
Gaby

Last edit: 10 years 1 month ago by Plukkie.

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

  • Posts: 4
  • Thank you received: 0
10 years 1 month ago #201659

ah, forgot to post my URL
www.stripecity.nl/webshop/category/honing

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

  • Posts: 83989
  • Thank you received: 13604
  • MODERATOR
10 years 1 month ago #201661

Hi,

You want to edit the CSS of HikaShop via the CSS section of the Display tab of the HikaShop configuration.
There, you have two pieces of code for these button styling:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
	text-decoration:none;
	color: #ffffff !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, #654f47, #654f47);
	background: -moz-linear-gradient(top, #ffffff, #eee);
	background: -o-linear-gradient(top, #ffffff, #eee);
	background: linear-gradient(top, #ffffff, #eee);
}
This one is for the button when you don't hover on it.

And this one is for when you hover on it:
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover{
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	display: inline-block;
	outline: none;
	border:1px solid;
	border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
	text-decoration:none;
	background-color: #f8f8f8;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
	background: -webkit-linear-gradient(top, #ffffff, #f8f8f8);
	background: -moz-linear-gradient(top, #ffffff, #f8f8f8);
	background: -o-linear-gradient(top, #ffffff, #f8f8f8);
	background: linear-gradient(top, #ffffff, #f8f8f8);
}

The following user(s) said Thank You: Plukkie

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

Time to create page: 0.053 seconds
Powered by Kunena Forum