[Solved] Quick Search Module Position

[Gilles Carpentier]

I have activated the quick search module but it appears over my cie logo in the left part.

I have tried to deactivate it and then to activate it again but it always come over my companie logo

Help please

Gilles

[leofrog8]

Hi Gilles

 

I'm very new to Prestashop myself but have found that you can crudely adjust the position of the "Quick Search" box here modules/blocksearch/blocksearch.css. I

 

Here is the default:

 

/* block top search */

#search_block_top {

position:absolute;

top:44px;

left:0;:

 

Here is a different version which puts the search box over to the right side beneath the "Bienvenue | Identifier-vous". I'm not actually sure how you managed to get it over on the left like that, perhaps post your top0 few lines of code so that I can see the difference.

 

/* block top search */

#search_block_top {

position: absolute;

top:100px;

left:270px;

 

You can play with the numbers to see where it goes.

 

I'm sure there are better methods and maybe others will come in and tell us, also if you search the forum you will find mention of Back Office and "Unhooking" which is probably preferred but I haven't had time to check those out myself yet. I think that if you want to use the space in the middle which is left by moving the search to the right then you probably have to do something about the "hooking".

 

Do you use FireBug with Firefox or in IE it is F12?? These give lots of clues as to what is going on on the page and where to go to change things. You can also experiment a bit without doing anything really dangerous!!

 

Also if you go into BO Modules - on the right side at the top is "Live Edit" which you can use to move the module blocks in the main body but it doesn't work in the header for some reason.

 

Hope the above helps you out a bit

 

Cheers - Bob

[leofrog8]

Ok, you can ignore a lot of the above as I have now replicated your situation on my own site and I can't move it myself now - at least there's now two of us trying to figure it out

 

Please let me know if you get there before I do

[leofrog8]

Ok, the benefits of having a back-up running on "localhost" - shame I didn't practice on that one. So I renamed "blocksearch.css" and uploaded amended "blocksearch.css" from back-up - having in the meantime found easier way of getting it over to the right.

 

Here's the code for cutting and pasting into your blocksearch.css file: (Unfortunately I can't find how to put the file (or anything else) in My Media so I can't attach. If you can't sort it out this way PM me your email and I'll send file direct.

 

/* block top search */

#search_block_top {

position:absolute;

top:100px;

right:0px;

}

#search_block_top p {padding:0;}

#search_block_top #search_query_top {

border-left:1px solid #666; border-top:1px solid #666; border-bottom:1px solid #666; height:23px;

width:200px;/* 310 */

border-right: 0px none !important;

color:#666;

background:#fff url('img/bg_search_input.png') repeat-x 0 0;

float: left; padding-left:5px; padding-right:5px; padding-top:0; padding-bottom:0

}

 

#search_block_top .button {

border:medium none;

border-radius:0;

color:#fff;

text-transform:uppercase;

background:#101010 url('img/bg_search_submit.png') repeat-x 0 0;

float: left;

height: 25px

}

 

form#searchbox{padding-top:5px}

form#searchbox label{color:#333;margin-bottom:1px}

form#searchbox input#search_query_block{

border: 1px solid #CCCCCC;

-webkit-border-radius:3px !important;

-moz-border-radius:3px !important;

border-radius:3px !important;

height: 18px;

margin-top:10px;

}

form#searchbox input#search_button{padding: 1px 4px;}

 

 

Cheers

 

Bob

[vekia]

I have activated the quick search module but it appears over my cie logo in the left part.

I have tried to deactivate it and then to activate it again but it always come over my companie logo

Help please

Gilles

 

i can try to debug this but your shop must be online. Can you provide an url to your shop?

[Gilles Carpentier]

The shop is activated now if you want to take a look

Thanks in advance for your help

[Carolina Custom Designs]

Pretty simple fix here

 

In modules/blocksearch/blocksearch.css find the following:

 

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

 

Change this to

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

 

That should do it.

 

Marty Shue

[Gilles Carpentier]

No sorry no effect as you can see

[Guest]

If you are make changes remembver to clear our the cache otherwise you wont see the effects

 

I found that this can be caused by the position of the module on the postitions page

 

In the back office try this. Go to Module > Positions

 

Scroll down until you can see the Quick Search block and move it . In the Top of Pages section, mine is directly after Cart Block. Also look in the header of pages section, mine is after the CMS block

 

I have found this with a few things (e.g the reinsurance block) moving it's position within the same section can make a difference (No idea why I am not a programmer )

[Carolina Custom Designs]

No sorry no effect as you can see

 

I just checked your css and you did not apply the change I posted. Until you correctly apply the code I posted you will not see a change. I guarantee it will work if you will properly add the code I posted.

 

Marty Shue

[Gilles Carpentier]

I am so sorry i forgot the px

It works !!!

I am so happy

[Gilles Carpentier]

Hi Gilles

 

I'm very new to Prestashop myself but have found that you can crudely adjust the position of the "Quick Search" box here modules/blocksearch/blocksearch.css. I

 

Here is the default:

 

/* block top search */

#search_block_top {

position:absolute;

top:44px;

left:0;:

 

Here is a different version which puts the search box over to the right side beneath the "Bienvenue | Identifier-vous". I'm not actually sure how you managed to get it over on the left like that, perhaps post your top0 few lines of code so that I can see the difference.

 

/* block top search */

#search_block_top {

position: absolute;

top:100px;

left:270px;

 

You can play with the numbers to see where it goes.

 

I'm sure there are better methods and maybe others will come in and tell us, also if you search the forum you will find mention of Back Office and "Unhooking" which is probably preferred but I haven't had time to check those out myself yet. I think that if you want to use the space in the middle which is left by moving the search to the right then you probably have to do something about the "hooking".

 

Do you use FireBug with Firefox or in IE it is F12?? These give lots of clues as to what is going on on the page and where to go to change things. You can also experiment a bit without doing anything really dangerous!!

 

Also if you go into BO Modules - on the right side at the top is "Live Edit" which you can use to move the module blocks in the main body but it doesn't work in the header for some reason.

 

Hope the above helps you out a bit

 

Cheers - Bob

I have succeed look at the answer given to me hereafter

[Carolina Custom Designs]

I am so sorry i forgot the px

It works !!!

I am so happy

 

No problem. Glad to hear you got it to work.

 

Marty Shue

[leofrog8]

Well done - onward and upward - well sideways anyhow!

 

Bob

[vekia]

yeah, im so happy that your issue is now solved

i marked this topic as SOLVED for other forum members

 

many thanks for the solution, regards my friends!

[totallighting.sk]

Working, thx!

[ronelgon]

Hello,
I have a new search module and would like it to replace the default prestashop search module position of displayTop and this module be displayed exactly where the prestashop search module displays from when using the default prestashop theme because its what i use.

 

Kindly help me to edit the code in order to fit in the same position of the default prestashop search module when using the default theme.

 

The code for the new such module for file named style.css is below;

/* BA Ajax Search of Khánh Đông*/
#ba_ajax_search{
     position: relative;
z-index: 10;
    top: 50px;
}
#ba_ajax_search .result_search{
    position: absolute;
    background: white;
    z-index:100;
    text-align: left;
    border-radius: 2px;
    display:none;
    width:92%;
    float:left;
    padding:0;
    top: 33px;
    background: none;
}
#ba_ajax_search .result_search .item_product img{
    width:60px;
}
.title_product{
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    background-color: #f7f7f7;
    padding: 0px 10px 0px;
    text-transform: uppercase;
    font-size: 10px;
    color: #a0a0a0;
    text-align: right;
}
#ba_ajax_result{margin-bottom:0; float: left; box-shadow: 0 0 5px rgba(0,0,0,.25); width: 100%; height: 400px;
overflow-y: scroll;}
#ba_ajax_result li a{
    display:block;
    float:left;
    width:100%;
}
#ba_ajax_result li a .image_product{
    float: left;
     margin-right: 6px;
}
#ba_ajax_result li a .name_des_price_product{
    float: left;
    width:80%;
}
.result_search:before {
    font-family: FontAwesome;
    content: "\f0d8";
    height: 13px;
    float: right;
    display: block;
    font-size: 23px;
    margin-right:15px;
}
#ba_ajax_result li.title_product:first-child{border-top:0;}
#ba_ajax_result li .name_product {float: left;width: 100%;}
#ba_ajax_result li .description_product{float: left;width: 100%;}
#ba_ajax_result li .price_product{float: left;width: 100%;}
#ba_search{ padding: 7px 10px 8px 10px;
height: auto;margin-top:5px}
.result_search .ba_ajax-loader{display:none;}
#ba_ajax_result li a.ba_next{
    width: 47%;
float: left;
text-align: left;
margin-left: 7px;
}
#ba_ajax_result li a.ba_prev{
    width: 50%;
    float: left;
    text-align: right;
}
#ba_ajax_result ul{width:100%;float:left;margin:0;}
#ba_ajax_result::-webkit-scrollbar {
width: 7px;
}

#ba_ajax_result::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

#ba_ajax_result::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#ba_ajax_result li a.ba_prev:hover,#ba_ajax_result li a.ba_next:hover{
    color:#747474;
    font-weight:400;
}
#ba_ajax_result li .title_reference{font-weight:bold;}
#ba_ajax_search .key_search .close_ba_ajax_search:after{
    font-family: FontAwesome;
    content: "\f00d";
    float: right;
    display: block;
    font-size: 13px;
    margin-right: 15px;
    position: absolute;
    right: 10px;
    top: 7px;
    padding: 7px 0;
    background-color: white;
    cursor:pointer;
}
#ba_ajax_search .key_search .close_ba_ajax_search{display:none;}

Your help will be highly appreciated

 

Thank you

Ronnie

[Derick63]

Hi all.

I have the same issue but I disabled the Cart Block and the Search Block just decided to center itself on the page. I tried everything you guys said to do in this thread and nothing works. I even tried to position it right with 0 px and it did not position itself to the right. It just sits there in the middle of the page.