Tabber Widget

(Difference between revisions)
Jump to: navigation, search
(Added - Customize Tabber Widget: section and "Adjust Height of TabberWidget OR Specific Tabs" sub-section. Removed "This page is waiting for Matt Danner." text. No more waiting because Bes is here!)
(Added - Place icons Or images before Tab Titles: sub-section)
Line 18: Line 18:
 
*Related link
 
*Related link
 
**http://ithemes.com/forum/index.php?/topic/18291-tabber-widget-not-displaying-tab-content/
 
**http://ithemes.com/forum/index.php?/topic/18291-tabber-widget-not-displaying-tab-content/
 +
 +
====Place icons Or images before Tab Titles====
 +
 +
It is currently VERY easy to place any icon or image before a Tab Title.
 +
 +
*Steps for placing icons/images before Tab Titles
 +
**1 : Create a Tabber Widget
 +
**2 : Edit the Tabber Widget in question
 +
**3 : Right before the actual title, place the image html code.
 +
***Example, instead of "Your Title", put in "<code><img src="http://www.google.com/imagelink.jpg"> Your Title</code>" Replace that link and image name with your own link and image that you want to use.
 +
**4 : Save. All done!
 +
 +
That will show the image right before your title.
 +
 +
*Related link
 +
**http://ithemes.com/forum/index.php?/topic/18669-how-to-place-a-social-networking-icon-in-a-tabber-widget-tab/
  
 
==Additional Resources==
 
==Additional Resources==

Revision as of 14:08, September 27, 2011

Contents

Customize Tabber Widget

Extra Customizations Policies

Check our the official policy and details on any Extra Customizations

Adjust Height of TabberWidget OR Specific Tabs

You can easily adjust the height of each Tab inside the TabberWidget OR the entire Tabber Widget wrapper itself. Use the following styling template and customize the height to your own needs, and then put it in your theme's css file at the very end:

#tabber_widget-4-content, #tab-tabber_widget-4-1, #tab-tabber_widget-4-2, #tab-tabber_widget-4-3 
/* tabber_widget-4-content is the TabberWidget in question, tab-tabber_widget-4-1 is the first tab, tab-tabber_widget-4-1 is the second tab, and so on. Make sure you change the actual tabber_widget-4-content and tab-tabber_widget-4 to your own tabberwidget id. */
{
height: 350px;
}

Place icons Or images before Tab Titles

It is currently VERY easy to place any icon or image before a Tab Title.

  • Steps for placing icons/images before Tab Titles
    • 1 : Create a Tabber Widget
    • 2 : Edit the Tabber Widget in question
    • 3 : Right before the actual title, place the image html code.
      • Example, instead of "Your Title", put in "<img src="http://www.google.com/imagelink.jpg"> Your Title" Replace that link and image name with your own link and image that you want to use.
    • 4 : Save. All done!

That will show the image right before your title.

Additional Resources

  1. Free Plugins by PluginBuddy
  2. PluginBuddy Tutorials
  3. PluginBuddy.com
  4. Support Forums
Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox