demovibes title icons should use CSS specified images

Currently demovibes uses img tags to specify the icons for all titles. This
isn't very flexible from the standpoint of theme designers. Theme designers
may wish to change these icons but are unable to do so.

The current (existing) markup looks like this:

<h2>
<img alt="" src="/static/sound.png" class="icon_header">
Currently Playing
</h2>

The markup/CSS required to move the icon image out to the stylesheet (and
thus themeable) would look like this:

<h2><div class="icon_header">Title text!</div></h2>
.icon_header {
   vertical-align: middle;
   padding: 4px 1ex 4px 30px;
   background-image: url(...);
   background-repeat: no-repeat;
   background-position: 7px center;
}

The above only allows one icon for all titles. To properly support
different icons for different titles, each title would have to be tagged
with a unique id, so that the following CSS could be used instead:

#title-name .icon_header {
   background-image: url(...);
}

The background-image property specified in the first .icon_header block
could then be removed.

The benefits of this change would enable themes to style all titles with
icons or specify which ones do not have icons. It will also benefit themes
such as NectaLift, where the right-aligned titles in the main content area
allot space for icons even if none are present. With the images specified
by CSS, no space would have to be allotted if no icon is used.

Original issue reported on code.google.com by mcbain....@gmail.com on 22 Feb 2010 at 1:41

GitLaboratory / demovibes

demovibes title icons should use CSS specified images #59