[solved] Full width header Footer and other

Sito Lab · August 13, 2013

hello to everyone as always I apologize for my bad English

I followed this guide http://www.prestasho...ts-of-the-page/

in order to have the same effect, but unfortunately I can not figure out where I'm wrong, I ran to the letter as written by "Vekia", but nothing http://prestashoprov...scana/index.php

ps 1.5.4.1

thanks for your help

Jiten rash (away) · August 13, 2013

ok here is ur complete footer.tpl

{if !$content_only}

</div>

{$HOOK_RIGHT_COLUMN}

</div>

</div>

{$HOOK_FOOTER}

{if $PS_ALLOW_MOBILE_DEVICE}

<p class="center clearBoth" style="padding-bottom:0px;"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>

{/if}<p class="center">copy right info</p>

</div>

</div></div>

{/if}

</body>

</html>

Jiten rash (away) · August 13, 2013

remove this from header.tpl

<div id="page" class="container_9 clearfix" style="width:100%!important"> <-- creating problem

vekia · August 13, 2013

+

uset this:

.container_9 .grid_9 {
width: 100%;
}

in /themes/default/css/grid_prestashop.css (instead width:980px;)

then you will have to edit also widths for left, center, right columns

Jiten rash (away) · August 13, 2013

full width header

</a>

{$HOOK_TOP}

</div>

</div></div>

#xxxxheader {

background:;

border-bottom: 1px solid rgb(206, 206, 206);

left: 0px;

top: 0px;

width: 100%;

z-index: 1100;}

Edited August 13, 2013 by Jiten rash (see edit history)

Sito Lab · August 13, 2013

forgive me, but I do not understand what should I do with this

full width header

<div id="xxxxheader" class="nostylesdefined">

<div id="page" class="container_9 clearfix">



<div id="header" class="grid_9 alpha omega">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

<div id="header_right" class="grid_9 omega">

{$HOOK_TOP}

</div>

</div></div>

#xxxxheader {

background:;

border-bottom: 1px solid rgb(206, 206, 206);

left: 0px;

top: 0px;

width: 100%;

z-index: 1100;}

the central portion still remains to left

Jiten rash (away) · August 13, 2013

u have to add this code above <div id="xxxxheader" class="nostylesdefined"> header.tpl above

so it will look this and end here

{$HOOK_TOP}

</div>

</div></div><---

this u have to add at glabal .csss

#xxxxheader {

background:;

border-bottom: 1px solid rgb(206, 206, 206);

left: 0px;

top: 0px;

width: 100%;

z-index: 1100;}

Jiten rash (away) · August 13, 2013

ok so u created full footer ok ur haeder is also full

Edited August 13, 2013 by Jiten rash (see edit history)

Sito Lab · August 13, 2013

no longer works adding this

perhaps forgive me I can not understand with the translation

u have to add this code above <div id="xxxxheader" class="nostylesdefined"> header.tpl above

<div id="xxxxheader" class="nostylesdefined">

<div id="page" class="container_9 clearfix">

so it will look this and end here

{$HOOK_TOP}

</div>

</div></div><---

this u have to add at glabal .csss

#xxxxheader {

background:;

border-bottom: 1px solid rgb(206, 206, 206);

left: 0px;

top: 0px;

width: 100%;

z-index: 1100;}

Sito Lab · August 13, 2013

my header.tpl

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

{/if}

{if isset($meta_keywords) AND $meta_keywords}

{/if}

var baseDir = '{$content_dir}';

var baseUri = '{$base_uri}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

<div id="xxxxheader" class="nostylesdefined">

<div id="page" class="container_9 clearfix">

</a>

{$HOOK_TOP}

</div>

{$HOOK_LEFT_COLUMN}

</div>

{/if}

Sito Lab · August 13, 2013

thus my header is central, however I would off

Sito Lab · August 13, 2013

ok, I figured out how to center the page, going to the line 37 and 38 grid_prestashop.css, but now could you please tell me how to restrict the right row? is too large

Jiten rash (away) · August 13, 2013

u missed clossing tags

Jiten rash (away) · August 13, 2013

please paste ur header.tpl u got many errors

Sito Lab · August 13, 2013

I'll explain, I wish there remains only the left column, with header wide in full screen, full screen and footer off a large central page in full screen type this site

Edited August 13, 2013 by lui1969 (see edit history)

Jiten rash (away) · August 13, 2013

ok replace header.tpl with this with this

{*

* 2007-2012 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.or...ses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

{/if}

{if isset($meta_keywords) AND $meta_keywords}

{/if}

var baseDir = '{$content_dir}';

var baseUri = '{$base_uri}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

</a>

{$HOOK_TOP}

</div>

{$HOOK_LEFT_COLUMN}

</div>

{/if}

Edited August 13, 2013 by Jiten rash (see edit history)

Sito Lab · August 13, 2013

ok copied everything in header.tpl

now everything is black and I do not see anything

Jiten rash (away) · August 13, 2013

wait let it be

Jiten rash (away) · August 13, 2013

change <div id="header_right" class="grid_9 omega" style="width:980px;">

remove background black

on global.css

u have to add an image back of black color : height150px; width any just add repaet-x;

ur header will be full with top black

Sito Lab · August 13, 2013

I do not have this: <div id="header_right" class="grid_9 omega" style="width:980px;">

but this: <div id="header_right" class="grid_6 omega">

Sito Lab · August 13, 2013

this is the model header.tpl that you have sent me, or do I put my?

Jiten rash (away) · August 13, 2013

thats what i am telling man change

<div id="header_right" class="grid_6 omega"> to

-->

Edited August 13, 2013 by Jiten rash (see edit history)

Sito Lab · August 13, 2013

ok well understood, but my header is central, I would long from left to right, and remove the right column, moving slightly forward left column and widen the central body http://prestashoprova.wesped.es/iotoscana/index.php

Edited August 13, 2013 by lui1969 (see edit history)

Sito Lab · August 13, 2013

I solved starting over all again, because I'm stupid, I did not copy the original files.

if a moderator wants to delete this topic thanks

Jiten rash (away) · August 13, 2013

vekia will soon mark it as solve glad that u solved this..! only a stupid thinks he is wise !

if u think u are stupid u r a wise man ! w.shakespheare

Edited August 13, 2013 by Jiten rash (see edit history)

vekia · August 13, 2013

i will not delete this topic, it's a nice know how realted to changing default theme to full width, very nice

i marked it as [solved]

best regards

[solved] Full width header Footer and other

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites