Jump to content

Homepage Adaptations- Right/Left Column


Recommended Posts

Hello everyone.. my website is:, plz take a look of it

 

1)as you can see there are two featured products and in the right column, I have a search tool and special block. I want to have 3 featured products in the row.

My theme has a right and left column, but I don't want to use them in the homepage content..

Is that possible?

 

2)in the bottom of the homepage, you can see the newsletter, vip and soicalise block.. It should not look like this...

 

3) I have got a new nivo slider, but I cannot hook it in the top of pages, only as a "homepage content". Maybe beacuse there is no space to it?

 

need some help thanx :-)

Edited by celina1982 (see edit history)

Share this post


Link to post
Share on other sites

maybe you can try to either hide the right column at home page by editing your footer.tpl

look for:

 

<!-- Right -->

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

 

and change to:

 

<!-- Right -->

{if $page_name != 'index'}

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

{/if}

 

but first try to give exception to the modules at home page (search & specials), go to modules -> positions, look for the modules in the right column -> edit the module and add an exception for index so it will not show it at home page.

 

Also you need to wider the center column so you will need to edit header.tpl and look for:

 

<!-- Center -->

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

 

and change to:

 

<!-- Center -->

{if $page_name == 'index'}

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

{else}

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

{/if}

 

maybe you will need to edit some css for the featured product.

 

anyway just check it and see if its working or not

 

Hope this helps.

  • Like 1

Share this post


Link to post
Share on other sites

I have been told it is dirty, but you can use an if statement in smarty to rearrange your layout based on what page is being displayed.

 

 

Edit:

Opps I see that is what you were trying.

Share this post


Link to post
Share on other sites

can u post your header.tpl file

and also when you say at the bottom of the page its not suppose to look like that, how do you want it to look like?

and for your nivo slider try to add to the module php file:

 

public function hookdisplayTop($params)

{

return $this->hookLeftColumn($params);

}

Share this post


Link to post
Share on other sites

My header. tpl is :

 

 

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

<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="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 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 $page_name == "product"}

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

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

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

{/foreach}

{/if}

{if empty($theme_settings)}

{$theme_settings.logo_font = ''}

{$theme_settings.heading_font = ''}

{$theme_settings.text_font = ''}

{$theme_settings.back_color = ''}

{$theme_settings.pattern = ''}

{$theme_settings.logo_type = ''}

{$theme_settings.logo_size = ''}

{$theme_settings.logo_text = ''}

{$theme_settings.slogan = ''}

{/if}

{include file="$tpl_dir./settings.tpl"}

{$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 isset($theme_settings.column)}{$theme_settings.column}ColumnPage{/if}" {if isset($theme_settings.back_color)}style="background:#{$theme_settings.back_color}"{/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 class="{if isset($theme_settings.pattern)}back_{$theme_settings.pattern}{/if}" id="pattern">

<div id="header">

<div id="header_content">

{$HOOK_TOP}

<div id="header_logo">

<a href="{$base_dir}" id="logo" class="{if isset($theme_settings.logo_type) && $theme_settings.logo_type == 0}display{else}hide{/if}">

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

</a>

<div id="logo_text" class="{if isset($theme_settings.logo_type) && $theme_settings.logo_type == 1}display{else}hide{/if}">

<a href="{$base_dir}" class="logo"

{if isset($theme_settings.logo_color)}style="color:#{$theme_settings.logo_color}; font-size:{$theme_settings.logo_size}px"{/if}>

{if isset($theme_settings.logo_text)}

{$theme_settings.logo_text}

{/if}

</a>

{if isset($theme_settings.slogan)}

<span class="slogan"{if isset($theme_settings.logo_color)}style="color:#{$theme_settings.logo_color}"{/if}>{$theme_settings.slogan}</span>

{/if}

</div>

</div>

</div>

<div class="clear"></div>

</div>

 

 

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

 

<!-- Header -->

 

<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}

Share this post


Link to post
Share on other sites

plz look at this theme : http://alysum.promokit.eu/en/

I want to have the same nivo slider and the socialize, VIP newsletter block over the footer

 

I have the modules to the nivo slider and the VIP/newsletter , but having problems.. like you see the VIP/newsletter does not look the same as in the alysum.promokit.eu/en/

 

I also want to have 3 featutred products instead of 2.. change the center width!

 

