How to change Logo

If you want to change it to your company logo. you only need replace this file

"../templates/at_nine_flat/images/sample/logo/logo-icon.png"

How to use Percentage /Diagram HTML

You can us this html structure to build Percentage/Diagram.

You can change class suffix for changing style

  • avatar-skill-diagram
  • avatar-skill-diagram-1

 

<ul class="avatar-skills-diagram">
<li>
<div style="width: 85%;"><span>Web Design 85%</span></div>
</li>
<li>
<div style="width: 90%;"><span>HTML/CSS 90%</span></div>
</li>
<li>
<div style="width: 80%;"><span>Graphic Design 80%</span></div>
</li>
<li>
<div style="width: 70%;"><span>WordPress 70%</span></div>
</li>
<li>
<div style="width: 95%;"><span>Joomla 95%</span></div>
</li>
</ul>

EXAMPLE

How to use AT Nine Flat Showcase Module ?

We are contained the AT Nine Flat Showcase module with this template. Joomla default content and K2 Component are supported. When you want to show article, you only need creat AT Nine Flat Showcase module, select category or article, select the showcase ... and publish it. This module will show the introtext and intro image (The image is insert in Image & Link Tab of article) with many showcase.

 

Configure

When you creat AT Nine Flat Showcase Module.

 


Module Setting Tab

 

 

  • Width: Width of showcase module, you can set it base Pixel (px) or percentage (%).
  • Height: Height of showcase module or article image (But it only applies to some showcase)
  • Jquery: Set the load or unload Jquery
    • la#_: load the la#_ version of jquery
    • unload: unload jquery
    • specific: you must type the version of jquery that you want to load, ex: if you type "1.8.2" this will load 1.8.2 Jquery
  • Data Source: Set the data source that you want to show form Joomla content or K2 Component

 


Joomla Content Setting & K2 Content Setting Tab

 

After select the "Data Source" in Module Tab, you must to to Joomla Content Setting or K2 Content Setting Tab and configure the content for display.

With Joomla Content Setting, you will see the "Article Link" select box at the bottom of tab. This option allows you to set the link when click on article in showcase.

 


Layout Setting Tab

 

  • Select Showcase: Select your showcase layout
  • Number of News: Set the number of articles/news
  • Primary news: Set the number of Primary group
  • Primary Columns: Set the number of Primary group columns
  • Secondary Columns: : Set the number of Secondary group columns (number of Secondary articles/news = Number of News - Primary news)

 


List Showcase Layout Here

 

How to use Accordion & Tab

You can us this html structure to build Arccordion and Tab

 


 

Accordion

<div id="accordion2" class="accordion at-accordion-1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">Your Title</a>
</div><div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Your Content</p>
</div>
</div></div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Your Title</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Your Content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Your Title</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p>Your Content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Your Title</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Your Content</p>
</div></div>
</div></div>

EXAMPLE