Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Search Box

Started by deanbain , Jan 10 2013 05:16 AM

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

Member

Members
18 posts

Country:

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

Back to top

#2 James B

Advocate

Moderators
2,417 posts

LocationSurrey - UK
Country:

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

Back to top

#3 deanbain

Member

Members
18 posts

Country:

Posted 10 January 2013 - 05:45 AM

Spot on, thanks!

Back to top

#4 st3phani3

Newbie

Members
2 posts

Country:

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!