Search form background color

[steve]

Hi,

how can change search form this blue background color to black?

Thx,
Steve

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, add this to your style.css in child theme, customize as you wish:

COPY CODE

/* Search Box Borders Color */
.form-header {
border-left: 10px solid rgba(56, 49, 52, 0) !important;
border-top: 10px solid rgba(146, 66, 93, 0) !important;
border-right: 10px solid rgba(146, 66, 93, 0) !important;
}
.form-search {
border-left: 10px solid rgba(221, 39, 101, 0) !important;
border-right: 10px solid rgba(146, 66, 93, 0) !important;
}
/* Form Background color */
.form-search, .form-header, div.alert-box, div.pagination span.current {
background: rgba(54, 54, 54, 0.51) !important;
}
/* Border color of the buttons */
.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
border: solid 1px #363636 !important;
}
/* Background color of the buttons */
.form-search.custom div.custom.dropdown a.current, .form-search.custom input[type="text"], .form-search.custom input[type="password"], .form-search.custom select {
background-color: #363636 !important;
}
/* Search Button colors */
.button:hover, .button:focus, .form-search .button, .form-search .button:hover, .form-search .button:focus, .wpcf7-submit:focus, .wpcf7-submit:hover, #rtmedia-add-media-button-post-update:hover, #rt_media_comment_submit:hover, .rtmedia-container input[type="submit"]:hover {
color: #ffffff !important; /* Text color */
background-color: #363636 !important; /* Background Color */
border: 1px solid #363636 !important; /* Border Color */
}
/* Form Footer  */
.form-footer {
color: #FDF9F9 !important; /* Text Color */
padding: 20px 20px 10px !important;
border-left: 10px solid #363636 !important;
border-bottom: 10px solid #363636 !important;
border-right: 10px solid #363636 !important;
background: #363636 !important;
width: 360px !important;
}
/* Photos Border */
.carousel-profiles li {
border: 3px solid #363636 !important;
}
/* Arrows Color */
a:not(.button), div#main a:not(.button), #header .form-footer a:not(.button) {
color: #F7F4F4 !important;
}
/* Text color, change #FFF to the color of the text you need */
#header, #header .form-header .lead, #header label {
color: #FFFFFF !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hello

To make that, navigate to : Theme Options -> General Settings -> Quick CSS and add this code :

COPY CODE

.form-search, .form-header, div.alert-box, div.pagination span.current {

background-color:#111 !important;

}

.form-footer {
color: #777777;
padding: 20px 20px 10px;
border-left: 10px solid rgba(31, 168, 209, 0.3);
border-bottom: 10px solid rgba(31, 168, 209, 0.3);
border-right: 10px solid rgba(31, 168, 209, 0.3);
background: #111 !important; }

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

What support service includes ? What not ?

[steve]

Hey,

somehow dont see Quick CSS under the Theme Options/General Settings. Why?

Thx,
Steve

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, you can test the solution i sent you 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[steve]

Tested and changed the values rgba(54, 54, 54, 0.51) from code below, but nothing happened

.form-search, .form-header, div.alert-box, div.pagination span.current {
background: rgba(54, 54, 54, 0.51) !important;

Steve

[Laura]

Hello, can you share your website link please? 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[steve]

Worked, thx!

[Author]

Posts