Trying to achieve modern footer appearance.

Zen Cart v1.3.8a clean install. No add-ons have been installed. Server is running PHP 5.2.8 and MySQL 5.0 configured to have all green during pre-installation check. I did look through the Tutorials but as for searching the forums, I wasn't quite sure how to word this inquiry. Just wanted to first point out, I can't use return for some reason while making a post so I apologize if this paragraph jumps from topic to topic randomly. I was wondering how I could modify Zen Cart to allow a three columned footer appearance like most modern sites. Here are two examples, Aqua Desiree and New Egg (granted New Egg has 5 columns where as I only need three like the former site). As you can see they aren't exactly the copyright portion of the footer but appear right above it, I guess some what like a site map or shortcuts if you don't want too many tabs at the top but organized into columns. So how can I achieve this appearance on Zen Cart? Thanks in advance for any help Zenners. Warm Regards, Jason Xiao

Use div Id's that exist or create ones and a total of 3. Define one as a class of .back, another without a class and last one as a class of .forward.

Through css you give each a width of say 32%.
The back will align left the forward will align right and when in proper order the center will be centered

Hey kobra,

I have another site and it has the same setup; JxH Network. Here is the code I used:

<div id="footer">
        <div id="footer-left">
            <h1 class="green">CONTACT US</h1>
            <ul>
                <li>
                <div id="div_initiate" style="position:absolute; z-index:1; top: 40%; left:40%; visibility: hidden;">
                    <a href="javascript:Live.initiate_accept();"><img src="http://jxhnetwork.com/livechat/templates/G/images/initiate.gif" border="0"></a>
                    <br>
                    <a href="javascript:Live.initiate_decline();"><img src="http://jxhnetwork.com/livechat/templates/G/images/initiate_close.gif" border="0"></a>
                </div>
                <script type="text/javascript" language="javascript" src="http://jxhnetwork.com/livechat/class/js/include.php?live&text"></script></li>
                <li>E-Mail: [email protected]</li>
                <li>MSN: [email protected]</li>
            </ul>
        </div>
        <div id="footer-middle">
            <h1 class="green">COMPANY INFO</h1>
            <ul>
                <li><a href="#">RSS Feed</a></li>
                <li><a href="#">Affiliates</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Privacy Policy</a></li>
            </ul>
        </div>
        <div id="footer-right">
            <h1 class="green">AFFILIATES</h1>
            <ul>
                <li><a href="#">Site Name</a></li>
                <li><a href="#">Site Name</a></li>
                <li><a href="#">Site Name</a></li>
            </ul>
        </div>
    </div>
```The CSS rules are as follows:

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-color: #121212;
background-position: top;
height: 250px;
padding-bottom: 5px;
}
#footer h1 {
font-size: 18px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 0px 0px 3px 0px;
border-bottom: dotted;
border-bottom-color: #333333;
}
#footer ul {
list-style-type: none;
font-size: 13px;
}
#footer ul li {
line-height: 26px;
border-bottom: dotted;
border-bottom-color: #333333;
text-decoration: none;
color: #666666;
display: block;
padding: 0px 10px;
}
#footer ul li a {
text-decoration: none;
color: #666666;
display: block;
}
#footer ul li a:hover {
background-color: #212525;
color: #FFCC00;
}
#footer-left, #footer-middle, #footer-right {
float: left;
width: 301px;
padding: 20px;
}

Thanks for the response kobra.

Warm Regards,
Jason Xiao

Try looking at the structure for tpl_footer.php
and styles are added to your stylesheet.css

Would my codes as is be fine or are there modification needed for it to display on Zen Cart properly?

• Jason Xiao

I would have to put it up the same as you to answer this