Go to content Go to sidebar

Styling myRecentTitledPosts with CSS

Technology: 12 Feb 2005, 13:10

With myRecentTitledPosts Macro complete, it's time to try it out. The first step is to create a duplicate #homeTemplate.txt in the Radio_Root/2005 directory and add the macro. This adds the article list to dated pages and keeps it off the index page. Copy the template to the 2004 and 2003 directories so that it will be applied when any older posts are re-rendered. And make a note to copy the template again at the new year. 

  <div class="sidetitle">Recent Posts</div>
  <div class="history">
    <% workspace.custom.myRecentTitledPosts(maxPosts:16,prvPosts:4) %>
  </div>

Wrapping the macro in the history div provides a hook for us to style the presentation with CSS. Start by setting some basic properties for the history container (these properties are consistent with the existing properties of my weblog sidebar). 

.history {
  font-family: verdana, arial, sans-serif;
  font-weight: bold;
  color: #333;
  background-color: white;
  font-size: 11px;
  background: #FFF;
  padding: 2px;
  margin: 0px;
}

An unordered list is normally indented. Zero out the margin and the padding-left to remove the indentation and eliminate the gap between the preceding title and the start of the list. Setting the list-style-type to none removes the marker usually associated with each item in the list. 

.history ul {
  list-style-type: none;
  padding-left: 0px;
  margin: 0px;
}

Items in an unordered list are also normally indented. Here, I tweak the margin and padding-left to leave only a small indent. 

.history li {
  padding-left: 0px;
  margin: 0px 0px 3px 0px;
}

Force the links in this list to be normal weight rather than the bold used everywhere else. 

.history a {
  font-weight: normal;
}