Jump to content
AmmyRao

[SOVLED] to change the position of quick search bar

Recommended Posts

hello all,

i m having a very small difficulty

mpVqWdu.png

 

hope somebody will help me soon.

Thanks

Share this post


Link to post
Share on other sites

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)

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

kWQmG33.png

  • Like 1

Share this post


Link to post
Share on other sites

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

kWQmG33.png

 

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 ?? :blink:

Share this post


Link to post
Share on other sites

and what directory you're browsing?

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

may i know one more thing

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Cheers, Dave

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

xnz9Whu.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

PCx6uaD.png

these are the settings for ccc

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

kWQmG33.png

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

kWQmG33.png

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?

Share this post


Link to post
Share on other sites

now u can check my website

the search box has moved above menu

 

 

now waiting for the instructions.

Thanks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

thank you for confirmation :)

we all are waiting for your new topics :)

 

thread marked as solved

with regards,

Milos

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

post-853653-0-57093200-1413050355_thumb.png

 

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 by mrsvijay (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More