sorry my bad english :-(

 

 

 

I could not find a module.php...

Edited by celina1982 (see edit history)

Share this post


Link to post
Share on other sites

ok....

what do you mean when you said that your website disappeared when you put the code in the header.tpl.

this should work just fine, in order to get what you want, you need to eliminate the right & left column and wider the center column.

so please try again to implant the code i mentioned above.

this is what you have now:

<!-- Center -->

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

{/if}

 

And this is how it will look after the changes:

<!-- Center -->

{if $page_name == 'index'}

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

{else}

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

{/if}

 

make sure you disable cache in your back office and you turn force compile on.

 

do you want the slider to be the same size like in the link you sent?

do you want your socialize,vip etc.. to look exactly like the link you sent i mean identical?

Share this post


Link to post
Share on other sites

once you fix the center column in order to have 3 product in a line just edit file: themes/albedo/css/modules/homefeatured/homefeatured.css

and comment line 4 -> width:611px; so line 4 will look like that: /* width:611px; */

 

about the stuff in the bottom you only missing css for the div's, i can help with that but only after you solve the center column issue

Share this post


Link to post
Share on other sites

when I put the code in header.tpl, I get this error message : The website encountered an error while retrieving http://almodas.dk/index.php. It may be down for maintenance or configured incorrecte

 

and yes I have force compile and disabled cache

 

don't know what is going wrong :-(

 

I just want to have a slider withe these special products and the 3 boxes one with socialize with us, the vip newsletter and then the advertisment box.. they don't have to look exactly the same as the link

Share this post


Link to post
Share on other sites

try to clear your cache manually, cache/smarty/cache & cache/smarty/compile don't forget to keep index.php files in all folders.

also try to turn on error reporting: config/config.inc.php line 29 -> @ini_set('display_errors', 'off'); change to @ini_set('display_errors', 'on');

and see exactly whats the problem.

Share this post


Link to post
Share on other sites

I have got this:

 

 

Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "/home/sichicdk/public_html/almodas.dk/themes/albedo/header.tpl" on line 102 "" unclosed {if} tag' in /home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php:627 Stack trace: #0 /home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(118): Smarty_Internal_TemplateCompilerBase->trigger_template_error('unclosed {if} t...') #1 /home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php(171): Smarty_Internal_SmartyTemplateCompiler->doCompile('<!DOCTYPE html ...') #2 /home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_template.php(187): Smarty_Internal_TemplateCompilerBase->compileTemplate(Object(Smarty_Internal_Template)) #3 /home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_templatebase.php(155): Smarty_Internal_Template->compileTemplateSou in/home/sichicdk/public_html/almodas.dk/tools/smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 627

Share this post


Link to post
Share on other sites

Try to keep the last {/if} so it will look like this

<!-- Center -->

{if $page_name == 'index'}

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

{else}

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

{/if}

{/if}

so you have 2 times {/if} <--- closing if

Share this post


Link to post
Share on other sites

okay I have now fixed it to

 

{if $page_name == 'index'}

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

{else}

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

{/if}

{/if}

so you have 2 times {/if} <--- closing if

 

And and comment line 4 -> width:611px; so line 4 will look like that: /* width:611px; */

 

I can see now that there is only a center column in the homepage

Share this post


Link to post
Share on other sites

Also make changes to footer.tpl:

 

<!-- Right -->

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

 

and change to:

 

<!-- Right -->

{if $page_name != 'index'}

<div id="right_column" class="column grid_2 omega">

{$HOOK_RIGHT_COLUMN}

</div>

{/if}

Share this post


Link to post
Share on other sites

I can see that I have a center column, but I still have 2 products in one line

I have tried to hook the news/vip block again as a homepage content but it still looks wrong

I tried to install the nivo slider but nothing happened!!

 

Yaniv14 but really thank u for your patience :-D

Share this post


Link to post
Share on other sites

for the bottom newsletter, vip add this to your global.css

 

 

/*************** Block Newsletter & Socialize ***************/

#newsletter_block_ext.block {

padding: 18px 0 18px 18px;

border: 1px solid #E4E4E4;

background: white;

overflow: hidden;

}

#newsletter_block_ext .col {

width: 291px;

height: 291px;

float: left;

margin-right: 20px;

border: 1px solid #E4E4E4;

}

#newsletter_block_ext .col.social {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/social_bg.jpg') no-repeat 0 0;

}

#newsletter_block_ext .col .content {

height: 130px;

width: 100%;

position: relative;

margin-top: 161px;

}

#newsletter_block_ext .col .opacity_bg {

width: 100%;

height: 130px;

background: white;

opacity: 0.6;

filter: alpha(opacity=60);

position: absolute;

top: 0;

left: 0;

}

#newsletter_block_ext .col .opaque {

width: 100%;

height: 130px;

position: absolute;

top: 0;

left: 0;

}

#newsletter_block_ext .col .indent {

padding: 10px 10px 10px 27px;

}

#newsletter_block_ext .col h4 {

background: none;

text-transform: none;

font-weight: normal;

text-shadow: none;

padding: 0;

color: #3A3A3C;

font-size: 23px;

}

#newsletter_block_ext .col.nwltr {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/newsletter_bg.jpg') no-repeat 0 0;

}

#newsletter_block_ext .nwltr p {

padding-bottom: 10px;

}

form.newsletter_form {

width: 232px;

height: 35px;

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/newsletter_input.gif') no-repeat 0 0;

}

form.newsletter_form .ind {

padding: 5px 5px 5px 10px;

}

#newsletter_block_ext input.inputNew {

height: 23px;

