[SOVLED] to change the position of quick search bar

[AmmyRao]

hello all,

i m having a very small difficulty

 

hope somebody will help me soon.

Thanks

[vekia]

go to modules > positions

search for dispalyTop modules list (not displayHeader!) and move quick search module below the block top menu module (just drag n drop it on list)

[AmmyRao]

go to modules > positions

search for dispalyTop modules list (not displayHeader!) and move quick search module below the block top menu module (just drag n drop it on list)

thanks for the reply

one more thing do i need to delete the quick search box from display header?

[AmmyRao]

go to modules > positions

search for dispalyTop modules list (not displayHeader!) and move quick search module below the block top menu module (just drag n drop it on list)

 ok now i got the search box below menu

now to customize the look of this quick search box what should i do?

[vekia]

no, don't touch module in displayHeader hook. it must be there.

Now you have to modify module css styles

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

+

#search_block_top .button {
border: none;
border-radius: 0;
color: #fff;
text-transform: uppercase;
background: black;
float: left;
font-size: 20px;
height: 37px;
}

in blocksearch.css

 

 

 

effect

[AmmyRao]

no, don't touch module in displayHeader hook. it must be there.

Now you have to modify module css styles

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

+

#search_block_top .button {
border: none;
border-radius: 0;
color: #fff;
text-transform: uppercase;
background: black;
float: left;
font-size: 20px;
height: 37px;
}

in blocksearch.css

 

 

 

effect

 

if i leave the quick search module in header section too then in it doesn't show below menu, so i removed it from the header section.

and I M REALLY THANKFUL TO YOU

but i m not able to find a file with a name blocksearch.css ??

[AmmyRao]

 

this is all what i get in my blocksearch folder.

[vekia]

and what directory you're browsing?

[stottycabanas]

AmmyRao, as vekia also is suspecting, I think your screenshot is of the folder /themes/default/modules/blocksearch.

You need to look instead in /modules/blocksearch - you'll find blocksearch.css there.

Cheers, Dave

[AmmyRao]

and what directory you're browsing?

 

AmmyRao, as vekia also is suspecting, I think your screenshot is of the folder /themes/default/modules/blocksearch.

You need to look instead in /modules/blocksearch - you'll find blocksearch.css there.

Cheers, Dave

 

 

and what directory you're browsing?

yes i was looking inside default/modules/blocksearch

 

now i got the file

thanks a lot vekia and stottycabanas

now cheers

[AmmyRao]

may i know one more thing

what is the use of default/modules/blocksearch then?

[AmmyRao]

and if i alter the blocksearch.css file then when i will upgrade to newer version of prestashop those changes will be lost?

am i right?

and if yes what is the alternate way?

[vekia]

default/modules/blocksearch is a directory for "overrides", in this directory you can override module .tpl files

it mean, that your script will use this file, not original from modules section, to generate content of visible on website

 

more about overrides:

http://doc.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingamodule%27sbehavior

[AmmyRao]

default/modules/blocksearch is a directory for "overrides", in this directory you can override module .tpl files

it mean, that your script will use this file, not original from modules section, to generate content of visible on website

 

more about overrides:

http://doc.prestashop.com/display/PS15/Overriding+default+behaviors#Overridingdefaultbehaviors-Overridingamodule%27sbehavior

ok i got it, thanks

 

now as i am editing the blocksearch.css, nothing is changing on my website?

do i need to copy the blocksearch.css file from /modules/blocksearch to some other place?

[vekia]

make sure that:

you've got disabled option to CCC for css files under adv. parameters > performance tab

while changing css files , it's necessary to disable it.

[stottycabanas]

No, it's in the correct place. Try clearing your browser's cache use Ctrl-F5 to refresh the page.

Cheers, Dave

[AmmyRao]

make sure that:

you've got disabled option to CCC for css files under adv. parameters > performance tab

while changing css files , it's necessary to disable it.

 

 

No, it's in the correct place. Try clearing your browser's cache use Ctrl-F5 to refresh the page.

Cheers, Dave

so should i change the original file inside /modules/blocksearch or i should copy that blocksearch.css file somewhere else before editing?

[AmmyRao]

after using ccc for css the search moved to extreme right?

[vekia]

you turned on or off ccc for css?

it looks like css styles for mobile version, and common problem

 

go to preferences > themes

turn on (or off) mobile theme, refresh your front office

then back to preferences > themes and switch mobile version one again, refresh front office once again

[AmmyRao]

you turned on or off ccc for css?

it looks like css styles for mobile version, and common problem

 

go to preferences > themes

turn on (or off) mobile theme, refresh your front office

then back to preferences > themes and switch mobile version one again, refresh front office once again

these are the settings for ccc

[stottycabanas]

so should i change the original file inside /modules/blocksearch or i should copy that blocksearch.css file somewhere else before editing?

The file in /modules/blocksearch is the one to edit. If, before you start editing, you want to make a backup copy of this file so that you can revert to the original if necessary, that's fine.

You also need to follow vekia's earlier advice - change the CCC setting for css to 'Keep CSS as original', and follow the steps relating to the mobile theme.

It will be easier to help you if you can provide the url for your site.

Cheers, Dave

[vekia]

"KEEP CSS AS ORIGINAL"

[AmmyRao]

The file in /modules/blocksearch is the one to edit. If, before you start editing, you want to make a backup copy of this file so that you can revert to the original if necessary, that's fine.

You also need to follow vekia's earlier advice - change the CCC setting for css to 'Keep CSS as original', and follow the steps relating to the mobile theme.

It will be easier to help you if you can provide the url for your site.

Cheers, Dave

 

 

"KEEP CSS AS ORIGINAL"

thanks and ok i will keep css as original

and the url to my website is www.libever.com

[AmmyRao]

 and i am still not able to the reflect the changes on my wesbite that i have made in css file 

[stottycabanas]

no, don't touch module in displayHeader hook. it must be there.

 

if i leave the quick search module in header section too then in it doesn't show below menu, so i removed it from the header section.

If you don't follow the advice you're given, you may end up with problems!

Because you removed the module from the header, the blocksearch.css file won't load. That's why you don't see any changes.

Put it back.

Cheers, Dave

[AmmyRao]

If you don't follow the advice you're given, you may end up with problems!

Because you removed the module from the header, the blocksearch.css file won't load. That's why you don't see any changes.

Put it back.

Cheers, Dave

i wanted that search bar at that place so vekia referred me this solution

u should check my first post in this topic to see at what place i want my search box to be

Thanks

[AmmyRao]

http://i.imgur.com/99DvAwf.png

 

this is what i want 

[AmmyRao]

"KEEP CSS AS ORIGINAL"

any help?

[stottycabanas]

i wanted that search bar at that place so vekia referred me this solution

u should check my first post in this topic to see at what place i want my search box to be

Vekia didn't tell you to unhook the module from displayHeader - quite the opposite.

I'm aware of what you're trying to achieve. If you had followed the advice given, you would get the result shown in the image below. As far as I can see, that matches your requirement for the search box - the positioning can then be amended to suit.

 

[AmmyRao]

Vekia didn't tell you to unhook the module from displayHeader - quite the opposite.

I'm aware of what you're trying to achieve. If you had followed the advice given, you would get the result shown in the image below. As far as I can see, that matches your requirement for the search box - the positioning can then be amended to suit.

 

ohh yes i unhook it from the header section

but i did it because before doing like that the search box was not coming below the menu

 

ok now tell me what should i do?

[AmmyRao]

now u can check my website

the search box has moved above menu

 

 

now waiting for the instructions.

Thanks

[AmmyRao]

now i got what u mean

thanks now i m able to reflect the chaneges made to the .css file on my website

u guys rocks.

 

Thanks a lot

but i m coming with a lot more things very soon.

Cheers

[vekia]

thank you for confirmation

we all are waiting for your new topics

 

thread marked as solved

with regards,

Milos

[hashmi photos]

where is position module please download link 

[vekia]

there is no download link because it's a back office feature under modules > positions tab.

[mrsvijay]

Hi 

 

I want change the position of quick search box and cart box from top menu into logo section

i've attached image check it.

 

And when i refresh the page, one error is displayed below of menu barlike "Newsletter: Invalid email address", thats also i mentioned in picture.

 

Now i want change the position of search bar and cart box from menu onto logo section 

 

and need clear that error message. (how to clear that message?)

Edited October 11, 2014 by mrsvijay (see edit history)

[somits1]

Hi, i am using prestashop 1.5.6 for my website http://www.slmobileprice.com

 

In mobile theme search box not displaying on top position on category page. On home page search box displaying on top.

But after clicking on any categoryits displaying in middle. So please help me to solve the issue.

 

Thanks,

Somit

[karola]

Guys, is it possible to have the search block only on home page?

[Maurice]

Dear Sirs , appreciate an help for Search Bar Issue

Prestashop 1.7.8.7

Classic Theme

i would Modify the size of Classic Search bar for example 500px x 40 px (original should be 208 Px per 20px)

and eventually Put the search Bar on the Middle

Kindly ask if i should add something on Ps_searchbar.tpl or i should modify another file i do not remember anymore

Thanks

Regards

Maurice