Darken Search Box

Dawn Howard · #1 06-02-2021, 10:10 AM

I'm still trying to work my way around this new Xcart, what's the best way to darken my search box? It's too light.

https://www.duffystric.com/

PhilJ · #2 06-02-2021, 10:30 PM

You could add some CSS to overwrite the styles...

Code:

.simple-search-box {
   border: 2px solid #000 !important;
}
span.input-text-searchbox input::-webkit-input-placeholder,
span.input-text-searchbox input::-moz-placeholder {
   color: #386eaf !important;
}

Dawn Howard · #3 06-04-2021, 08:10 AM

Thank you, that added a dark box, how about the word "search" and magnifying glass? How do I darken them?

PhilJ · #4 06-04-2021, 08:14 AM

In the above, change..

Code:

color: #386eaf !important;

to..

Code:

color: #000 !important;

then add....

Code:

.simple-search-box > button[type="submit"] {
    color: #000 !important;
}

Dawn Howard · #5 06-04-2021, 11:55 AM

That will work, thank you!

Dawn Howard · #6 06-04-2021, 12:07 PM

How about that words "Search Items"

PhilJ · #7 06-04-2021, 12:28 PM

Try...

Code:

.simple-search-box {
  border: 2px solid #000 !important;
}
.simple-search-box > input,
.simple-search-box > input::-webkit-input-placeholder,
.simple-search-box > input::-moz-placeholder,
.simple-search-box > input:-ms-input-placeholder,
.simple-search-box > input:-moz-placeholder,
.simple-search-box > button[type="submit"] {
  color: #000 !important;
  opacity: 1 !important;
}

Dawn Howard · #8 06-07-2021, 03:17 AM

That didn't work, but I'm fine with the text being faded now, it looks good and stands out better. Thank you!!