Customizing button

-- HikaShop version -- : 3.3.0
-- Joomla version -- : 3.8.5
-- PHP version -- : 7.0.7

Hi,

How can I change the button’s color and so on without losing it after an update? At this moment I changed it via: /media/com_hikashop/css/hikashop.css

Hi Nicolas,


Thank you for your reply.

What I have changed at the /media/com_hikashop/css/hikashop.css are these codes:


.hikabtn {
display:inline-block;
margin-bottom:0;
font-weight:normal;
text-align:center;
vertical-align:middle;
cursor:pointer;
background-image:none;
border:1px solid transparent;
white-space:nowrap;
padding:6px 12px;
font-size:14px;
line-height:1.42;
border-radius:4px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

color:#fff;
background-color:#888;
border-color:#ccc;
}


.hikabtn:focus {
color:#fff;
background-color:#0000ff;
border-color:#8c8c8c;
}


.hikabtn:hover {
text-decoration: none;
color:#fff;
background-color:#0000ff;
border-color:# adadad;
}



I tried to add this code completely at the end of the “Front-end CSS File”, it didn’t change anything:
#module_596 .hikabtn {color: #fff; background-color: #888;} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)


Can you please help me with this?



Regards,

Wella

Hi Nicolas,


Sorry I'm not completely right with my conclusion.

The hovers are working but I think this part - .hikabtn {color: #fff; background-color: #888;} is not working.

Here is the link:
www.buang.nl/index.php/menu/trainingen

Hi Jerome,


Thank you for your answer.

I guess I’m not that clear.

What I entirely changed/added at the “frontend_custom.css” was:
#module_596 .hikabtn {color: #fff; background-color: #888;} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)

But this part:
.hikabtn {color: #fff; background-color: #888;} won’t change, the rest did.


I have tried to add just the essential code (entire code given above and its previous location) something like this:
.hikabtn {
color:#fff;
background-color:#888;
border-color:#ccc;
}

.hikabtn:focus {
color:#fff;
background-color:#0000ff;
border-color:#8c8c8c;
}

.hikabtn:hover {
color:#fff;
background-color:#0000ff;
border-color:# adadad;
}


It did change as desired BUT the big question is:
Will these code don’t give any conflict to the existing(original) code?


Can you please confirm this situation so I can apply it to our production server? Or if you have better solution I’d like to hear it from you.


Regards

Hi Nicolas,


Yes, that’s exactly what I wanted to do, I previously change it via hikashop.css but it keep reverted after updates so I want to change it via “frontend_custom.css” (Configuration) only I don’t know exactly what to do (thanks to you and Jerome’s help).

What I understood from you is I can use the code below but I have to place !important. In this case at the part of: .hikabtn {color: #fff; background-color: #888;} but wherever I place !Important (I have limited knowledge of CSS so I tried multiple location) it did not change anything, now I tried deleting the #module_59 and it is working. I hope I did it good and no conflicts at all (thumb twisting ).

Code:
#module_596 .hikabtn {color: #fff; background-color: #888;} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)


Thank you for your help.

Hi Nicolas,


Thank you for your reply.

Unfortunately the trick(!important) didn’t completely work maybe I missed something. Tests made:

1. I’ve added the css trick you advised = Result: Button’s color (gray) none hover is not working. Button color (blue) hover works
#module_596 .hikabtn {color: #fff; background-color: #888 !important;} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)


2. I’ve added the css trick you advised but without the #module_596 = Result: Button’s color(gray) none hover is back BUT the hover color(blue) is completely gone
.hikabtn {color: #fff; background-color: #888 !important;} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)


3. CSS trick is not added and #module_596 is deleted = Result: This works
.hikabtn {color: #fff; background-color: #888} .hikabtn:focus {color: #fff; background-color: #0000ff;} .hikabtn:hover {color: #fff; background-color: #0000ff;)

At this moment the site is set as the 3rd Test, please confirm if it has no conflict at all or if you have a better idea please let me know.

That's good to hear.

Thank you for the confirmation Nicolas.