How to SHORTEN the length of the top search box to allow for bigger logo

[xxtarman]

The search box is about a half inch too long. I could make my logo smaller but then it does not look exactly correct. How can I shorten the length of the search box by a bit so that I can keep my logo the right size? See the screen clip attached which shows the top of my website and the search box that I want to chop.

 

[seanvierth]

same issues that i was looking to resolve.

[hxd]

You can do that by editing the blocksearch.css file. If your PrestaShop root directory on your hosting account is public_html, then the path to the file will be public_html/modules/blocksearch/blocksearch.css. Find the code:

 

#search_block_top #search_query_top {
padding:0 5px;
height:23px;
width:300px;/* 310 */
border:1px solid #666;
border-right: 0 !important;
color:#666;
background:url(img/bg_search_input.png) repeat-x 0 0 #fff;
float: left;
}

 

and edit width: 300px; changing the number to whatever you want. However, this will shorten the search bar on the right side. Its position will be the same with respect to the left border of the field. To move the search bar to the left you need to edit the following code in blocksearch.css:

 

#search_block_top {
position:absolute;
top:44px;
left:0;

 

edit the line left: 0; to something like left: 100px; for example.

 

Then clear your browser cache and refresh the frontend.

 

Hope this helps.

Edited February 7, 2013 by hxd (see edit history)