Search Bar Modification

Cnir
New Member
3 0 0

Hi,

I want my search bar on http://petsless.com to be more prominent:

1. Height: 33 px, Length: 250 px,

2. Font Size: 12 pt

 

Anyone know how I can do this? I've tinkered with CSS on wordpress sites but am utterly oblivious to Shopify 

0 Likes
andysep
Shopify Partner
12 0 1

Very easy..

1. Open "style.css" from your assets section under theme manager

2. Go to line 325 and look for "#header-search" & paste this in there:

#header-search #top-search-input {
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    float: left;
    font-size: 12px;
    height: 30px;
    padding: 6px 3px;
    width: 250px;
}

Also, you will need to modify the div that it rests in, so...

3. Go to line 353 and replace the #header-search with the following:

#header-search {
    height: 20px;
    width: 295px;
}

4. To make the search button look right, go to line 335 and add:

margin-top:10px;

to the #top-search-submit class

 

Thank should do it!

Also, download the Firebug extension - makes everything 1000 times easier

http://www.SoundEarphones.com