Archived

This topic is now archived and is closed to further replies.

  • 0

Search Box

Question

Posted · Report post

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

4 answers to this question

Posted · Report post

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;
}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Spot on, thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

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