Notes on the Bluebird Template, Part 4

A sidebar adorns the right side of the Bluebird template.



The sidebar is framed by a <div id="menu"> ... </div> div. The menu div is the second-in-source-order div in the template and the first child of the main div; both on the page and in the source, the menu div appears where it does because it is floated right. Here's the menu div's CSS:

#menu { border-left: 1px solid #000; border-bottom: 1px solid #000;
float: right; padding: 10px; width: 160px;
margin: 0px 0px 10px 10px; background-color: #eee; }

The menu div has an #eeeeee background color, which I do not particularly care for but has never bothered me to the point that I felt a burning need to change it.

The sidebar content can be divided into three sections: a description section, a profile section, and an archives section.

Description

The Basic subsection of the Dashboard Settings zone features a Description field for describing the blog.



As shown by the preceding screen shot, the Description field's value can contain textual markup (for two paragraphs and a link in my case).

The menu div's first child is a Description div that holds the Description field value, which is the replacement text for a <$BlogDescription$> reference.

#Description { padding: 0px; padding-top: 10px; font-size: 12px; font-weight: normal; }
...
<div id="menu">
<div id="Description"><$BlogDescription$></div> ...

All of the padding properties have an initial value of 0 and therefore the padding:0px; style declaration can be removed. The font-weight property's initial value is normal and therefore the font-weight:normal; declaration can also be thrown out.

Profile

(N.B. Some versions of the Bluebird template do not have a SideBar div and wrap the archives section in an Archives div. What I describe in this and the next sections was true of the Bluebird template in March 2005, when I began blogging.)

#SideBar { font-size: 12px; margin-top: 15px; }
...
<div id="SideBar">
<!-- The profile section: -->
<$BlogMemberProfile$>
<!-- The archives section: -->
...
</div>

The menu div's second child is a SideBar div that holds both the profile and archives sections of the sidebar. I access my Blogger profile via a widget in the upper-right-hand corner of the Dashboard; if at my Edit User Profile page I
(a) upload a myPhoto.jpg Profile Photo,
(b) enter a Display Name in the Identity section (as is required),
(c) complete the Location section, and
(d) provide an Introduction in the Extended Info section, then
the <$BlogMemberProfile$> reference in the SideBar div is replaced by the following code:

<div id="profile-container">
<h2 class="sidebar-title">About Me</h2>
<dl class="profile-datablock">
<dt class="profile-img">
<a href="http://www.blogger.com/profile/10603056373768030580">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJm5Hz5bzABaho0GwcfwRK0uTTAKpSlE4uUZt0cKBFevzwfqT-Rr2l6OGLZOM21qhiFhnUsqeWw0N_7w57C0LWrgHeeSJ8ZcuCIH7fPrEaXAJ0VQc_iNow5HhQDMr6WjuTJ379qWZSYF-W/s1600/myPhoto.jpg" width="80" height="58" alt="My Photo">
</a>
</dt>
<dd class="profile-data">
<strong>Name:</strong>
<a rel="author" href="http://www.blogger.com/profile/10603056373768030580"> A. Peak </a>
</dd>
<dd class="profile-data">
<strong>Location:</strong>
New Orleans, LA, United States </dd>
</dl>
<p class="profile-textblock">Introduction text...</p>
<p class="profile-link"><a rel="author" href="http://www.blogger.com/profile/10603056373768030580">View my complete profile</a></p></div>

In-source-order commentary

• The sidebar-title h2 inherits a font-size of 12px from the SideBar div -
h2.sidebar-title { font-size: inherit; }
- pretty small for an h2, whose default font-size is 24px.

• The HTML dl, dt, and dd elements are detailed here.

• The profile-img dt is given an inline rendering (the dl, dt, and dd elements normally have a block-level rendering), but its only content is an image-link whose image component - the myPhoto.jpg photo - is floated left:
.profile-img { display: inline; }
.profile-img img { float: left; margin: 0 10px 5px 0; }
The former rule serves no purpose, whereas the latter declaration set should be applied to the profile-img dt:
.profile-img { float: left; margin: 0 10px 5px 0; }

• The Name: and Location: labels are given a block-level rendering by:
.profile-data strong { display: block; }

• The margin-left of the profile-textblock and profile-link p(aragraph)s is set to 0 (with respect to the SideBar div, their containing block):
.profile-textblock, .profile-link { margin-left: 0px; }
These settings are not overridden by the subsequent
p { margin: 0px 10px 10px 10px; }
rule in the style block.

The profile code contains not one, not two, but three links to my 10603056373768030580 User Profile page - a bit overkill, wouldn't you say? The View my complete profile link is fair enough but I would lose the first two of these links.

Archives

<!-- The archives section: -->
<strong>Archives</strong><br />
<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br />
</BloggerArchives>
<script type="text/javascript" language="Javascript">
if (location.href.indexOf("archive") != -1)
    document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");
</script>

The <BloggerArchives> ... </BloggerArchives> node is a container for links to the blog's archive pages. The <$BlogArchiveURL$> reference is replaced by a URL for an archive page. The replacement text for the <$BlogArchiveName$> reference is based on the selected option of the Archive Index Date Format selection list in the Formatting subsection of the Dashboard Settings zone.

<a href="http://reptile7.blogspot.com/2005_03_01_archive.html">March 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_04_01_archive.html">April 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_05_01_archive.html">May 2005</a><br>
<a href="http://reptile7.blogspot.com/2005_06_01_archive.html">June 2005</a><br> <!-- Etc. -->

If we're at an archive page, then a script appends to the link list a Current Posts link that points to the main page (we previously encountered the <$BlogURL$> reference in our discussion of the Title div).

Script notes
(1) The language attribute of the script element is deprecated, but you knew that, right?
(2) If you're going to validate the page, then be sure to escape the </ character sequences in the a(nchor) and strong element end-tags, i.e., document.write("...Current Posts<\/a><\/strong>");.

One last point:
When my Archives link list began getting unwieldy, I capped the height of the SideBar div at 300px and set the div's overflow to auto so as to clip but provide scrollbar access to the beyond-the-div part of the list - this is not part of the template but I thought I'd give it a quick mention.

---

We'll discuss the template's Post div in our next installment.