Table Style Footer, Ugent Help

[hardwiredtemplates]

Hello Friends, I do not know much about php nor html, been reading w3.org and google for assitance. I also searched the forums and could not find any help with this.

What I would like is a table style footer as in the these sites. http://www.cooltechcentral.com/ http://www.computerbros.com/ and www.trendsdepot.com. Now all these sites are using Zen cart so I know it can be done, just don't know how to start or where.

Your assistance is appreciated. Thank you all in Advance.

[clydejones]

Hello Friends, I do not know much about php nor html, been reading w3.org and google for assitance. I also searched the forums and could not find any help with this.

What I would like is a table style footer as in the these sites. http://www.cooltechcentral.com/ http://www.computerbros.com/ and www.trendsdepot.com. Now all these sites are using Zen cart so I know it can be done, just don't know how to start or where.

Your assistance is appreciated. Thank you all in Advance.

You can do this by styling the unordered lists <li> contents to display as columns.

Here are a couple of resources that might help:

cssplay.co.uk/menu/column.html

bleepingcomputer.com/forums/topic56091.html

[hardwiredtemplates]

Thank you clyde for the prompt reply. I am off to reading and learning from those resources. Any other methods this can be accomplished or this is the only way? If this is the only way any other useful resources from a resourceful man By the way I think i said this many times already and here it is again "I am using your templates and love it"

[clydejones]

Thank you clyde for the prompt reply. I am off to reading and learning from those resources. Any other methods this can be accomplished or this is the only way? If this is the only way any other useful resources from a resourceful man By the way I think i said this many times already and here it is again "I am using your templates and love it". What do you think of it now?

The sites you mentioned have used tables to achieve their look.

[hardwiredtemplates]

The sites you mentioned have used tables to achieve their look.

This is what I would like to achieve as well. I've searched for "3 column table footer" "table footer" e.t.c. and everything points to css. Any help when I can start this. and links?

p.s. For seo Is it better to use the first approach or use a table?

[clydejones]

This is what I would like to achieve as well. I've searched for "3 column table footer" "table footer" e.t.c. and everything points to css. Any help when I can start this. and links?

p.s. For seo Is it better to use the first approach or use a table?

You already have everything you need to set this up.

Open includes/templates/YOUR_TEMPLATE/common/tpl_footer.php

The section you would look for is here:

<div id="navSupp">
<ul>
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
<?php } ?>
</ul>
</div>

Edit this section as indicated by the highlights

<div id="navSupp">
<ul id="liststyles">
<li class="col1a"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
<?php } ?>
</ul>
</div>

You'll need to add the following to:
includes/templates/YOUR_TEMPLATE/css/stylesheet.css

#listyles {
display: block;
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
}

#listyles li {
line-height: 1.5em;
}

li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0;
}

li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 13em;
}

li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 25em;
}

[clydejones]

You can see how this is implemented here:

You already have everything you need to set this up.

Open includes/templates/YOUR_TEMPLATE/common/tpl_footer.php

The section you would look for is here:

<div id="navSupp">
<ul>
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
<?php } ?>
</ul>
</div>

Edit this section as indicated by the highlights

<div id="navSupp">
<ul id="liststyles">
<li class="col1a"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
<?php } ?>
</ul>
</div>

You'll need to add the following to:
includes/templates/YOUR_TEMPLATE/css/stylesheet.css

#listyles {
display: block;
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
}

#listyles li {
line-height: 1.5em;
}

li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0;
}

li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 13em;
}

li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 25em;
}

[hardwiredtemplates]

Thank you so much clyde I am starting to understand this. I should have mentioned in my last post that I copied the code from this link http://www.bleepingcomputer.com/forums/topic56091.html and uploaded to: http://fashionfavourites.com/table.html. What I have difficulties with or do not understand is how i can But a dotted vertical line after each column (so each column is separate from others...hope you understand what I mean)

ps Can i work on this file http://fashionfavourites.com/table.html then once its looking great copy the file and append it to my existing css file? Is that a good approach, I just don't want the site to fall apart or accidentally delete a character from my existing CSS file.

[clydejones]

Thank you so much clyde I am starting to understand this. I should have mentioned in my last post that I copied the code from this link http://www.bleepingcomputer.com/forums/topic56091.html and uploaded to: http://fashionfavourites.com/table.html. What I have difficulties with or do not understand is how i can But a dotted vertical line after each column (so each column is separate from others...hope you understand what I mean)

ps Can i work on this file http://fashionfavourites.com/table.html then once its looking great copy the file and append it to my existing css file? Is that a good approach, I just don't want the site to fall apart or accidentally delete a character from my existing CSS file.

take a look at the highlighted additions to the css declarations.

You may need to play around with the width declarations to get the look just right.

li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0;
width:20%;
border-right:1px dotted #000;
}

li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 14em;
width:25%;
border-right:1px dotted #000;
}

li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 31em;
width:25%;
}

[hardwiredtemplates]

Thank you once again clyde you been great help. Sorry for the late response I been a little occupied recently. Well I am on my way to getting this table working a little issue I have is: Changing the color of the links and removing the underline. I've tried so many things but no matter what I do It won't change. Also If I can control the color of the Heading (ie. Customer care) would be great help.

the link is www.fashionfavourites.com/table.html