Powered By Blogger

Wednesday, February 5, 2014

Making A Quick Tab on a page Using Magento

Have you ever wanted to add more tabs to your WebPage?  Here is a quick help for those of you using magento

Click here to go on to TNSdeals and see an example of what this code does

How to make a index/tab with a page using magento

The codes you will need to know:

//header page code//
<div class="page-head">
<h3>NAME OF PAGE HERE</h3>
</div>

//This code will go below the header page code.  It is the code + the visable tab name that will
// be presented to the customer.  When the customer clicks on "TITLE OF THE TAB" the "href="#
//PLACE TAB REFERENCE HERE">" will link them to the next set of code//
<ul class="disc" style="margin-bottom: 15px;">
<li><a href="#PLACE TAB REFERENCE HERE">TITLE OF THE TAB</a></li>
</ul>


//Place this code at the point at which you want to tab to set.  When the customer/user clicks on the tab
//above that tab will redirect them to this location where the id is set
//<dl> = description list </dl> = end description list
//<dt> = description tab </dt> = end description tab
//<dd> = description details </dd> = end description details
//style="margin-bottom: 10px;" is an option tab that will let you set font size/color/margin ect.
<dl>
<dt id="PLACE TAB REFERENCE HERE"> TITLE OF THE PAGE:</dt>
<dd style="margin-bottom: 10px;"><PLACE YOUR DESCRIPTION/INFORMATION HERE</dd>
</dl>


Sample Coding:

<div class="page-head">
<h3>My Page</h3>
</div>

<ul class="disc" style="margin-bottom: 15px;">
<li><a href="#tab1>Tab 1</a></li>
<li><a href="#tab2>Tab 2</a></li>
</ul>

<dl>
<dt id="tab1">Tab 1:</dt>
<dd>Hello my name is Deals this is the first tab write your description here</dd>
<dt id="tab2">Tab 2:</dt>
<dd>Now you are at the second tab instead of the first</dd>
</dl>


No comments:

Post a Comment