Posted by admin on

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


Comments ( 5 )

  1. Planet Planet | wiki . davelevy . info
    […] http://wiki.davelevy.info/planet-venus-themes/ […]
  2. Dave
    I returned to this today, and found i needed this, using css to truncate at codegrepper!
  3. Dave
    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.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close