Help needed to move positions of modules

[TobyJulien]

HI, i've tried to play around with the positions but so far have no luck to get what i want where i want them. 

 

I would really appreciate any help to guide me on the right way.

 

1) HEADER

 

I want to move the logo to the middle (i assume i will have to change this in the css file? and the search box up to the left side of the header banner.

 

2) FOOTER

 

I want to move the Customer reinsurance block out of the footer, preferably above the footer.

 

3) Product Page

 

The short description/price etc is currently below the product photos. I want them next to the photos (on the right)

 

4) I want the more info (longer description) to be directly below the images/short description & above all the cross selling blocks. 

 

I have attached images and my website is www.thegeishapearl.com

 

Please help! : )

 

Thanks so much in advance!

[razaro]

Backup all files first, before any change.

 

1) Try this code, not sure exactly in what files, because your CCC options are on and css is compressed,

but probably global.css and blocksearch.css in theme css folder.

#header_right {
margin-top: 15px;
font-size: 11px;
float: right;
height: 165px;
width: 100%;
color: #aeaeae;
}

element.style {
}

#header_logo {
position: absolute;
right: 0;
left: 0;
top: 25px;
height: 141px;
display: inline-block;
margin: 10px auto;
text-align: center;
background: url(http://www.thegeishapearl.com/themes/pt_chaussure/css/../img/bg-logo1.png) center center no-repeat;
}

#search_block_top {
position: absolute;
top: 53px;
left: 0;
}

That should give you 

 

 

But that is quickest solution that is not responsive so additional css changes are needed or modification of tpl files and theme.

 

 

2) Go to back office and in Module > Positions find footer hook section. There drag/move block reassurance to first place.

 

3) Product page looks ok on 1920px width but on smaller screens it shows like that . Try to find and change in product.css this code

#pb-right-column {
float: left;
width: 45%;
margin-right: 2%;
}

#pb-left-column {
float: left;
width: 52% !important;
}

Note important is added here because of next code, not sure again where it is

two_column #pb-left-column, .two_column .grid_16 #pb-left-column, .three_column .grid_15 #pb-left-column, .three_column .grid_16 #pb-left-column {
width: 100%;
margin-top: 20px;
}

That set pb-left-column to 100% but only if width of screen is less then 1280.

 

4) That needs bit code change in product.tpl  find 

{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

and move it bit down in code almost to end  just before last closing div tag.

Edited October 23, 2015 by razaro (see edit history)