changing the "Offers" button color

mengler12

Hi, how can we change the button color for the "offers" section. Also looking to change the color text for the 25% Off All Design and STAY-HOME (OFFER & COUPON)

Ninja

mengler12
Hi
To change the colors add below code in custom css present in the template style options and change the color codes as per needs.

For Readmore button that is showing in Gray color use below code

.offer-list .mod-articles-category-readmore .btn {
    background: #d3d5df;
    color: #444a5e;}

For 25% Off All Design and STAY-HOME (OFFER & COUPON) use below code

.offer-list .offer-details {
    color: #267ffd;}

.offer-list .offer-coupon .value {
    border-bottom: 1px dashed #F44336;
    color: #F44336;}

For get offer link use this code

.offer-list .offer-coupon .btn-get-offer:hover, .offer-list .offer-coupon .btn-get-offer:focus, .offer-list .offer-coupon
.btn-get-offer:active {background-color: #267ffd;}
offer-list .offer-coupon .btn-get-offer { background-color: #858a9e;color: #fff;}

An easy way to check such style code is use right click from your mouse on the item you want to change color > inspect element > it will show the code : http://prntscr.com/sfq5s9

Regards

mengler12

Many thanks, we appreciate it

mengler12

Hi again, those changes worked. Thank you. But, we still have a question about the button.
How do we change the active color? See screenshot.

Ninja

mengler12
Hi
Use this code

.offer-list .mod-articles-category-readmore .btn:hover, .offer-list .mod-articles-category-readmore .btn:focus, .offer-list .mod-articles-category-readmore .btn:active {
    background-color: #267ffd;
    border-color: #267ffd;
    color: #fff;
}

mengler12

what will change the Login In button color. we looked but could not find the code. Ninja

Ninja

mengler12
Hi
If your question is for the login page button, it use standard button colors
you can customize the default values from template theme options.
this is the code for default button colors

.btn.btn-primary {
    background-color: #267ffd!important;
    border-color: #267ffd!important;
}

mengler12

Hi, I am referring to the navbar signin button. We've made the changes in the template theme options for all the defaults. That changed the color of the button, but when we Hover over the button it still shows the Blue. We also tried using the below code. But that did not work.

.t4-header-right .navbar .nav .nav-link.nav-link-signin {
background-color: #db2d2e;
hover: #d12425
color: #fff;
}

Ninja

mengler12
Hi
here is code

.t4-header-right .navbar .nav .nav-link.nav-link-signin {
    background-color: #267ffd;
    color: #fff;
}
.t4-header-right .navbar .nav .nav-link.nav-link-signin:hover, .t4-header-right .navbar .nav .nav-link.nav-link-signin:focus, .t4-header-right .navbar .nav .nav-link.nav-link-signin:active {
    background-color: #036afd;
    color: #fff;
}

if not working, kindly turn off css compression and share the URL of sire here.

mengler12

this worked, thanks@pankaj#122802

Ninja

mengler12
You are welcome!