Single Sidebar Configuration

Structure of the Thesis Sidebar

  • #content_box
    • #sidebars
      • #multimedia_box
      • #sidebar_1 .sidebar
        • .sidebar ul.sidebar_list
          • li.widget
          • li.widget ul
            • li.widget ul li
          • li.widget li ul

The Css

#sidebars
{
    border-style: solid;  /* from style.css*/
    border-color: #ddd; /* from style.css*/
    width: 32.2em;  /* from style.css*/
    border: 0;  /* from layout.css*/
    float: right; /* from layout.css*/
}
#sidebars:after
{
    content: ".";  /* from style.css*/
    display: block;  /* from style.css*/
    height: 0; clear: both;  /* from style.css*/
    visibility: hidden;  /* from style.css*/
}
#multimedia_box
{
    padding: 1.1em; /* from layout.css*/
    margin-bottom: 2.2em; /* from layout.css*/
}
.sidebar
{
    width: 100%; /* from layout.css*/
}
.sidebar h3
{
    font-variant: small-caps; /* from style.css*/
    letter-spacing: 2px; /* from style.css*/
    font-size: 1em;  /* from layout.css [Design Options] */
    line-height: 1.385em;  /* from layout.css*/
    margin-bottom: 0.692em; /* from layout.css*/
    color: #555555;  /* from layout.css [Design Options] */
}
.sidebar a:hover
{
    text-decoration: underline; /* from style.css*/
}
#sidebar_1
{
    border-style: dotted; /* from style.css*/
    border-color: #ddd; /* from style.css*/
    border: 0; /* from layout.css [Design Options] */
}
ul.sidebar_list
{
    list-style: none;  /* from style.css*/
}
.sidebar ul.sidebar_list
{
    padding-right: 1.1em; /* from layout.css*/
    padding-left: 1.1em; /* from layout.css*/
    padding-top: 2.2em;  /* from layout.css*/
}
li.widget
{
    width: 100%;  /* from style.css*/
    font-size: 1.3em;  /* from layout.css [Design Options] */
    line-height: 1.385em;  /* from layout.css*/
    margin-bottom: 2.769em; /* from layout.css*/
}
li.widget p
{
    margin-bottom: 1.385em; /* from layout.css*/
}
li.widget p a
{
    text-decoration: underline; /* from style.css*/
}
li.widget abbr
{
    font-size: 0.769em; /* from layout.css*/
}
li.widget acronym
{
    font-size: 0.769em; /* from layout.css*/
}
li.widget code
{
    font-size: 0.846em;
}
li.widget ul
{
    list-style: none; /* from style.css*/
}
li.widget ul li
{
    margin-bottom: 0.692em; /* from layout.css*/
}
li.widget ul li .num_comments
{
    color: #111; /* from style.css*/
}
li.widget li ul
{
    margin: 0.692em 0 0 1.385em; /* from style.css*/
}
li.widget .widget_box
{
    background: #e3f0f2; /* from style.css*/
    border-style: solid; /* from style.css*/
    border-color: #addde6; /* from style.css*/
    padding: 0.692em; /* from layout.css*/
    border-width: 0.077em; /* from layout.css*/
}

illustration of thesis single sidebar

Notes

#sidebars is a wrapper that wraps both the #multimedia_box and the sidebars in single sidebar configurations and 2 sidebar configurations when the sidebars are side by side. In the case where 2 sidebars are separated it wraps #sidebar_2

#multimedia_box sits within #sidebars on top of whatever sidebar or sidebars is present.

#sidebar_1 contains the widgetized area of the sidebar.

.sidebar is a class that affects all of the other selectors within #sidebar_1.

ul.sidebar.list provides the structure for widgets that get inserted in the sidebar.

li.widget wraps each widget that gets inserted into the sidebar.

{ 0 comments… add one now }

Leave a Comment