If you are interested to create a green horizontal menu at the bottom as like in our demo store below:
http://www.vpasp.com/demo700/default.asp
The green menu section we mentioned here is like the example below :
http://www.yourvirtualstore.net/staff/wilson/greenmenu/
You can put this nice horizontal menu links into your VP-ASP 7.00 site.
Below is the steps :
1. Save the four images below into "images" folder of your VP-ASP site :
http://www.yourvirtualstore.net/staff/wilson/greenmenu/images/center_bg.png
http://www.yourvirtualstore.net/staff/wilson/greenmenu/images/left_bg.png
http://www.yourvirtualstore.net/staff/wilson/greenmenu/images/right_bg.png
http://www.yourvirtualstore.net/staff/wilson/greenmenu/images/fixed_footer_repeat.png
2. Open notepad or any other text editor, create a new file and paste this CSS code below :
#center_fixed_footer_wrapper{
background:url(images/center_bg.png) repeat-x center top;
height:60px;
padding-left:10px;
float:left;
}
.left_footer{
background:url(images/left_bg.png) no-repeat top right;
width:50px; height:60px;
float:left;
}
.right_footer{
background:url(images/right_bg.png) no-repeat top left;
width:50px; height:60px;
float:left;
}
#fixed_footer {
position:fixed;
left:0px;
bottom:0px;
height:60px;
width:100%;
background-image: url(images/fixed_footer_repeat.png);
background-repeat: repeat-x;
background-position: center bottom;
font:11px Verdana;
font-weight:normal;
z-index:100000;
}
#main_fixed_footer_wrapper{
width:700px;
margin:0 auto;
}
#fixed_footer table{height:30px;}
#fixed_footer td{padding:0;}
#fixed_footer .content{
color:#333333;
display:block;
font-weight:bold;
height:40px;
padding-left:35px;
padding-top:22px;
margin-right:10px;
}
#fixed_footer a{color:#000000!important; font-size:11px!important; text-decoration:none!important;}
#fixed_footer a:hover{color:#333333!important;}
3. Save the file as : greenmenu.css (File > Save As)
File name : greenmenu.css
Save as type : All files
4. Upload the file to your VP-ASP site under root folder.
5. Open the header file (shoppage_header.htm) located in e.g. templates\default-2cols or templates\default-3cols using notepad or text editor.
6. Locate this code :
<link rel="stylesheet" type="text/css" media="all" href="templates/<%=getconfig("xtemplate")%>/css/shop700.css" />
7. Below it, please add :
<link rel="stylesheet" type="text/css" media="all" href="greenmenu.css" />
8. Save the file and upload to your site under the appropiate folder.
9. Open the footer file (shoppage_trailer.htm) located in e.g. templates\default-2cols or templates\default-3cols using notepad or text editor.
10. Locate this code :
<div id="footer">
<div id="vp_footer"><%footer%></div>
</div>
11. Below it, please add :
<!-- Fixed footer start -->
<div id="fixed_footer">
<div id="main_fixed_footer_wrapper">
<div class="left_footer"></div>
<div id="center_fixed_footer_wrapper">
<table cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><a class="content" href="http://www.vpasp.com/">Menu 1</a></td>
<td><a class="content" href="http://www.vpasp.com/">Menu 2</a></td>
<td><a class="content" href="http://www.vpasp.com/">Menu 3</a></td>
<td><a class="content" href="http://www.vpasp.com/">Menu 4</a></td>
<td><a class="content" href="http://www.vpasp.com/">Menu 5</a></td>
<td><a class="content" href="http://www.vpasp.com/">Menu 6</a></td>
</tr>
</tbody></table>
</div>
<div class="right_footer"></div>
</div>
</div>
<!-- Fixed footer end -->
12. Save the file and upload to your site under the appropiate folder.
13. Your are DONE!