Typo theming guide

Checking out the source

The Subversion repository resides at svn://www.typosphere.org/typo, so checking out the current trunk can happen with a command like:

svn co svn://www.typosphere.org/typo/trunk

The themes will be in the themes directory. There’s a list of additional themes available via Typo’s theme directory.

Creating a theme in 5 quick steps

  1. First, copy an existing theme directory as a basis for your work (this ensures that all the needed directories are there): cp -r azure my_new_theme
  2. Next, get creative!! Be sure to put necessary images and stylesheets in the appropriate directories. Look at the existing theme for the paths to use these resources (../../images/theme/image.gif). The page layout for your theme is done by layouts/default.rhtml.
  3. Every theme should also include the /public/stylesheets/user-styles.cssfile in order for the user to be able to override certain CSS rules to his/her liking. Please use the azure example to properly fit your theme into this scheme.
  4. Be sure to edit about.markdown with information about your theme and to include a preview.png that is 200 or 256 pixels in maximum dimension.
  5. Test your theme by switching from another theme to yours in the admin interface.

Styling other parts of Typo

The current azure theme only styles the layout wrapper: layouts/default.rhtml.

Since typo 2.6.0 if you would like to format other portions of Typo make a ‘views’ directory under your theme, and from there replicate the app/views directory. You don’t have to copy all the files, just what you need.

Packaging a theme for submission

Now that you have tested your theme, it looks great, and you’re a kind and giving person, so you want to share it with other typo users. Remember, typo thrives on the contributions of the many contributors all around the world. Please do become one of them.

While guaranteeing full employment for intellectual property lawyers may seem to be a laudable goal to some, please make sure that you have permission to use all the elements you submit with your theme before you send it in.

  1. Make a “tar ball” or zip : Zip up your theme directory or make a tar ball with a command such as tar cjvf mytheme.tar.bz2 mytheme.
  2. Share your well-tested theme: Create a new ticket with [THEME] as the first word in the summary and upload (not paste) your zip or tarball.
  3. Keep an eye on your ticket in case there are any reservations raised before it can be added.
  4. Bask in the glory of being a typo contributor!

Things to watch out for

One thing to watch out for is the caching system–if you’re running in production mode, then editing the files in theme/yourtheme won’t generally show up immediately, because they’re cached by Typo. The easy fix is to do development (even theme development) in development mode. If you’re in production mode, then visit the Admin cache page and click on empty cache–that’ll help.

Whatever you do, don’t edit the files in public/stylesheet/theme/ or public/images/theme/ – they’ll be deleted automatically when the cache is flushed, and that happens automatically every time someone posts a new article or comment.

An additional easy way of seeing the changes you made is to activate another theme (eg. azure) and then re-activate your theme. In this case, a seperate open browser window with the admin-panel is quite handy.

This entry was posted on Sun, 26 Aug 2007 22:58:00 GMT and Posted in . You can follow any any response to this entry through the Atom feed. You can leave a comment .


Comments

Leave a response

Leave a comment