I use Sam Ruby’s Planet Venus. The package comes with two themes, I have always rather liked the ‘Fancy’ theme. This article was finished in May 2011, and talks about the css required to amend a planet output page in HTML/CSS. It was written for my planet G3 feed which was a G3 RSS repeater. It may just be a useful source for those who wish to create new themes. (I shall be doing this in March/April 2015 as I develop the refresh of davelevy.info.)

The fancy theme has a file called index.html.tmpl which contains templating language instructions that generates DIVs with the following classes

  • .daygroup
  • .channelgroup
  • .entrygroup
  • .entry
  • .date

I created rules for each of these. They are pretty similar, I wonder what the syntax for one rule with multiple names is.I inserted the following CSS code to implement the auto margins

BODY { width: 570px;
  font-family: "Bitstream Vera Sans", Verdana, Helvetica, Arial, sans-serif;
  margin : auto;
  padding-top: 4px;
}

I also reviewed Centering: Auto-width Margins at Blue Robot which is the inspiration for http://davelevy.info site.

I used the following code to create a header

#header {
  height: 2cm; width: 566px;
  background-image: url(images/slim.png);
  text-align: right; font-size: large; font-weight: bold;
  text-shadow: 0.1em 0.1em #fff;
  padding-right: 4px;
}

The width is due to the picture size. I discovered text-shadow on google which pointed me at this page at w3.org.

I experimented with css position and float rules to get what I wanted and used More meaningful typography at http://www.alistapart.com to help and guide me, together with the css files at davelevy.info. There is a boundary clash or is it a recognition problem between the generation of div tags and the hard coded tags in the template file, which I was unable to debug.

I thus moved the critical sidebar data to the header section. I have made the hyperlinks to the XML files a list and included the planet/venus credit in list. The list CSS is as follows,

ul { list-style-type: none; display: inline;}
li {display: inline;}

This CSS is hinted at and examples given at another alistapart.com page, CSS Design: Taming Lists.

My final frig is to insert the following links into the file

<link rel="alternate" type="application/atom+xml" 
    href="http://davelevy.dyndns.info/planet/g3/atom.xml" title="ATOM">
<link rel="alternate" type="application/rss+xml" href="rss20.xml" title="RSS 2.0">
<link rel="alternate" type="application/rss+xml" href="rss10.xml" title="RSS 1.0">

I was hoping that this would produce the subscribe to xml button in the URL bar but its not enough. I wonder what else is needed. Sitepoint’s reference page on the LINK rel attribute refers to the link tag. This was a browser feature which has been sadly deprecated.

 

5 Replies

  1. The object of the face parameter, assumes a location in the ./images folder i.e. the string face = LI.png resolves as src=”images/LI.png”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.