OliverEggertsen Posted June 12, 2013 Share Posted June 12, 2013 (edited) I have now tried for a while to change the layout of my shop to something like this, with no luck: 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 June 12, 2013 by OliverEggertsen (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted June 12, 2013 Share Posted June 12, 2013 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 More sharing options...
OliverEggertsen Posted June 12, 2013 Author Share Posted June 12, 2013 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 More sharing options...
vekia Posted June 13, 2013 Share Posted June 13, 2013 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 More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 apparently, now there are two left columns right next to each other when i go to the category pages Link to comment Share on other sites More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 i'll try it :-) Link to comment Share on other sites More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 It still doesn't work for me. The left column is still there in the index page, and in the category page there what seems to be two left columns next to each other. Link to comment Share on other sites More sharing options...
vekia Posted June 13, 2013 Share Posted June 13, 2013 can you paste your code form header.tpl footer.tpl ? i will check it on my own demo store. Link to comment Share on other sites More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 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 More sharing options...
vekia Posted June 13, 2013 Share Posted June 13, 2013 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 More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 It worked! thanks :-) Now i would like the slider and featuredproductsblock in the index page to be centered and spread to a width of 980px. Shall i do this in css? Link to comment Share on other sites More sharing options...
vekia Posted June 13, 2013 Share Posted June 13, 2013 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 More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 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? And why and where do i have to change the class param? :-) Link to comment Share on other sites More sharing options...
vekia Posted June 13, 2013 Share Posted June 13, 2013 use this code for center column (in header.tpl file) <div id="center_column" class="{if $page_name != 'index'}grid_7{else}grid_9{/if}"> Link to comment Share on other sites More sharing options...
OliverEggertsen Posted June 13, 2013 Author Share Posted June 13, 2013 Thank you! :-) Link to comment Share on other sites More sharing options...
Recommended Posts