Knowledgebase

How to change the width of the top search box in PrestaShop

To change the length of the top search field you need to make some CSS modifications.

In PrestaShop 1.5 we'll use as an example the default theme that comes prepackaged with the installation. The search block of that theme consists only of a search field/box and a button, and it's displayed almost in the top center of the page. Whether you want to increase or decrease the length of the search field you need to modify the file blocksearch.css that's part of the blocksearch module. If, for example, your PrestaShop is installed directly in the public_html folder on your PrestaShop hosting account, meaning your site's accessible at yourdomain.com, then the path to the file will be public_html/modules/blocksearch/blocksearch.css. To change the width of the search field find the following 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;
}

Edit the line width:300px; and replace 300 with whatever number you want, depending on whether you want the field to be narrower or wider. You can edit the file from the Files section of the Pixie control panel, or you can download it with an FTP client (e.g. FileZilla), edit it with a text editor (e.g. Notepad) and upload it back in the same folder overwriting the old file. After that clear your browser cache and refresh the frontend of your site.

Note that the search box will be narrowed or widened on the right side. The left border will stay fixed. So you may also want to move the search bar. For more information on this check out the article on moving the top search block within the header in PrestaShop.

Instead of changing the module file blocksearch.css in the modules folder, you can override it. To do this, assuming you use the default theme and public_html is the root PrestaShop directory on your hosting account, you need to go to public_html/themes/default/css, create a folder called modules, and in that folder itself create another one called blocksearch. Then copy the file blocksearch.css from public_html/modules/blocksearch and paste it in public_html/themes/default/css/modules/blocksearch. After that edit the copied file in the themes directory as described above. This way your modification won't be overwritten when you upgrade the module. If you use a custom theme and you want to edit the top search box, you should first look into the folder of that theme to see whether there's a CSS file there responsible for styling the search box.

In PrestaShop 1.4 you also have to edit a file called blocksearch.css but this time it's directly in the folder of the theme. So if you use the prepackaged default theme and PrestaShop is installed in the public_html folder on your hosting account, the path to the file will be public_html/themes/prestashop/css/modules/blocksearch/blocksearch.css. With the default PrestaShop 1.4 theme the search bar is displayed in the top right corner of the header, and in addition to the search box and the button it also contains some background and an additional icon (a magnifying glass) on the left side of the search field. So if you change the width of the search field you'll probably have to change the styling/position of the other elements of the search block. To change the length of the search field you need to edit the following code in blocksearch.css:

#header_right #search_block_top input.search_query { width: 12em }

Just change the number in width: 12em to widen on make narrower the search field. Then clear your browser cache and refresh the frontend to see the result

Also Read