Ever noticed that my search bar is orange?  It’s totally a rookie hack and super simple, but it’s things like that which, to me, make a huge difference in good design and great design.

Now, that does not mean if you do not style your search bar (or countless other similar changes) your site design is merely good, I’m just saying that taking the extra effort to style something very default (grey and blah) takes rookie level css, but has expert level design consideration.

So, “Ya, already, I’m dying here with the setup, Logan!” you say, “Just show me the dang CSS!”

Ok, well, fair enough.  Here is the CSS I used to paint it orange:

.widget_search input#s {
 border: 1px solid #ff6d00;
}
.widget_search #searchsubmit {
 background-color: #ff6d00;
 border: 1px solid #ff6d00 !important;
 color: white !important;

.widget_search:hover #searchsubmit {
 background-color: #E64D00;
}

And a video on how I use it:

The last section changes the background color of the Submit button and I applied the hover action to the .widget_search (instead of the #searchsubmit) so that it would change on hover over any part of the search widget, not just on the Submit button.

“But, wait,” the astute reader observes, “this is not the Divi search module! So this is not a Divi specific tutorial!”

Ya, that’s true.  Elegant Theme has been stepping up their Design game the last few months, offering so many design features in the modules, that I really don’t think there is a need for it…plus, how many people use that module anyway?!

Now go on and build beautiful.

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.