Support for Hello Ajax Tabs WordPress Widget

You should understand that your choosen widgets have own css layout, which can “break” tab displaying. If you don’t want to find css conflict in your huge theme’s stylesheet, you still have a simple solution. Every tab has own unique css ID. You can find the right one on hello tabs widget’s form. Just under dropdown list with sidebars, you will see the list box with your choosen widgets’ IDs. (This list box appears after saving).
After you found the right ID ( for example id is “hello_tabs_widget-1” ), you should create css property with extra bottom padding using this ID. Go to Appearance -> Editor. If you don’t see your theme’s stylesheet in editor, which should be opened already, just choose it from the right side. Find an empty space there and add a css property:

#hello_tabs_widget-1{ 
padding-bottom: 20px 
}

Or you can try to set bottom padding for all tabs:

.tabs-content-inner > div{ 
padding-bottom: 20px 
}

Don’t worry, sometimes it’s just happens. All you need to do is to add sidebar manually.
Go to Appearance -> Editor, find functions.php file from the right side and open it in editor. (just click on it). Find an empty space and add code below:

register_sidebar(array( 
  'name' => 'Hello tabs content', 
  'id' => 'Hello-tabs-content',
  'description' => 'Hello tabs widgets',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
)); 

You can change id/name parameters or description if you want, but make sure that h2 tags are set as ‘before_title’ and ‘after_title’ value.

This is possible using shortcodes!
First of all, you will need to create an empty sidebar, apart from “tabs-content” sidebar. It should hold hello ajax tabs widget. Create it on hello ajax tabs settings page, like “tabs-content” sidebar or add new sidebar’s registration code manually in your functions.php file:

register_sidebar(array( 
  'name' => 'Content tabs', 
  'id' => 'content-tabs',
  'description' => 'Hello tabs widgets',
  'before_title' => '<h2>',
  'after_title' => '</h2>'
)); 

After, add this shortcode in your functions.php too:

    function hat_content( $atts, $content = null ){
        extract(shortcode_atts(array(
                   "id" => "" 
                 ), $atts));
        ob_start();
        dynamic_sidebar( $id );
        $html = ob_get_contents();
        ob_end_clean();
        return $html;
    }

    add_shortcode( 'hat', 'hat_content' );

This is it! You can use this shortcode in your content to display sidebar with hello ajax tabs widget.
Shortcode syntax: [hat id=”content-tabs”], where id is equal to sidebar’s id, which holds hello ajax tabs widget.

Important information:

• This plugin was developed for sidebars ONLY and it takes 100% of sidebar’s width. To control tabs width use column shortcodes or any other containers with fixed width.
• We strongly recomend you to use demo version of this plugin before purchase and see how widgets look like on your site.
• Some or all of your widget may lose css styling in content.
• This small tutorial is not a part of hello ajax tabs and we don’t provide support for this solution.