get centered search block under centered logo ps 1.6.1.4

[dizz]

Hello folks,

 

I'm a little stuck of how to place the searchbox under the logo in the header? And both centered. I use the default-bootstrap template.

 

I found some explanations to copy the code of the logo form header.tpl into the the blocksearch_top.tpl but this is not what I want (searchblock is left of logo, it should be under the logo)

https://www.prestashop.com/forums/topic/318418-solved-center-logo-in-new-theme-16

 

Somebody could give me a hint, how to proceed? Is it a question of the css or the templates?

My candidates are:

 

global.css

blocksearch.css

header.tpl

blocksearch-top.tpl

 

Thank you

dirk

[musicmaster]

Please provide an url and a picture of how you would like it changed.

[dizz]

Hi,

thank you. Sorry I have no url, but can show you what I mean in the default configuration:

this is before/default:

 

Before:

 

 

 

This is how it should look like (done by gimp, the cart doesn t matter here (can be done by hooks), this is about logo and searchbox)

 

After:

 

I tried to exclude #header_logo in global.css from the bootstrap grid scheme (exclude no col-sm-4 for #header_logo) to "free"  it.

Then to give some padding/position instructions  for #search_block_top in blocksearch.css. But without effect.

 

Finally I do not know, which is the "winning" css and which elements are where defined and inherited. Or do I need to wrap both into a new div element and put it into a tpl?

And also: It should still work in mobile, so I dont want to use "global" positioning.

thx

d.

[Knowband Plugins]

Alternative way:

 

1. Edit /var/www/html/prestashop1615/themes/default-bootstrap/js/global.js

2. Add below code after  $(document).ready(function(){

 

    $('#header_logo').css("width", "50% ");

    $('#header_logo').css("margin-left", "25% ");

    $('#header_logo > a').css("margin-left", "20% ");

    $('#header_logo > a').css("display", "inherit");

    $('#search_block_top').css("width", "30%");

    $('#search_block_top').css("margin-left", "35%");

    $('.shopping_cart').css("margin-top", "-258px");

    $('.shopping_cart').css("margin-right", "50px");

[dizz]

Hello,

this is something interesting (which is btw. completely out of my knowledge...)

On large screen, it is looks promising for the logo and bar.

 

 

On small screen, it doesn t survive the responsive design.

 

 

Is it possible to do this depending on media size?

 

Well, maybe I can derive the solution also from this (but it is only about the logo, not searchbar):

https://www.prestashop.com/forums/topic/454921-solved-161-center-and-size-shop-logo/

thanks

d.

[Knowband Plugins]

alternative solution is modifying it via CSS, which will also allow you to use media query

 

Add below code in last line of /themes/default-bootstrap/css/global.css

 

#header_logo{

    width:50% !important;

    margin-left:25%;

}

#header_logo > a{

    display:inherit;

    margin-left:20%;

}

#search_block_top{

    width:30%;

    margin-left:35%;

}

.shopping-cart{

margin-top:-258px;

margin-right:50px;

}

[dizz]

Yes! This is it, putting the code from @Knowband  into global.css into the right @media section is the right way!

Thank you all for your help

dirk

[Knowband Plugins]

Yes! This is it, putting the code from @Knowband  into global.css into the right @media section is the right way!

Thank you all for your help

dirk

 

Most welcome. Glad we could help.