width: 153px;

border: none;

line-height: 23px;

font: normal 13px Georgia;

color: #999;

background: #F8F8F8;

margin: 1px 0 0 0;

vertical-align: top;

}

#newsletter_block_ext input.minibutton {

height: 26px;

width: 60px;

border: 0;

color: white;

font: normal 14px/26px Georgia;

vertical-align: top;

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/newsletter_button_pas.png') no-repeat 0 0;

background-color: none;

cursor: pointer;

padding: 0;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

#newsletter_block_ext .col.promo {

margin-right: 0;

width: 292px;

}

/*************** End of Block Newsletter & Socialize ***************/

 

make sure you change: newsletter_bg.jpg & social_bg.jpg to your own images (if you want)

Share this post


Link to post
Share on other sites

The only problem you have now is that with grid 9 column you are getting 960px minus 29px padding right & left so you only have 902px left which is not enough to show all the newsletter, vip at the bottom.

 

so just a temporary solution because I need to go, you can just for now change from what you added to the global.css:

#newsletter_block_ext .col {

width: 291px;

height: 291px;

float: left;

margin-right: 20px;

border: 1px solid #E4E4E4;

}

 

to:

 

 

#newsletter_block_ext .col {

width: 270px;

height: 291px;

float: left;

margin-right: 10px;

border: 1px solid #E4E4E4;

}

 

again this is just for now until we change the column width to 960px.

 

If you want to install the nivo slider like that site you send me has, you also need to remove the top slider you have and hook the new nivo slider to displayhome and move it all the way up

Share this post


Link to post
Share on other sites

it looks great, i forgot to add to the **** Block Newsletter & Socialize ***** in the global.css (don't forget to change the social networks links in your module tpl or BO) ---> add this to your global.css

 

#newsletter_block_ext .col.social:hover,

#newsletter_block_ext .col.nwltr:hover,

#newsletter_block_ext .col.promo img:hover {

opacity: 0.9;

}

#newsletter_block_ext .col.social ul {

padding-top: 10px;

}

#newsletter_block_ext .col.social ul li {

width: 37px;

margin-right: 20px;

float: left;

}

#newsletter_block_ext .col.social li.youtube a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat 0 0;

}

#newsletter_block_ext .col.social ul li a {

display: block;

width: 37px;

height: 37px;

}

#newsletter_block_ext .col.social p {

padding:0

}

#newsletter_block_ext .col.social li.twitter a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -37px 0;

}

#newsletter_block_ext .col.social li.facebook a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -74px 0;

}

#newsletter_block_ext .col.social li.google_plus {

margin: 0;

}

#newsletter_block_ext .col.social li.google_plus a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -111px 0;

}

#newsletter_block_ext .col.social li.facebook a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -74px 0px transparent;

}

#newsletter_block_ext .col.social li.youtube a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll 0px 0px transparent;

}

#newsletter_block_ext .col.social li.twitter a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -37px 0px transparent;

}

#newsletter_block_ext .col.social li.google_plus a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -111px 0px transparent;

}

 

 

Don't forget that all the images you are reading from alysum website so make sure you download the images to your server and change the address to read from your server.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Since you've been so generous here, i've dropped you a PM, please let me know if you like me start a new thread

 

S

it looks great, i forgot to add to the **** Block Newsletter & Socialize ***** in the global.css (don't forget to change the social networks links in your module tpl or BO) ---> add this to your global.css

 

#newsletter_block_ext .col.social:hover,

#newsletter_block_ext .col.nwltr:hover,

#newsletter_block_ext .col.promo img:hover {

opacity: 0.9;

}

#newsletter_block_ext .col.social ul {

padding-top: 10px;

}

#newsletter_block_ext .col.social ul li {

width: 37px;

margin-right: 20px;

float: left;

}

#newsletter_block_ext .col.social li.youtube a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat 0 0;

}

#newsletter_block_ext .col.social ul li a {

display: block;

width: 37px;

height: 37px;

}

#newsletter_block_ext .col.social p {

padding:0

}

#newsletter_block_ext .col.social li.twitter a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -37px 0;

}

#newsletter_block_ext .col.social li.facebook a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -74px 0;

}

#newsletter_block_ext .col.social li.google_plus {

margin: 0;

}

#newsletter_block_ext .col.social li.google_plus a {

background: url('http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons.png') no-repeat -111px 0;

}

#newsletter_block_ext .col.social li.facebook a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -74px 0px transparent;

}

#newsletter_block_ext .col.social li.youtube a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll 0px 0px transparent;

}

#newsletter_block_ext .col.social li.twitter a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -37px 0px transparent;

}

#newsletter_block_ext .col.social li.google_plus a:hover {

background: url("http://alysum.promokit.eu/modules/blocknewsletter_ext/img/icons_act.png") no-repeat scroll -111px 0px transparent;

}

 

 

Don't forget that all the images you are reading from alysum website so make sure you download the images to your server and change the address to read from your server.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More