Knowledge Base & Support Center

Changing Button Color

OPTIMA EXPRESS (RESPONSIVE)

You can easily change the color of the buttons, map pins and other accents with the WordPress dashboard under Optima Express > Configuration. Select the color of your choice from the Button Color dropdown menu and save your changes. 

To use a custom color or change only certain elements, use the CSS Override field on the same page to enter your specific styles. An example of custom styling is provided in the snippet below and can be used with your preferred colors.

/** Button Colors **/
#ihf-main-container .btn-primary {
color: #000000 !important;
background-color: #FFFFFF !important;
border-color: #000000 !important;
}
#ihf-main-container .btn-primary:hover,
#ihf-main-container .btn-primary:focus,
#ihf-main-container .btn-primary:active,
#ihf-main-container .btn-primary.active,
.open .dropdown-toggle#ihf-main-container .btn-primary {
color: #000000 !important;
background-color: #FFFFFF !important;
border-color: #000000 !important;
}
#ihf-main-container .btn-primary.disabled,
#ihf-main-container .btn-primary[disabled],
fieldset[disabled] #ihf-main-container .btn-primary,
#ihf-main-container .btn-primary.disabled:hover,
#ihf-main-container .btn-primary[disabled]:hover,
fieldset[disabled] #ihf-main-container .btn-primary:hover,
#ihf-main-container .btn-primary.disabled:focus,
#ihf-main-container .btn-primary[disabled]:focus,
fieldset[disabled] #ihf-main-container .btn-primary:focus,
#ihf-main-container .btn-primary.disabled:active,
#ihf-main-container .btn-primary[disabled]:active,
fieldset[disabled] #ihf-main-container .btn-primary:active,
#ihf-main-container .btn-primary.disabled.active,
#ihf-main-container .btn-primary[disabled].active,
fieldset[disabled] #ihf-main-container .btn-primary.active {
background-color: #FFFFFF !important;
border-color: #000000 !important;
}

/** Map Colors **/
.ihf-map-icon{
background-color: #FFFFFF !important;
border-color: #000000 !important;
color: #000000 !important;
}
.ihf-map-icon:after {
border-top-color: #000000 !important;
}

/** Title Bar Colors **/
#ihf-main-container .title-bar-1 {
color: #000000 !important;
background-color: #FFFFFF !important;
border-color: #000000 !important;
}

Did you find this article helpful?