– To illustrate like demo, you add this code into edenite15templatesja_edenitecsstypo.css file
/*Tab*/
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
background: url(../images/tab1-bg.jpg) no-repeat 0px 0px;
height: 265px;
padding-left: 50px;
}
#tab2 {
background: url(../images/tab2-bg.jpg) no-repeat 0px 0px;
}
#tab3 {
background: url(../images/tab3-bg.jpg) no-repeat 0px 0px;
}
#tab4 {
background: url(../images/tab4-bg.jpg) no-repeat 0px 0px;
}
#tab5 {
background: url(../images/tab5-bg.jpg) no-repeat 0px 0px;
}
#tab6 {
background: url(../images/tab6-bg.jpg) no-repeat 0px 0px;
}
#tab7 {
background: url(../images/tab7-bg.jpg) no-repeat 0px 0px;
}
#tab1 ul,
#tab2 ul,
#tab3 ul,
#tab4 ul,
#tab5 ul,
#tab6 ul,
#tab7 ul {
background: url(../images/trans-white.png);
margin: 0;
padding: 20px 0 0;
}
#tab1 ul li,
#tab2 ul li,
#tab3 ul li,
#tab4 ul li,
#tab5 ul li,
#tab6 ul li,
#tab7 ul li {
background: url(../images/icon-checklist.png) no-repeat;
font-size: 17px;
line-height: 1.5;
margin-left: 20px;
padding: 0 0 10px 40px;
}
– You extract my attached file into templatesja_edeniteimages
– You create a new category with its title is tabdemo (its id is 60, your website will have another id)
– You create a new article with its name is Employers & Job Seekers’ focus development in tabdemo category, its content is
<div id="tab1"><div style="padding-top: 50px;">
<ul class="checklist">
<li><span>JA Job board is the best Joomla 1.5 Job Board component.</span></li>
<li><span>Ease of administration & customization.</span></li>
<li><span>We have focused on user usability while developing this component.</span></li>
</ul>
</div></div>
– You create a new article with its name is Job search & listing can’t be easier or faster in tabdemo category, its content is
<div id="tab2"><div style="padding-top: 50px;">
<ul class="checklist">
<li>It doesn't matter how many jobs you plan to offer.</li>
<li>From 1000 jobs to 1,000,000 jobs, the system has smart cache technology for superior performance.</li>
</ul>
</div></div>
– You create a new HTML module with custom HTML is:
{jatabs type="articles" catid="60" ajax=true position="right" animType="animMoveHor" style="jobboard2" widthTabs="30%" } {/jatabs}
TomC 13 years, 5 months ago.
