Ticket #18690: 18690.diff

wp-admin/includes/template.php

@@ -1813 +1813 @@
         <div id="contextual-help-wrap" class="hidden">
         <?php
         $contextual_help = '';
-        if ( isset($_wp_contextual_help[$screen->id]) ) {
+        if ( isset($_wp_contextual_help[$screen->id]) && is_array($_wp_contextual_help[$screen->id]) ) {
+                $contextual_help .= '<div class="metabox-prefs">' . "\n";
+
+                /*
+                 * Loop through ['contextual-help-tabs']
+                 *   - It's a nested array where $key=>$value >> $title=>$content
+                 * Has no output so can only loop the array once
+                 */
+                $contextual_help_tabs = ''; // store looped content for later
+                $contextual_help_panels = ''; // store looped content for later
+
+                $tab_active = true;
+
+                foreach ( $_wp_contextual_help[$screen->id]['tabs'] as $tab ) {
+                        $tab_slug = sanitize_title( $tab[ 0 ], '', 'save');
+
+                        $contextual_help_tabs .= '<li class="tab-' . $tab_slug . ( ($tab_active) ? ' active' : '' ) . '">';
+                        $contextual_help_tabs .= '<a href="#' . $tab_slug . '">' . $tab[0] . '</a>';
+                        $contextual_help_tabs .= '</li>' ."\n";
+                        
+                        $contextual_help_panels .= '<div id="' . $tab_slug . '" class="help-tab-content' . ( ($tab_active) ? ' active' : '' ) . '">';
+                        $contextual_help_panels .= $tab[1];
+                        $contextual_help_panels .= "</div>\n";
+
+                        $tab_active = false;
+                }
+
+                // Start output from loop: Tabbed help content
+                $contextual_help .= '<ul class="contextual-help-tabs">' . "\n";
+                $contextual_help .= $contextual_help_tabs;
+                $contextual_help .= '</ul>' ."\n";
+                $contextual_help .= '<div class="contextual-help-tabs-wrap">' . "\n";
+                $contextual_help .= $contextual_help_panels;
+                $contextual_help .= "</div>\n";
+                // END: Tabbed help content
+
+                // Sidebar to right of tabs
+                $contextual_help .= '<div class="contextual-help-links">' . "\n";
+                $contextual_help .= $_wp_contextual_help[$screen->id]['sidebar'];
+                $contextual_help .= "</div>\n";
+                
+                $contextual_help .= "</div>\n"; // end metabox
+                
+        } elseif ( isset($_wp_contextual_help[$screen->id]) ) {
                 $contextual_help .= '<div class="metabox-prefs">' . $_wp_contextual_help[$screen->id] . "</div>\n";
         } else {
                 $contextual_help .= '<div class="metabox-prefs">';
-                $default_help = __('<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>');
+                $default_help  = __('<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>');
                 $default_help .= '<br />';
                 $default_help .= __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>');
                 $contextual_help .= apply_filters('default_contextual_help', $default_help);
-                $contextual_help .= "</div>\n";
+                $contextual_help .= '</div>' . "\n";
         }
 
         echo apply_filters('contextual_help', $contextual_help, $screen->id, $screen);
@@ -1834 +1877 @@
 /**
  * Add contextual help text for a page
  *
+ * The array $help takes the following format:
+ *      array( 'contextual-help-tabs'   => array( $tab1_title => $tab1_value [, $tab2_title => $tab2_value, ...] ),
+ *              'contextual-help-links' => $help_links_as_string )
+ *
+ * For backwards compatability, a string is also accepted.
+ *
  * @since 2.7.0
  *
- * @param string $screen The handle for the screen to add help to.  This is usually the hook name returned by the add_*_page() functions.
- * @param string $help Arbitrary help text
+ * @param string        $screen The handle for the screen to add help to.  This is usually the hook name returned by the add_*_page() functions.
+ * @param array|string  $help   Creates tabs & links columns within help text in array.
+ *
  */
 function add_contextual_help($screen, $help) {
         global $_wp_contextual_help;
@@ -2077 +2127 @@
  * @param string $id Screen id, optional.
  */
 function set_current_screen( $id =  '' ) {
-        global $current_screen, $hook_suffix, $typenow, $taxnow;
+        global $current_screen;
 
-        $action = '';
+        $current_screen = new WP_Screen( $id );
 
-        if ( empty($id) ) {
-                $current_screen = $hook_suffix;
-                $current_screen = str_replace('.php', '', $current_screen);
-                if ( preg_match('/-add|-new$/', $current_screen) )
-                        $action = 'add';
-                $current_screen = str_replace('-new', '', $current_screen);
-                $current_screen = str_replace('-add', '', $current_screen);
-                $current_screen = array('id' => $current_screen, 'base' => $current_screen);
-        } else {
-                $id = sanitize_key($id);
-                if ( false !== strpos($id, '-') ) {
-                        list( $id, $typenow ) = explode('-', $id, 2);
-                        if ( taxonomy_exists( $typenow ) ) {
-                                $id = 'edit-tags';
-                                $taxnow = $typenow;
-                                $typenow = '';
-                        }
-                }
-                $current_screen = array('id' => $id, 'base' => $id);
-        }
-
-        $current_screen = (object) $current_screen;
-
-        $current_screen->action = $action;
-
-        // Map index to dashboard
-        if ( 'index' == $current_screen->base )
-                $current_screen->base = 'dashboard';
-        if ( 'index' == $current_screen->id )
-                $current_screen->id = 'dashboard';
-
-        if ( 'edit' == $current_screen->id ) {
-                if ( empty($typenow) )
-                        $typenow = 'post';
-                $current_screen->id .= '-' . $typenow;
-                $current_screen->post_type = $typenow;
-        } elseif ( 'post' == $current_screen->id ) {
-                if ( empty($typenow) )
-                        $typenow = 'post';
-                $current_screen->id = $typenow;
-                $current_screen->post_type = $typenow;
-        } elseif ( 'edit-tags' == $current_screen->id ) {
-                if ( empty($taxnow) )
-                        $taxnow = 'post_tag';
-                $current_screen->id = 'edit-' . $taxnow;
-                $current_screen->taxonomy = $taxnow;
-        }
-
-        $current_screen->is_network = is_network_admin();
-        $current_screen->is_user = is_user_admin();
-
-        if ( $current_screen->is_network ) {
-                $current_screen->base .= '-network';
-                $current_screen->id .= '-network';
-        } elseif ( $current_screen->is_user ) {
-                $current_screen->base .= '-user';
-                $current_screen->id .= '-user';
-        }
-
         $current_screen = apply_filters('current_screen', $current_screen);
 }
 
@@ -2271 +2262 @@
 </script>
 <?php
 }
+
+class WP_Screen {
+        var $action = '';
+        var $base;
+        var $id;
+        var $is_network;
+        var $is_user;
+        var $parent_base;
+        var $parent_file;
+        var $post_type;
+        var $taxonomy;
+
+        function __construct( $id = '' ) {
+                global $hook_suffix, $typenow, $taxnow;
+
+                $action = '';
+
+                if ( empty( $id ) ) {
+                        $screen = $hook_suffix;
+                        $screen = str_replace('.php', '', $screen);
+                        if ( preg_match('/-add|-new$/', $screen) )
+                                $action = 'add';
+                        $screen = str_replace('-new', '', $screen);
+                        $screen = str_replace('-add', '', $screen);
+                        $this->id = $this->base = $screen;
+                } else {
+                        $id = sanitize_key( $id );
+                        if ( false !== strpos($id, '-') ) {
+                                list( $id, $typenow ) = explode('-', $id, 2);
+                                if ( taxonomy_exists( $typenow ) ) {
+                                        $id = 'edit-tags';
+                                        $taxnow = $typenow;
+                                        $typenow = '';
+                                }
+                        }
+                        $this->id = $this->base = $id;
+                }
+
+                $this->action = $action;
+        
+                // Map index to dashboard
+                if ( 'index' == $this->base )
+                        $this->base = 'dashboard';
+                if ( 'index' == $this->id )
+                        $this->id = 'dashboard';
+        
+                if ( 'edit' == $this->id ) {
+                        if ( empty($typenow) )
+                                $typenow = 'post';
+                        $this->id .= '-' . $typenow;
+                        $this->post_type = $typenow;
+                } elseif ( 'post' == $this->id ) {
+                        if ( empty($typenow) )
+                                $typenow = 'post';
+                        $this->id = $typenow;
+                        $this->post_type = $typenow;
+                } elseif ( 'edit-tags' == $this->id ) {
+                        if ( empty($taxnow) )
+                                $taxnow = 'post_tag';
+                        $this->id = 'edit-' . $taxnow;
+                        $this->taxonomy = $taxnow;
+                }
+        
+                $this->is_network = is_network_admin();
+                $this->is_user = is_user_admin();
+        
+                if ( $this->is_network ) {
+                        $this->base .= '-network';
+                        $this->id .= '-network';
+                } elseif ( $this->is_user ) {
+                        $this->base .= '-user';
+                        $this->id .= '-user';
+                }
+        }
+
+        function set_parentage( $parent_file ) {
+                $current_screen->parent_file = $parent_file;
+                $current_screen->parent_base = preg_replace('/\?.*$/', '', $parent_file);
+                $current_screen->parent_base = str_replace('.php', '', $current_screen->parent_base);
+        }
+
+        function add_option( $option, $args = array() ) {
+                return add_screen_option( $option, $args );
+        }
+
+        function add_help_tab( $title, $content) {
+                global $_wp_contextual_help;
+
+                $_wp_contextual_help[$this->id]['tabs'][] = array( $title, $content );
+        }
+
+        function add_help_sidebar( $content ) {
+                global $_wp_contextual_help;
+
+                $_wp_contextual_help[$this->id]['sidebar'] = $content;
+        }
+}
+ No newline at end of file

wp-admin/js/common.dev.js

@@ -237 +237 @@
         }
 };
 
