Jump to content

How do i change the layout to this?


Recommended Posts

I have now tried for a while to change the layout of my shop to something like this, with no luck:

 

layouthelp_zpseeba24f8.jpg

 

I would like the left column to be hidden on the frontpage and shown in the category pages. The slider and blockfeatured products should also be streched to a width of 980px instead of 535px. How do i do this and in which files do i do it? :-)

 

Thanks in advance

Edited by OliverEggertsen (see edit history)
Link to comment
Share on other sites

okay, first step: edit header.tpl file (from your template directory)

 

{if $page_name != 'index'}
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
{/if}

code above will show left column on all pages instead the "index" which mean homeapge.

 

do the same for right column in the footer.tpl file.

 

btw. you use non default theme?

Link to comment
Share on other sites

  On 6/12/2013 at 10:06 PM, vekia said:

okay, first step: edit header.tpl file (from your template directory)

 

{if $page_name != 'index'}
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
{/if}

code above will show left column on all pages instead the "index" which mean homeapge.

 

do the same for right column in the footer.tpl file.

 

btw. you use non default theme?

 

 

I inserted the code at the buttom of the .tpl but the left column still appears on the index page.

I would also like the right column removed completely.

I use the default theme :-)

Link to comment
Share on other sites

if you're doing the template works, turn force compilation on and cache off under the preferences > performance tab in your BO.

 

if you want to remove right column, go to the: footer.tpl and remove:

<div id="right_column" class="column grid_2 omega">
 {$HOOK_RIGHT_COLUMN}
</div>

 

let me know if it works for you (both left and right columns)

Link to comment
Share on other sites

The right column is fixed now. The problem is the left column. Here is the code:

 

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

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie6 " lang="en"> <![endif]-->

<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->

<!--[if IE 8]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->

<!--[if gt IE 8]> <html lang="fr" class="no-js ie9" lang="en"> <![endif]-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<head>

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

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta http-equiv="content-language" content="{$meta_language}" />

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

<script type="text/javascript">

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}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

 

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

{if !$content_only}

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

<div id="restricted-country">

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

</div>

{/if}

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

 

<!-- Header -->

<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_6 omega">

{$HOOK_TOP}

</div>

</div>

 

<div id="columns" class="grid_9 alpha omega clearfix">

<!-- Left -->

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

<div id="center_column" class=" grid_5">

{/if}

{if $page_name != 'index'}

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

{/if}

Link to comment
Share on other sites

you've got two left column instances in the code:

<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
<!-- Center -->
<div id="center_column" class=" grid_5">
{/if}
{if $page_name != 'index'}
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
{/if}

 

 

remove first one, use this:

 

{*
* 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 license@prestashop.com 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 <contact@prestashop.com>
*  @copyright  2007-2013 PrestaShop SA
*  @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">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie6 " lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]> <html lang="fr" class="no-js ie9" lang="en"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="{$meta_language}" />
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
<script type="text/javascript">
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}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}
</head>
<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">
{if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div>
{/if}
<div id="page" class="container_9 clearfix">
<!-- Header -->
<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_6 omega">
{$HOOK_TOP}
</div>
</div>
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
{if $page_name != 'index'}
<div id="left_column" class="column grid_2 alpha">
{$HOOK_LEFT_COLUMN}
</div>
{/if}
<!-- Center -->
<div id="center_column" class=" grid_5">
{/if}

Link to comment
Share on other sites

you can do this in css and in back office, you can define there (in module configuration page) width & height param.

 

ps, i think that you also have to change the class param for center column "grid_5" to "grid_9" - on homepage, and on other pages - to "grid_7" (you can achieve this with the same if condition)

Link to comment
Share on other sites

I changed the width of the slider in the backoffice, but it seems like only the pic widened but not the frame of the slider module. I tried looking at it in firebug and apparently i have to modify some file that firebug can't locate. where do i find element.style?

 

Skaeligrmbillede2013-06-13kl190819_zpsdcbb7bc6.png

 

And why and where do i have to change the class param? :-)

Link to comment
Share on other sites

×
×
  • Create New...