Creating static pages containing tabbed content

Configuration tutorials for Kinetic

Creating static pages containing tabbed content

Postby Don Chambers » Sun Mar 08, 2009 3:50 pm

Kinetic utilizes a script enabling tabbed entry and sidebar content. The stylesheets also accomodate tabbed content within static pages, but getting our content to display correctly still requires a bit of HTML within the actual static page.

Let's start with some sample code:
Code: Select all
<div class="tabber staticpage_tab_container">

    <div class="tabbertab staticpage_tab_item" title="Videos">
        <h3 class="category_title">Videos</h3>
        <div class="staticpage_tab_content">
            This is where your content goes for tab 1.
        </div>
    </div>

    <div class="tabbertab staticpage_tab_item" title="Slideshow">
        <h3 class="category_title">Slideshow</h3>
        <div class="staticpage_tab_content">
            Twice is nice.  This is where your content goes for tab 2.<br /><br />
            Two.  Too.  To.  2  Dos.  Zwei. Deux. Toooooooooooooooooooo....!
        </div>
    </div>

    <div class="tabbertab staticpage_tab_item" title="Buy Pictures">
        <h3 class="category_title">Buy Pictures</h3>
        <div class="staticpage_tab_content">
            Three times a charm.  This is where your content goes for tab 3.
        </div>
    </div>

    <!-- you can have as many of these as you want, or that will fit on your page  -->

</div>


Here are the key components of doing this:

  • Entire static page must set "Perform Markup Transformations" to no - this indicates a pure HTML interpretation.
  • The overall parent container must contain two classes written as "tabber staticpage_tab_container".
  • Individual tabs must contain two classes written as "tabbertab staticpage_tab_item".
  • Individual tabs must contain a title="whatever" which should be the same as the heading element below.
  • After the tabbertab, we must include an <h3> heading element identical to the title with the class "category_title". The <h3> is also a trigger for the tab title, but is actually hidden by the tabbing script if javascript is enabled, but provided just in case a broswer does not have js.
  • Content must be in a div (or other block level element) with class "staticpage_tab_content"

The end result can be seen here, although, the content of tabs is slightly different due to that page's use as Kinetic's demo site.

By default, the tabs will inherit the color scheme of your chosen colorset. However, tabs could be unique for static pages using a custom user override stylesheet.
=Don=
User avatar
Don Chambers
Site Admin
 
Posts: 226
Joined: Mon Jan 05, 2009 9:58 am
Location: Chicago, IL, USA

Return to Template: Kinetic

Who is online

Users browsing this forum: No registered users and 1 guest

cron