How do I override a button color

[LindaK816]

Hi Support – I was trying to use the sandy-brown color but assign it a different color.  Here’s what I put in my Quick CSS but it’s not right.  Could you let me know what I did wrong?  Thank you!

#vc_general .vc_btn3 .vc_btn3-color-sandy-brown {

color:#835f52;

}

LindaK

[Laura]

Hello, have you tried:

COPY CODE

#vc_general .vc_btn3 .vc_btn3-color-sandy-brown {
color:#835f52 !important;
}

When you want to override something, you should add !important before the ;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[LindaK816]

Hi Laura – thanks for your reply. I just tried it but it didn’t work. Do I have a syntax error perhaps?

Thank you,
Linda

[Laura]

Hello, can you send me a link where the button is? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[LindaK816]

Hi Laura – yes it is on every page http://www.treyburn-test.org/ and located in the bottom right footer (4th column) where it says “SIGN UP NOW”.

Thank you!
LindaK

P.S. Here are my current Quick css overrides:

/* Linda added 4-24-17 because icons are not padding correctly, this is a work around */
.emailclass {
padding-right:20px;
}

/* Linda 2-14-17 this will change the color of the vertical line separator was 804d3b*/
.vertical-separator:before {
background: #372d24 !important;
}
.vertical-separator {
border-left: 3px solid #372d24 !important;
}
.vertical-separator:after {
background: #372d24 !important;
}
/* 3-22-17 from Laura, this will change the color of font in the top nav bar */
ul#menu-top-nav a {
color: #4cadc9 !important;
}

/* Linda this will add a little padding to the main nav bar, was displaying strangely in IE */
#menu-main-nav-menu {
padding-top:12px;
}

/* Linda this will increase the font size to the main nav bar */
#menu-main-nav-menu a {
font-size:12pt;
}

/* from Laura 3-22-17 this will reduce padding right below logo area */
@media screen and (min-width: 800px) {
.kleo-main-header.header-centered {
height: 360px !important;
}
}

/* the following controls the most bottom row of the footer color, #8e7b74 */
#socket {
background: #1d1610 !important;
}
#socket .row {
background: #1d1610 !important;
}
#socket .gap-10 {
background: #1d1610!important;
}
#socket p {
background: #1d1610 !important;
}
#socket .col-sm-12 {
background: #1d1610 !important;
}
/* Linda added 5-9-17 */
.button-override a:hover {
color: #61cdec !important;
}

/* from Laura 5-9-17 to override color */
a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-modern.vc_btn3-color-primary {
background: #338197 !important;
border: #20515f !important;
}
#vc_general .vc_btn3 .vc_btn3-color-sandy-brown {
color:#835f52 !important;
}

.extra-padding {
padding-bottom: 25px;
}
/* Linda 5-10-17 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* padding:0px !important;
margin:0px !important; */
}
/* Laura 5-14-17 – Fix mobile header */
@media (max-width: 991px) {
.kleo-main-header.header-centered {
height: 0px !important;
}
.navbar-header {
height: auto !important;
}
.kleo-mobile-switch {
display: none !important;
}
.navbar-header {
height: initial !important;
}
img#logo_img {
display: none !important;
}
}
.wpcf7 input[type=”text”],
.wpcf7 input[type=”textarea”],
.wpcf7 input[type=”email”],
.wpcf7 input[type=”tel”],
.wpcf7 input[type=”submit”],
.wpcf7.submit
{
background-color: #a2d0df;
border-style: solid;
border-color: #a29c9c;
color: #000;
}
.wpcf7 textarea
{
background-color: #a2d0df;
border-style: solid;
border-color: #a29c9c;
color: #000;
/*width: 50%; */
}

[Laura]

Hello, try this

COPY CODE

a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-modern.vc_btn3-color-sandy-brown {
    background-color: #835f52 !important;
    border-color: #835f52 !important;
}

Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[LindaK816]

Perfect – thank you Laura!

Linda

[Laura]

Glad to help 🙂 If you can rate us 5 stars at themeforest it would help a lot 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts