Posted by Dave on

Planet (Venus) Themes (CSS)

Planet (Venus) Themes (CSS)

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

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 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

I experimented with css position and float rules to get what I wanted and used More meaningful typography at to help and guide me, together with the css files at 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 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="" 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.


Comments ( 5 )

  1. Planet Planet | wiki . davelevy . info
    […] […]
  2. ReplyAuthorDave
    I returned to this today, and found i needed this, using css to truncate at codegrepper!
  3. ReplyAuthorDave
    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"
  4. NEC blogs, an aggregator |
    […] some margins, make it responsive and possibly reposition the meta panels. I looked at my snip, Planet (Venus) themes (CSS) and revised it slightly, otherwise here are my notes. […]
  5. RSS Autodiscovery |
    […] needed to check my notes on RSS autodiscovery; I wrote about it in passing in my article on Venus, and on returning found this article by Pete Freitag. The key idiom is to add a <link> tag in […]

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