Typo theme creation quick guide
Clone this wiki locally
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
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
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_urlis your blog URL defined in your settings.
this_blog.nameis your blog title, defined in your settings.
this_blog.blog_subtitleis your blog tagline, defined in your settings.
content_for_layoutis the most important part of your layout. It renders the page main content according to what you’re browsing (articles, tags, categories…)
render_sidebarsdisplays 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.