• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

id: sb_sb

Page history last edited by PBworks 17 years, 6 months ago

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

 

Comments (0)

You don't have permission to comment on this page.