Jump to content


Photo
* * * * - 1 votes

Search Box


Best Answer James B , 10 January 2013 - 05:28 AM

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;
}
Go to the full post


  • Please log in to reply
4 replies to this topic

#1 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 10 January 2013 - 05:16 AM

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; }
 
 


#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 05:28 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content


  • deanbain likes this

#3 deanbain

deanbain

    Member

  • Members
  • 18 posts
  • Country: Country Flag

Posted 10 January 2013 - 05:45 AM

Spot on, thanks!



#4 st3phani3

st3phani3

    Newbie

  • Members
  • 2 posts
  • Country: Country Flag

Posted 08 February 2013 - 12:39 AM

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!



#5 ingo68

ingo68

    Member

  • Members

  • 14 posts
  • LocationGermany
  • Framework Version:2.4
  • Country: Country Flag

Posted 29 April 2013 - 01:11 PM

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