Skip to content

Typo theme creation quick guide

Jump to bottom Edit New page
kineticweb edited this page Sep 13, 2010 · 4 revisions

Typo offers a very slick and evolved theme engine. It allows theme developers 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 developed 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:


  • The layout.

  • A CSS stylesheet.

  • An about file using markdown.

  • You can eventually add a screenshot, and some fancy pictures in your theme, but they are not mandatory.

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_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 from the great things Typo can provide.

Add a custom footer
Add a custom sidebar
Clone this wiki locally