Jump to content
deanbain

Search Box

Recommended Posts

deanbain    0
deanbain

I added custom code to change the background color of the search box to white in the Classic Nav bar. However upon doing so it appears that the little magnifying glass has too disappeared. It is not white so I can only presume that it is behind the white colored layer I just created.  Any ideas how to bring it back? It even disappears if I make the background transparent!

 

 

 
.searchform .searchfield { background: #FFFFFF; text-color: #662f8f; }
.searchform .searchfield:focus { background: #FFFFFF; }
 
 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi,

 

The search icon is inserted as a background-image in the css of the search box. So if you've just specified background:#ffffff it will overwrite it. You'll need to use background-color for the color and leave the background-image element inplace. I'm pasted the css for the search below, so you can edit the color and other parts and then paste back to replace what you've previously entered.

 

.searchform .searchfield {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #F2F2F2;
    background-image: url("http://montymedia.pagelines.me/wp-content/themes/pagelines/images/search-btn@2x.png");
    background-origin: padding-box;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    border: 1px solid #DEDEDE;
    border-radius: 13px 13px 13px 13px;
    float: right;
    font-family: "Helvetica",Arial,serif;
    font-size: 11px;
    height: 23px;
    margin: 0;
    padding: 5px 5px 5px 28px;
    transition: all 0.7s ease 0s;
    width: 125px;
}
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
st3phani3    0
st3phani3

Hello! Quick question - and believe me I have searched already...which file willI find .searchform .searchfield? I know I should develop a child theme, but for now I need a quick fix. Thanks!

Share this post


Link to post
Share on other sites
ingo68    1
ingo68

how can I change or replace the placeholder text "Search" in the search field?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×