Typo theme creation quick guide

Typo offers a very slick and evolved theming engine. It allows theme developpers to override every view of the application, or just add their own layout, stylesheet, and let Typo do the job.
Many themes at Typogarden have been developped long before our current theming engine was introduced, letting people believe you can’t create complicated themes for Typo. That is, indeed, wrong.

A Typo template is made a minima with 3 main files: 

    <li>The layout.</li>
<li>A CSS stylesheet.</li>
<li>An about file using markdown.</li>
<li>You can eventually add a screenshot, and some fancy pictures in your theme, but they are not mandatory.</li>

Browsing a Typo theme looks like:

themes 
      \_ my theme
                 \_ about.markdown
                 \_ images
                 \_ layouts
                           \_ default.html.erb
                 \_ preview.png
                 \_ stylesheets
                               \_ style.css

Your main file is in layouts/default.html.erb, which is your theme main template. This is a simple RHTML file in which you’ll call Typo main methods.

Your layout’s header

This is a standard HTML file header, along with some ruby calls. Nothing complicated at all here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head profile="http://gmpg.org/xfn/11">
  <title><%= h(page_title) %></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="fr" />

  <%= stylesheet_link_tag "/stylesheets/theme/style", :media => ‘all’ %>
  <%= page_header %>
</head>

There are some things you must pay attention to:

  • h(page_title) is the title of the current document. This is generated by Typo, and translation in supported languages is done when avaliable.
  • stylesheet_link_tag is where you call your CSS stylesheet. It will always be in /stylesheets/theme/. Some call it style.css, some application.css, but do whatever you want.
  • page_header withh display a page header generated by Typo. It will provide:
    • ICBM tag, for geo localization.
    • Your meta description.
    • Your meta keywods.
    • Your RSD.
    • URLs for both your RSS and Atom feeds, for automatic discovery.
    • Stylesheets used by Typo embedded plugins, so that you don’t have to care.
    • Google analytics tags, if provided.

Your layout’s body

Every div included here are not mandatory. You just need to care about the ruby calls.

<body>
<div id="header">
  <h1><a href="<%= this_blog.base_url %>"><%= this_blog.blog_name %></a></h1>
  <h2><%= this_blog.blog_subtitle %></h2>
</div>

<div id="page">
  <div id="content">
    <%= @content_for_layout %>
  </div>

  <div id="sidebar">
    <%= render :partial => ‘shared/search’ %>
    <%= render_sidebars %>
  </div>
</div>

</body>
</html>

The importants things are:

  • this_blog.base_url is your blog URL defined in your settings.
  • this_blog.name is your blog title, defined in your settings.
  • this_blog.blog_subtitle is your blog tagline, defined in your settings.
  • content_for_layout is the most important part of your layout. It renders the page main content according to what you’re browsing (articles, tags, categories…)
  • render_sidebars displays your sdebar made of Typo plugins.

Here you are. You can now build a standard Typo theme and profit form the great things Typo can provide. […]

Published on Sun, 21 Dec 2008 10:09
2 comments

Typogarden is now our new official themes repository

We’ve been working the whole week-end to set up the new Typogarden, and even thoug there are still much themes to port, we’re happy to announce our new official theme repository is now open.

Typogarden used to be Typo theme contest website. Unfortunately, the site became a forsaken land since mid 2006. We had the project to take over it and make it revive for long, but lacked both the domain name and the time to do it. And since a garden is notheing without a gardener, we’re happy to welcome Damien Mathieu, a French web developper and happy Typo user as Typogarden maintener. Welcome to the crew dude. I’m sure you’ll be the man.

There’s still a lot to do. First we need to finish importing themes from Proofread and dev411. Then, port some popular Wordpress themes to Typo to enlarge our collection, and wait for genuine theme submission.

Submit a theme to Typogarden?

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.

  • 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.
  • 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.
  • Keep an eye on your ticket in case there are any reservations raised before it can be added.
  • Bask in the glory of being a typo contributor!

[…]

Published on Mon, 09 Jun 2008 10:06
1 comment

Poll : a new default theme for Typo 5.0

After last week Rails 2.0, Typo 5.0 is soon to be released. As this is a major change, we have decided to change the default theme and to let you decide what you want as a default theme.

Standard issue

standard issue

View Standard Issue in action.

Dirtylicious

dirtylicious

View Dirtylicious in action.

Abstract

Abstract

View Abstract in action.

Rambling Soul

Rambling soul

View Rambling Soul in action.

Nautica

Nautica

View Nautica in action.

[…]
Published on Thu, 13 Dec 2007 10:39
3 comments

RSS