Layout Customization

**Meshach** · 17 Mar 2009, 07:51 PM

Ahh..

I see.

Try putting clear:left; on the banner.

**tony_sar** · 17 Mar 2009, 09:00 PM

my suggestion would be to create a <div></div> tag in your footer where you want your SSL images to appear. currently images are applied directly into body tag .

make sure you also add ID as well
<div id = "footerLogo"></div>

this way using CSS you can control position of your images without effecting other elements such as your banner .

**limelites** · 17 Mar 2009, 10:47 PM

Hi,

I'm no expert here but I took a quick look at your page source and I see you're using a few position: absolute commands.... Those are no good for you as the position of the object will change from screen size to screen size.

On my 24" monitor, your footer banner is aligned way off your main page to the left.

Try replacing the word 'absolute' with 'relative' and then re-postion the coordinates.

I'm not sure why you're using a position command to control your banner though? Why not wrap it in <center></center> tabs?

This is my tpl_footer.php file for limelites.co.uk which achieves what you're looking for:

PHP Code:


<!--bof- site copyright display -->

<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?> Designed by <a target="_blank" href="URL_TO_YOUR_HOMEPAGE">YOUR_STORE</a></div>

<!--eof- site copyright display -->



<!--bof- CARDS display -->

<center>

<a href="URL_TO_PAYMENTS_PAGE"><?php echo zen_image(DIR_WS_TEMPLATE.'images/YOUR_CARDSIMAGE.jpg'); ?></a>

</center> 

<!--eof- CARDS display -->

**faithtong** · 18 Mar 2009, 08:22 AM

Originally Posted by Meshach

Ahh..

I see.

Try putting clear:left; on the banner.

I have put this clause in my css stylesheet as below,
#bannerSix (
clear:left;
)

But it still can't work. HELP~~~~

**faithtong** · 18 Mar 2009, 08:24 AM

Originally Posted by limelites

Hi,

I'm no expert here but I took a quick look at your page source and I see you're using a few position: absolute commands.... Those are no good for you as the position of the object will change from screen size to screen size.

On my 24" monitor, your footer banner is aligned way off your main page to the left.

Try replacing the word 'absolute' with 'relative' and then re-postion the coordinates.

I'm not sure why you're using a position command to control your banner though? Why not wrap it in <center></center> tabs?

This is my tpl_footer.php file for limelites.co.uk which achieves what you're looking for:

PHP Code:


<!--bof- site copyright display -->

<div id="siteinfoLegal" class="legalCopyright"><?php echo FOOTER_TEXT_BODY; ?> Designed by <a target="_blank" href="URL_TO_YOUR_HOMEPAGE">YOUR_STORE</a></div>

<!--eof- site copyright display -->



<!--bof- CARDS display -->

<center>

<a href="URL_TO_PAYMENTS_PAGE"><?php echo zen_image(DIR_WS_TEMPLATE.'images/YOUR_CARDSIMAGE.jpg'); ?></a>

</center> 

<!--eof- CARDS display -->

Hi,

I tried to set all to "relative" eventually it messed up all the position and still, the third image (SSL logo) is not appearing!

**faithtong** · 18 Mar 2009, 08:30 AM

Originally Posted by tony_sar

my suggestion would be to create a <div></div> tag in your footer where you want your SSL images to appear. currently images are applied directly into body tag .

make sure you also add ID as well
<div id = "footerLogo"></div>

this way using CSS you can control position of your images without effecting other elements such as your banner .

Hello,

I put all these 3 objects (paypal logo, bannersix & ssl logos) in tpl_footer.php as below,

PHP Code:


<!--bof paypal image display -->

<img src="images/paypal_horizontal.gif" border="1" width="155" height="66" alt="paypal solution" align="left" valign="center">

<!--eof paypal image display -->



<!--bof-banner #6 display -->

<?php

  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {

    if ($banner->RecordCount() > 0) {

?>

<div id="bannerSix" style="position:absolute; left:420px; width:468px; height:60px;" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>

<?php

    }

  }

?>

<!--eof-banner #6 display -->



<!--bof SSL logo display -->

<html>

<IMG STYLE="position:absolute; left:893px; width:85px; height:46px; border:1px;" SRC="images/ssl.gif" ALT="SSL Secured Site"></html>

<!--eof SSL logo display -->

Is there anyway to improve this? Sorry, I am really new and not familiar with all these codings. Whenever I need a code, I just google it then paste to my file. I don't understand them well and that's why I kept asking stupid question!

**faithtong** · 18 Mar 2009, 08:45 AM

Hi,

BTW, I found out that I can't navigate to the link of my first item appeared at my left Category Box in Firefox. No matter which item (Categories_Products or any sideboxes) move to the top, it will not show the link in Firefox, when the mouse move over, it will not show the hover color either.

Any idea how to to fix this bug?

**limelites** · 18 Mar 2009, 09:49 AM

Originally Posted by faithtong

Hi,

BTW, I found out that I can't navigate to the link of my first item appeared at my left Category Box in Firefox. No matter which item (Categories_Products or any sideboxes) move to the top, it will not show the link in Firefox, when the mouse move over, it will not show the hover color either.

Any idea how to to fix this bug?

One thing at a time FaithTong, let's fix your footer first :-) Can you copy and paste your entire tpl_footer.php file code here? This should be relatively simple to fix first.

**faithtong** · 20 Mar 2009, 01:42 AM

Dear all,

Thanks for your help and replies, my problems are solved!

I don't know how I can express my thankfulness to all of you, especially Tony! Thank you so much,

may God bless all of you abundantly!!!!

Thread: Layout Customization

Thread Tools

Search Thread

Display

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Re: Layout Customization

Similar Threads

page layout customization contractors?

Layout box customization..

Posting Permissions