+// help tabs
+$('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
+  var newTab;
 
+  e.preventDefault();
+
+  // don't do anything if the click is for the tab already showing.
+  if ( $(this).is('.active a') )
+    return false;
+  
+  // tab triggers
+  $('.contextual-help-tabs .active').removeClass('active');
+  $(this).parent('li').addClass('active');
+
+  newTab = $( $(this).attr('href') );  
+
+  //tabs
+  $('.help-tab-content').not( newTab ).removeClass('active').hide();
+  newTab.addClass('active').show();
+  
+});
+
+// click the first contextual help tab (should happen when this screenMeta is opened)
+$('.contextual-help-tabs a:first').click();
+
 $(document).ready( function() {
         var lastClicked = false, checks, first, last, checked,
                 pageInput = $('input.current-page'), currentPage = pageInput.val();

wp-admin/edit-form-advanced.php

@@ -160 +160 @@
 do_action('do_meta_boxes', $post_type, 'advanced', $post);
 do_action('do_meta_boxes', $post_type, 'side', $post);
 
-add_screen_option('layout_columns', array('max' => 2, 'default' => 'auto') );
+$current_screen->add_option('layout_columns', array('max' => 2, 'default' => 'auto') );
 
 if ( 'post' == $post_type ) {
-        add_contextual_help($current_screen,
-        '<p>' . __('The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and drop, and can minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1- or 2-column layout for this screen.') . '</p>' .
-        '<p>' . __('<strong>Title</strong> - Enter a title for your post. After you enter a title, you&#8217;ll see the permalink below, which you can edit.') . '</p>' .
-        '<p>' . __('<strong>Post editor</strong> - Enter the text for your post. There are two modes of editing: Visual and HTML. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. Click the last icon in the row to get a second row of controls. The HTML mode allows you to enter raw HTML along with your post text. You can insert media files by clicking the icons above the post editor and following the directions. You can go the distraction-free writing screen, new in 3.2, via the Fullscreen icon in Visual mode (second to last in the top row) or the Fullscreen button in HTML mode (last in the row). Once there, you can make buttons visible by hovering over the top area. Exit Fullscreen back to the regular post editor.') . '</p>' .
-        '<p>' . __('<strong>Publish</strong> - You can set the terms of publishing your post in the Publish box. For Status, Visibility, and Publish (immediately), click on the Edit link to reveal more options. Visibility includes options for password-protecting a post or making it stay at the top of your blog indefinitely (sticky). Publish (immediately) allows you to set a future or past date and time, so you can schedule a post to be published in the future or backdate a post.') . '</p>' .
-        ( ( current_theme_supports( 'post-formats' ) && post_type_supports( 'post', 'post-formats' ) ) ? '<p>' . __( '<strong>Post Format</strong> - This designates how your theme will display a specific post. For example, you could have a <em>standard</em> blog post with a title and paragraphs, or a short <em>aside</em> that omits the title and contains a short text blurb. Please refer to the Codex for <a href="http://codex.wordpress.org/Post_Formats#Supported_Formats">descriptions of each post format</a>. Your theme could enable all or some of 10 possible formats.' ) . '</p>' : '' ) .
-        '<p>' . __('<strong>Featured Image</strong> - This allows you to associate an image with your post without inserting it. This is usually useful only if your theme makes use of the featured image as a post thumbnail on the home page, a custom header, etc.') . '</p>' .
-        '<p>' . __('<strong>Send Trackbacks</strong> - Trackbacks are a way to notify legacy blog systems that you&#8217;ve linked to them. Enter the URL(s) you want to send trackbacks. If you link to other WordPress sites they&#8217;ll be notified automatically using pingbacks, and this field is unnecessary.') . '</p>' .
-        '<p>' . __('<strong>Discussion</strong> - You can turn comments and pings on or off, and if there are comments on the post, you can see them here and moderate them.') . '</p>' .
-        '<p>' . sprintf(__('You can also create posts with the <a href="%s">Press This bookmarklet</a>.'), 'options-writing.php') . '</p>' .
-        '<p><strong>' . __('For more information:') . '</strong></p>' .
-        '<p>' . __('<a href="http://codex.wordpress.org/Posts_Add_New_Screen" target="_blank">Documentation on Writing and Editing Posts</a>') . '</p>' .
-        '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
+        $current_screen->add_help_tab( __('Customizing this display'),
+                                                                  '<p>' . __('The title field and the big Post Editing Area are fixed in place, but you can reposition all the other boxes using drag and drop, and can minimize or expand them by clicking the title bar of each box. Use the Screen Options tab to unhide more boxes (Excerpt, Send Trackbacks, Custom Fields, Discussion, Slug, Author) or to choose a 1- or 2-column layout for this screen.') . '</p>' );
+        $current_screen->add_help_tab( __('Title and post editor'), '<p>' . __('<strong>Title</strong> - Enter a title for your post. After you enter a title, you&#8217;ll see the permalink below, which you can edit.') . '</p>' .
+                                '<p>' . __('<strong>Post editor</strong> - Enter the text for your post. There are two modes of editing: Visual and HTML. Choose the mode by clicking on the appropriate tab. Visual mode gives you a WYSIWYG editor. Click the last icon in the row to get a second row of controls. The HTML mode allows you to enter raw HTML along with your post text. You can insert media files by clicking the icons above the post editor and following the directions. You can go the distraction-free writing screen, new in 3.2, via the Fullscreen icon in Visual mode (second to last in the top row) or the Fullscreen button in HTML mode (last in the row). Once there, you can make buttons visible by hovering over the top area. Exit Fullscreen back to the regular post editor.') . '</p>' );
+        $current_screen->add_help_tab( __('Publish box'), '<p>' . __('<strong>Publish</strong> - You can set the terms of publishing your post in the Publish box. For Status, Visibility, and Publish (immediately), click on the Edit link to reveal more options. Visibility includes options for password-protecting a post or making it stay at the top of your blog indefinitely (sticky). Publish (immediately) allows you to set a future or past date and time, so you can schedule a post to be published in the future or backdate a post.') . '</p>' .
+                                ( ( current_theme_supports( 'post-formats' ) && post_type_supports( 'post', 'post-formats' ) ) ? '<p>' . __( '<strong>Post Format</strong> - This designates how your theme will display a specific post. For example, you could have a <em>standard</em> blog post with a title and paragraphs, or a short <em>aside</em> that omits the title and contains a short text blurb. Please refer to the Codex for <a href="http://codex.wordpress.org/Post_Formats#Supported_Formats">descriptions of each post format</a>. Your theme could enable all or some of 10 possible formats.' ) . '</p>' : '' ) .
+                                ( ( current_theme_supports( 'post-thumbnails' ) && post_type_supports( 'post', 'thumbnail' ) ) ? '<p>' . __('<strong>Featured Image</strong> - This allows you to associate an image with your post without inserting it. This is usually useful only if your theme makes use of the featured image as a post thumbnail on the home page, a custom header, etc.') . '</p>' : '' ) );
+        $current_screen->add_help_tab( __('Discussion Settings'), '<p>' . __('<strong>Send Trackbacks</strong> - Trackbacks are a way to notify legacy blog systems that you&#8217;ve linked to them. Enter the URL(s) you want to send trackbacks. If you link to other WordPress sites they&#8217;ll be notified automatically using pingbacks, and this field is unnecessary.') . '</p>' .
+                                '<p>' . __('<strong>Discussion</strong> - You can turn comments and pings on or off, and if there are comments on the post, you can see them here and moderate them.') . '</p>' );
+        $current_screen->add_help_sidebar(
+                        '<p>' . sprintf(__('You can also create posts with the <a href="%s">Press This bookmarklet</a>.'), 'options-writing.php') . '</p>' .
+                        '<p><strong>' . __('For more information:') . '</strong></p>' .
+                        '<p>' . __('<a href="http://codex.wordpress.org/Posts_Add_New_Screen" target="_blank">Documentation on Writing and Editing Posts</a>') . '</p>' .
+                        '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
         );
 } elseif ( 'page' == $post_type ) {
-        add_contextual_help($current_screen, '<p>' . __('Pages are similar to Posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest Pages under other Pages by making one the &#8220;Parent&#8221; of the other, creating a group of Pages.') . '</p>' .
-        '<p>' . __('Creating a Page is very similar to creating a Post, and the screens can be customized in the same way using drag and drop, the Screen Options tab, and expanding/collapsing boxes as you choose. This screen also has the new in 3.2 distraction-free writing space, available in both the Visual and HTML modes via the Fullscreen buttons. The Page editor mostly works the same as the Post editor, but there are some Page-specific features in the Page Attributes box:') . '</p>' .
-        '<p>' . __('<strong>Parent</strong> - You can arrange your pages in hierarchies. For example, you could have an &#8220;About&#8221; page that has &#8220;Life Story&#8221; and &#8220;My Dog&#8221; pages under it. There are no limits to how many levels you can nest pages.') . '</p>' .
-        '<p>' . __('<strong>Template</strong> - Some themes have custom templates you can use for certain pages that might have additional features or custom layouts. If so, you&#8217;ll see them in this dropdown menu.') . '</p>' .
-        '<p>' . __('<strong>Order</strong> - Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in this field.') . '</p>' .
-        '<p><strong>' . __('For more information:') . '</strong></p>' .
-        '<p>' . __('<a href="http://codex.wordpress.org/Pages_Add_New_Screen" target="_blank">Documentation on Adding New Pages</a>') . '</p>' .
-        '<p>' . __('<a href="http://codex.wordpress.org/Pages_Screen#Editing_Individual_Pages" target="_blank">Documentation on Editing Pages</a>') . '</p>' .
-        '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
+        $current_screen->add_help_tab( __('About Pages'), '<p>' . __('Pages are similar to Posts in that they have a title, body text, and associated metadata, but they are different in that they are not part of the chronological blog stream, kind of like permanent posts. Pages are not categorized or tagged, but can have a hierarchy. You can nest Pages under other Pages by making one the &#8220;Parent&#8221; of the other, creating a group of Pages.') . '</p>' . 
+                                '<p>' . __('Creating a Page is very similar to creating a Post, and the screens can be customized in the same way using drag and drop, the Screen Options tab, and expanding/collapsing boxes as you choose. This screen also has the new in 3.2 distraction-free writing space, available in both the Visual and HTML modes via the Fullscreen buttons. The Page editor mostly works the same as the Post editor, but there are some Page-specific features in the Page Attributes box:') . '</p>' );
+        $current_screen->add_help_tab( __('Page Attributes'),
+                                '<p>' . __('<strong>Parent</strong> - You can arrange your pages in hierarchies. For example, you could have an &#8220;About&#8221; page that has &#8220;Life Story&#8221; and &#8220;My Dog&#8221; pages under it. There are no limits to how many levels you can nest pages.') . '</p>' .
+                                '<p>' . __('<strong>Template</strong> - Some themes have custom templates you can use for certain pages that might have additional features or custom layouts. If so, you&#8217;ll see them in this dropdown menu.') . '</p>' .
+                                '<p>' . __('<strong>Order</strong> - Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in this field.') . '</p>' );
+        $current_screen->add_help_sidebar(
+                        '<p><strong>' . __('For more information:') . '</strong></p>' .
+                        '<p>' . __('<a href="http://codex.wordpress.org/Pages_Add_New_Screen" target="_blank">Documentation on Adding New Pages</a>') . '</p>' .
+                        '<p>' . __('<a href="http://codex.wordpress.org/Pages_Screen#Editing_Individual_Pages" target="_blank">Documentation on Editing Pages</a>') . '</p>' .
+                        '<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
         );
 }
 

wp-admin/admin-header.php

@@ -111 +111 @@
 <?php
 unset($title_class, $blog_name, $total_update_count, $update_title);
 
-$current_screen->parent_file = $parent_file;
-$current_screen->parent_base = preg_replace('/\?.*$/', '', $parent_file);
-$current_screen->parent_base = str_replace('.php', '', $current_screen->parent_base);
+$current_screen->set_parentage( $parent_file );
+
 ?>
 
 <div id="wpbody-content">

wp-admin/css/wp-admin.dev.css

@@ -15 +15 @@
  6.0 - Admin Header
         6.1 - Favorites Menu
         6.2 - Screen Options Tabs
+        6.3 - Help Menu
  7.0 - Main Navigation
  8.0 - Layout Blocks
  9.0 - Dashboard
@@ -1491 +1492 @@
         visibility: hidden;
 }
 
-#contextual-help-wrap li {
-        list-style-type: disc;
-        margin-left: 18px;
-}
 .toggle-arrow {
         background-repeat: no-repeat;
         background-position: top left;
@@ -1528 +1525 @@
         display: none;
 }
 
+/*------------------------------------------------------------------------------
+  6.3 - Help Menu
+------------------------------------------------------------------------------*/
 
+#contextual-help-wrap {
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+}
+
+#contextual-help-wrap > .metabox-prefs {
+  padding: 8px 20px 12px;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.contextual-help-tabs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 150px;
+  max-height: 220px;
+  margin: 0;
+  overflow: auto;
+  
+  border-right: 1px solid #dfdfdf;
+}
+
+.contextual-help-tabs li {
+  margin-bottom: 0;
+
+  list-style-type: none;
+}
+
+.contextual-help-tabs a {
+  display: block;
+  padding: 5px 5px 5px 12px;
+  
+  font-weight: bold;
+  line-height: 18px;
+  text-decoration: none;
+  
+  border-width: 1px 0;
+  border-style: solid;
+  border-top-color: #f9f9f9;
+  border-bottom-color: #dfdfdf;
+}
+
+.contextual-help-tabs a:hover {
+  background-color: #EAF2FA;
+  color: #333;
+}
+
+.contextual-help-tabs .active a,
+.contextual-help-tabs .active a:hover {
+  background: #ffffff;
+  color: #000000;
+}
+
+.contextual-help-tabs-wrap {
+  position: relative;
+  display: block;
+  margin: 0 152px 0 150px;
+  height: 188px;
+  overflow: auto;
+}
+
+.help-tab-content {
+  display: none;
+  margin: 0 22px 12px 0;
+  padding-right: 20px;
+}
+
+.help-tab-content.active {
+  display: block;
+}
+
+.help-tab-content li {
+        list-style-type: disc;
+        margin-left: 18px;
+}
+
+.contextual-help-links {
+  position: absolute;
+  width: 150px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 8px 0 12px;
+  overflow: auto;
+  
+  background-color: #ffffff;
+  
+  border-left: 1px solid #dfdfdf;
+}
+
+
 /*------------------------------------------------------------------------------
   7.0 - Main Navigation (Left Menu)
 ------------------------------------------------------------------------------*/