id: sb_sb


Description

 

Type: id

CSS Selector: #sb_sb { PROPERTIES }

 

sb_sb is the wrapper for the part of the new SideBar corresponding to the SideBar page. It is one of three sidebar objects in the new SideBar, set up in the HTML as follows:

 

<div id="sb_qs" class="sidebar_v2" style="display:none">
   <ul class="sidebar_v2_menu">...tabs...</ul>
   ...QuickStart content...
</div>

<div id="sb_ra" class="sidebar_v2" style="display:none">
   <ul class="sidebar_v2_menu">...tabs...</ul>
   ...RecentActivity content...
</div>

<div id="sb_sb" class="sidebar_v2">
   <ul class="sidebar_v2_menu">...tabs...</ul>
   ...SideBar content...
</div>

...page content...

 

As one can see, the new SideBar is actually three separate <div> elements, each with a set of tabs. When a tab link is clicked, the display property of the current <div> is set to "none," and the selected element has its display property set to "block."

 

The point here is that if you apply styles to just the "sb_sb" element, you will only change the styles for when SideBar is selected. When someone clicks on QuickStart or RecentActivity, it will revert to the default styles or whatever styles have been set for them.

 

Application

 

The CSS selector to be used to change the styles on the SideBar is the class sidebar_v2. However, if the aim is to have different styles for each of the SideBar objects, then each could be set independently.

 

Examples

 

In a situation where some properties should be set for all SideBar-like elements while others should be set for each one, a combination of declarations for the class sidebar_v2 and for each individual element (sb_ra, sb_qs, and sb_sb) creates the desired effect:

 

.sidebar_v2 { width:200px; }

#sb_ra { background:#ffcccc; /* pink */ }
#sb_qs { background:#ccffcc; /* light green */ }
#sb_sb { background:#ccccff; /* light blue */ }

 

In this case, all SideBar objects are set to the width of the old SideBar at 200 pixels (the new one is slightly wider), and each one gets a different background color.

 

Another possibility is to set styles for specific things in the SideBar. For example, one may wish to set an underline on the <h1> header just for when it occurs in the SideBar. That could be done with:

 

#sb_sb h1 { border-bottom:1px solid black; }

 

See Also