How to use custom design containers
VPASP 7.00 offers many flexibilities with Layout Manager.
One of them is that you can
custom design containers.
For example, you maybe want to show another sub horizontal menus below the existing horizontal menu, which have the sub menu names and the links as like example below :
You can put the custom code you want to display in the Body Free Text in Layout Manager for example, and then display the snippet in the shoppage_header.htm template.
Below is the example how we utilize the Body Free Text in Layout Manager and then display the snippet in header template:
1. Login to your VPASP administration and go to : Website > Layout Manager.
2. Click Edit in the Empty box at the
bottom of Body (center) column section.
3. In the Main Selection, please select the Body Free Text from the dropdown.
4. Please enter the value for the fields as below :
Enable : No.
Label Name : [please leave empty]
Seq No. : Any number e.g. 050
Display with Box : No.
Display Text : [please enter the code showing below :]
<style>
#submenubg li {
display: inline;
font-size:11px
}
#submenubg li:before {
content: '-';
}
#submenubg li:first-child:before {
content: '';
}
#submenubg li a {
padding: 0 0.25em;
text-decoration:none;
}
#submenubg li a:hover {
color: orange;
text-decoration:underline;
}
.features {
color: #BFB9B7;
padding: 0.75em 0;
border-bottom: 0.1em dashed #DFDCD7;
}
.features ul {
margin: -0.6667em 0 0;
padding: 0 0 0 0.5em;
}
.features li a {
display: inline-block;
padding: 0 0.25em 0 0.5em;
font-weight: normal;
}
#submenubg {
background-color:#fff;
}
</style>
<div id="submenubg">
<div class="features nav">
<ul >
<li><a href="/organic/">Organic</a></li>
<li><a href="/tag/raw">Raw</a></li>
<li><a href="/natural/">Natural</a></li>
<li><a href="/tag/sugar-free">Sugar-free</a></li>
<li><a href="/tag/salt-free">Salt-free</a></li>
<li><a href="/gluten-free/">Gluten-free</a></li>
<li><a href="/tag/dark+chocolate">Dark Chocolate</a></li>
<li><a href="/colors/">Candy by Color</a></li>
<li><a href="/wholesale/">Wholesale</a></li>
<li><a href="/tag/new+products">New Products</a></li>
<li><a href="/top_sellers">Top Sellers</a></li>
</ul>
</div>
</div>
: Yes.
5. Click Save Changes.
6.
Open your VP-ASP template header file ( shoppage_header.htm ). This file usually located in the folder " templates/default-2cols/ " (if you are using 2 columns template) or " templates/default-3cols/ " (if you are using 3 columns template) using text editor such as notepad or wordpad.
7. Locate the code below :
<div id="vp_horomenu"><%horomenu%></div>
8. Please replace to :
<div id="vp_horomenu"><%horomenu%><%LoadContainer "xxx"%></div>
NOTE : Please replace
xxx with the
containerId for the
Body Free Text that you have just created.
In the example below, if the containerID is
35, so you should put it into the code e.g. :
<div id="vp_horomenu"><%horomenu%><%LoadContainer "35"%></div>
9. Save the file and then go to your front store to see the changes.
Times Viewed:
14549
Added By:
Wilson Keneshiro
Date Created:
6/12/2013
Last Updated:
6/12/2013
