Welcome to the demo site for the Kuler Tabs stack

The Kuler Tabs stack lets you add a beautiful and powerful Tabs container to your website. No mess, no fuss, just fun!

    Determine wich tab should be open on page load
    Fade or slide transition
    Control the transition speed
    Customize button colors
    Customize content background colors

Global Settings

The ‘Global Settings’ is the place that lets you tell the stack how many tab buttons / containers you want on your page. You can add as many as twelve but keep in mind that great web design tries to keep things as clean as possible. Just because you can doesn’t mean you should.

This is also the place to set the Auto Cycle to ‘0’ or up to 8,000 in increments of 1,000.

  • ‘0’ = off
  • 1,000 = 1 second intervals
  • 2, 000 = 2 second intervals
  • 3,000 = 3 second intervals
  • etc …

Set which transition you want the stack to use and the transition speed and you are all done.


Tab Button Settings

This is the area that lets you customize the buttons of the stack. You can align the buttons (left, right, or center), change the size of the font in the buttons as well color of the button and the text. (Don’t forget to set the colors of the button when active).

Round the corners if you want or go with square its up to you. If you are unsure, try going with 4 or 5px roundness … it looks good!

The ‘Padding’ selector just give you the ability to fine tune the look of your buttons until you are completely satisfied.


Tab Button Settings

Here, you will be able to adjust the content area of the tab containers. You can go with a background color that contrasts the color of your webpage or you can go with a transparent background to make sure that it blends in with your webpage.

© 2015 Gary Byrd Contact Me