Toggle sidebar

A Yahoo! Store Custom Footer!

  • You DO NOT need an account in order to download the content that we host....ONLY make an account if you plan to be an ACTIVE member.
  • We DO NOT Allow Multiple Accounts, those people found to have more than one linked to their IP address Will be Banned.
Stunod

Stunod

Co-Owner
Staff member
VIP
Co-Owner
Jun 23, 2016
1,046
113
StunodRacing
A Yahoo! Store Custom Footer!

49257

For TotallyMotorsports.com I designed a custom footer with a little HTML and css magic! I wrote this for Jeremy at Dimplesshop.com and have decided to share it with you now!

Edit the store or your custom default template and add the following rtml edits to your template!

Now you will need to add the extension to the “Variables”. Click on the variables and add a custom variable. Give it “footer” with out quotes with a big text area selected. After you make in and the “footer” field is in your variables page, we will need to add the html to the message block! Copy the following code into that block and be sure to edit the html to fit your store.

HTML: 
<link href="footer-style.css" rel="stylesheet" type="text/css" />
<div id="footer"><div id="footer" align="center">

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<!--Start Col -->

<div>
<strong>
<div>Col. Name Here</div>
</strong><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
<a href="yourlink.html">Your link Here</a><br>
</div>

<!-- End Col -->

<div id="footer-copy-left"> <div id="footer-left"><a href="index.html">Home</a> | <a href="info.html">About Us</a> | <a href="privacypolicy.html">Privacy Policy</a> | <a href="#" onclick="Popup=window.open('http://caligrafx.com/clients/contactform/','Popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no, width=600,height=625,left=230,top=5'); return false;">Contact Us</a> | <a href="ind.html">Site Map</a> | <a href="findus.html">Find Us</a> | <a href="https://order.store.yahoo.net/cgi-bin/wg-order?yhst-79301798698892">Shopping Cart</a></div>
<div id="footer-copy">Copyright &copy; 2010 <a href="http://www.TotallyMotorsports.com/">TotallyMotorsports.com</a>. All rights reserved.</div>
</div>
</div><span id="copyright"></span></div>

Now that you have the variables in place into the RTML template that you are using and have the HTML inside of it with your own links and names we will now need to assign it the style sheet.

Copy and paste the following css code into the one of the css documents in the store editor. It shouldn’t matter witch one you paste it in. I have my pasted in my “css-base.css”

CSS: 
/*** START FOOTER ***/
#footer {
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
    margin-top:15px;
    clear:both;
    zoom:1;
    background-color: #7c252e;
    background-repeat:repeat-x;
    background-position:top;
    background-image: url(http://site.yourstoreurl.com/images/footer.jpg);
    height: 230px;
}
.footer-col {
    background:transparent;
    color:#f0ac9f;
    display:block;
    font-weight:bold;
    font-size:11px;
    padding:10px 5px 5px 10px;
    text-align:left;
    float: left;
    width: 147px;
    height: 185px;
}
#footer a:link {
    background:transparent;
    color:#f0ac9f;
    text-decoration:none;
}
#footer a:visited {
    background:transparent;
    color:#f0ac9f;
    text-decoration:none;
}
#footer a:hover {
    background:transparent;
    text-decoration:underline;
    color: #f0b414;
}
#footer-left {
    color: #f0ac9f;
    text-align: left;
    font-size: 12px;
    float: left;
    padding-left: 15px;
    width: 499px;
    padding-top: 10px;
}
#footer-left a:link {
    color: #f0ac9f;
    text-align: left;
    font-size: 12px;
    text-decoration:none;
}
#footer-left a:visited {
    color: #f0ac9f;
    text-align: left;
    font-size: 12px;
    text-decoration:none;
}
#footer-left a:hover {
    color: #f0b414;
    text-align: left;
    font-size: 12px;
    text-decoration:underline;
}
#footer-copy {
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
    float: right;
    padding-right: 15px;
    padding-top: 10px;
}
#footer-copy a:link{
    color: #FFFFFF;
    font-size: 12px;
    text-decoration:none;
}
#footer-copy a:visited{
    color: #FFFFFF;
    font-size: 12px;
    text-decoration:none;
}
#footer-copy a:hover{
    color: #f0b414;
    font-size: 12px;
    text-decoration:underline;
}
#footer-security {
    width: 100%;
    padding-top: 155px;
    padding-bottom: 6px;
    text-align: center;
}
.col-title {
    color: #f0b414;
    border-bottom: 1px solid;
    border-bottom-color: #f0b414;
    border-bottom-style: dashed;
    border-bottom-width: thin;
    width: 150px;
}
/*** END FOOTER ***/

Be sure to make your own background image if you would like and also change the colors as they will match your site!

I hope you have successfully added this feature to your Yahoo! store. I no longer practice this code and this is a unmaintained tutorial. Use at your own risk. I worked hard on figuring out this code many years ago and didn't want these tutorials to go to waste.
 
You must log in or register to reply here.

Hot Links

Top Bottom