Search button and boarder

Hi there,

What is the URL of the site with the Shoreditch theme installed? I would like to take a look at the site and the search button & field.

Thanks,

Hello @darnelldibbles I am not able to share the link because i am working for an organization but i can send you screeshots of the bar.

Bar

So far I have been able to change the search icon but not the background which is still blue. Any suggestions?

Thanks.

Hi there,

To change the search button color you can use the following CSS code:

.search-form .search-submit:before {
	background: #000000;
}

As for the border color, I couldn’t find how that can be changed.

@fstat Thanks for your answer! Is there any way i could research to get the border color? It is blue, so i guess it must be something related to the theme.

Thanks!

@fstat Hello, I just noticed that when I search the headers of the results(on hover) change to blue. Only those, the other ones are fine. I don’t know if they are special h1 or something. Could you help me on this matter?

Thanks.

Yep. You can practice with CSS classes or even in the Chrome browser with their inspection tool. It’s something that takes some practice before you get the hang of it.

As for the color of the border in the search bar you can use something like Color Picker: https://imagecolorpicker.com/ to figure out the hex code.

Is this what you are after?

.search-form input:focus {
    outline: none !important; /* Hides Shoreditch theme default onhover blue border */
    border: 1px solid red !important; /* Add your new border and colour */
    border-radius: 5px; /* Add radius to new border if required */
    }

Example image after implementing above CSS:

Example

• This reply was modified 5 years, 9 months ago by Andrzej.

That was exactly what I was looking! Thanks @ukandrzej for your help. I was wondering how you get the location of the element in css? From the main CSS of the theme?

Thanks a lot again!

You are welcome. I didn’t’ get it from the parent theme CSS but noticed that experimenting with input:focus added the red border to my forms too when on focus. I prepended the class for the search form, .search-form and that targeted just the search form. There possibly is alternative/better CSS but this works.

Thanks again @ukandrzej really apreciate your help!