Homepage Adaptations- Right/Left Column

celina1982 · November 29, 2012

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 April 10, 2013 by celina1982 (see edit history)

yaniv14 · November 29, 2012

what is your site url?

benjamin utterback · November 29, 2012

Hello yaniv14, I believe the url is almodas.dk

celina1982 · November 29, 2012

the url is . www.almodas.dk :-)

yaniv14 · November 29, 2012

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

look for:

{$HOOK_RIGHT_COLUMN}

</div>

and change to:

{if $page_name != 'index'}

{$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:

and change to:

{if $page_name == 'index'}

{else}

{/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.

celina1982 · November 29, 2012

hey yaniv14, thank u for ur help.. But its not working, when I changed in the header.tpl, the website disappeared...

Dh42 · November 29, 2012

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.

benjamin utterback · November 29, 2012

Moderation Actions - Changed Title and moved to correct forum

yaniv14 · November 29, 2012

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);

}

celina1982 · November 30, 2012

My header. tpl is :

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

{/if}

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

{/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>

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

{$HOOK_TOP}

</a>

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

{$HOOK_LEFT_COLUMN}

</div>

{/if}

celina1982 · November 30, 2012

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 November 30, 2012 by celina1982 (see edit history)

yaniv14 · November 30, 2012

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:

{/if}

And this is how it will look after the changes:

{if $page_name == 'index'}

{else}

{/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?

yaniv14 · November 30, 2012

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

celina1982 · November 30, 2012

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

yaniv14 · November 30, 2012

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.

celina1982 · November 30, 2012

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

yaniv14 · November 30, 2012

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

{if $page_name == 'index'}

{else}

{/if}

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

celina1982 · November 30, 2012

okay I have now fixed it to

{if $page_name == 'index'}

{else}

{/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

yaniv14 · November 30, 2012

I don't see you homefeatured.css loading, did you change anything in homefeatured module folder?

celina1982 · November 30, 2012

I wrote this : /* width:611px; * in line 4

yaniv14 · November 30, 2012

Also make changes to footer.tpl:

{$HOOK_RIGHT_COLUMN}

</div>

and change to:

{if $page_name != 'index'}

{$HOOK_RIGHT_COLUMN}

</div>

{/if}

yaniv14 · November 30, 2012

you didn't close it correctly

you start with /* and you finish with */

you didn't finish with " / "

celina1982 · November 30, 2012

ohh sorry I have now close it correctly.. I have changed the footer.tpl as you wrote to me. but there is </div> in line 10 and 14

yaniv14 · November 30, 2012

don't touch the other </div>'s just change exactly the lines i mentioned.

so far it's close to what you want?

celina1982 · November 30, 2012

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

yaniv14 · November 30, 2012

make sure you refresh your browser, press (ctrl+f5) few times. because i see 3 products in one line in my browser

Edited November 30, 2012 by yaniv14 (see edit history)

yaniv14 · November 30, 2012

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)

celina1982 · November 30, 2012

yaniv14 thank you very much, the 3 feautred products are perfect now :-))))))))

yaniv14 · November 30, 2012

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

celina1982 · November 30, 2012

Thaaaaaaaaaaaaaaaaaaank you Yaniv14, God bless you :-D, Have a nice day... thank you very much. you are genious

the newsletter is now perfect :-DD

take care

yaniv14 · November 30, 2012

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.

celina1982 · December 4, 2012

Thank u very Much :-)

jincmd · December 19, 2012

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.

Homepage Adaptations- Right/Left Column

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

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

Create an account or sign in to comment

Create an account

Sign in