Typo theme engine

Typo has had theme support since before Typo 2.5.0 was released, but the first version of Typo’s theme engine didn’t include the ability for themes to change any of the HTML generated by Typo’s views. Themes could change CSS, graphics, and the top-level layout that generated the HTML for the site, but individual HTML blocks, like comments or article bodies, couldn’t easily be changed.

The latest release, Typo 2.5.7, fixes this shortcoming. It’s now possible for themes to completely override any bit of HTML or XML that Typo generates. Here’s how it works:

Like all Rails apps, Typo stores all of its HTML views in app/views/<controller>/<viewname>. For example, the view that generates individual article pages is app/views/articles/read.rhtml. The theme system in Typo 2.5.7 and newer lets themes override views by putting a replacement file into themes/<themename>/views/<controller>/<viewname>. So if I created a new theme called scottstuff and wanted to override the read.rhtml view from above, I’d put the new view into themes/scottstuff/views/articles/read.rhtml. Typo would then read this view from the theme instead of app/views.

It’s also possible to replace the HTML generated by sidebar plugins; just put the replacement view into themes/<themename>/views/plugins/sidebars/<sidebarname>/content.rhtml.

Typo should pick up on the new views immediately, even in production mode, but you’ll have to flush the page cache before the views really take effect.

Here’s how it works.

Rails doesn’t really have any notion of a “view search path”–it knows exactly which directory should contain every view. So, in order to add the ability to search multiple directories, I had to override parts of the Rails core. Fortunately, Ruby’s open classes are good for on-the-fly patching of things like this. Here’s the code that implements it:

module ActionView
  class Base
    alias_method :__render_file, :render_file

    def render_file(template_path, use_full_path = true, local_assigns = {})
      search_path = [
        "../themes/#{config[:theme]}/views",     # for components
        "../../themes/#{config[:theme]}/views",  # for normal views
        "."                                      # fallback
      ]

      if use_full_path
        search_path.each do |prefix|
          theme_path = prefix+'/'+template_path
          begin
            template_extension = pick_template_extension(theme_path)
          rescue ActionView::ActionViewError => err
            next
          end
          return __render_file(theme_path, use_full_path, local_assigns)
        end
      else
        __render_file(template_path, use_full_path, local_assigns)
      end
    end
  end
end

This lives in lib/renderfix.rb in Typo 2.5.7 and gets included explicitly by environment.rb. Feel free to use this in your own projects; it’s under the MIT license, just like the rest of Typo.

Posted by Scott Laird Wed, 09 Nov 2005 00:46:00 GMT

Read full article 50 comments


Comments

  1. Schmoboy 1 day later:

    Just curious…

    How do you produce the syntax colored div?

    Thanks…

  2. Scmoboy 1 day later:

    Nevermind, Syntax, right? Sorry brain fart… :)

  3. Phil Leitch 12 days later:

    Is it possible to edit the layout of the sidebar nodes? I know there is that class assigned now but is it possible to edit the categories or archives like you can with articles?

    thanks.

  4. Jamal Abdou Karim Bengeloun 13 days later:

    Hi,

    I am trying to understand how theming works in Typo 2.6.0 - What is the local.css file for? Everybody seems to leave it empty. So why not remove it completely?

    There’s also a

    <script type="text/javascript"><%= @content_for_script %></script>

    line in the default.rhtm, but I’ve tried it with every theme I could find and nobody uses it but… You! lol! What is its use?

    Thanks a lot!

  5. Scott Laird 13 days later:

    local.css was added to make it easier for people to make small CSS modifications to the default Typo theme without having to invest the time needed to maintain their own theme. If you’re building a new theme, feel free to leave it out.

    @content_for_script is used whenever a view adds new JavaScript and doesn’t want to it inline. I’m probably the only user with my nasty, over-hacked comment system, and even that will go away once I have time to finish my comment rewrite.

    However, there’s a decent chance that the new comment code will need @content_for_script, so I’d recommend leaving it in.

  6. Jamal Abdou Karim Bengeloun 15 days later:

    Thanks a lot!

    I’ve just started my theme (Yes I know I am utterly mad, Mwahahaha! lol!) and this helps a lot!

    Cheers!

  7. seb 4 months later:

    I am a Typo newbie and I want to add some code in my blog Thanks

  8. Nash Kabbara 5 months later:

    Hi,

    I’ve been trying to figure out where the config variable (in “../themes/#{config[:theme]}/views”) is being set.

    Would you please guide me to right location.

    Thanks.

  9. Scott Laird 5 months later:

    It’s set in the admin theme tab; it’s the name of the theme that’s in use on the site.

  10. Nash Kabbara 5 months later:

    Hi Scott,

    Thank you for replying.

    I meant the config object itself, not the :theme item. It seems that it is of type class Configuration, but I can’t find where the config object is being assigned that class i.e something like (config = Configuration.new).

    Also, I don’t understand why the config object is visible inside this w/o being assinged there?

    It looks like typo is overriding a lot of the rails defaults. Like in the vendor dir, there’s a lot of stuff that usually exists under the rails installation. Would you please explain why this is?

    I tried looking through your blog for answers, but I couldn’t find them.

    Thanks a lot for creating Typo. I love it.

    -Nash

  11. Nash Kabbara 5 months later:

    I figuered out why vendor contains all these rails files. Freezing.

    As far as config, I still can’t find where it’s being created…

    Thanks.

    -Nash

  12. Praca Oferty 7 months later:

    wow thanks for this all - very useful informations!

  13. Jimy 10 months later:

    Ruby is amazing engine, great article Scott, tnx u. I m going to try it for my blog

  14. katalog 10 months later:

    Someone else below asked this already. I am getting nailed with Spam in my guestbook for our catalog website. Is there anyway to stop this?

    If not, there really isn’t any point in leaving it up and active. Any help will be greatly

    appreciated.

    Thanks

  15. katalog 11 months later:

    Is it possible to edit the layout of the sidebar nodes? I know there is that class assigned now but is it possible to edit the categories or archives like you can with articles?

    thanks.

  16. Pozycjonowanie 11 months later:

    am a Typo newbie and I want to add some code in my blog Thanks

  17. Restposten 11 months later:

    I will add this to my blog, good work…

  18. Tottigol 11 months later:

    Thanks a lot for this article and information. I’ll send your url to some friends … Greetz

  19. Daniel 11 months later:

    Great stuff - very useful.

  20. Shopper 11 months later:

    Thanks a lot for the useful information.

  21. Pension 11 months later:

    I´m also wondering, how to produce the syntax colored div. Maybe someone know?

  22. Kent 12 months later:

    Thanks a lot for the great stuff.

  23. CableGuy 12 months later:

    Great job. Thank you.

  24. Branchen about 1 year later:

    Thanks a lot for creating Typo. It works fine!

  25. Hotel about 1 year later:

    Thanks for this all - very useful informations!

  26. Wachs about 1 year later:

    I will add this to my blog, really good work…

  27. Buddha Orn about 1 year later:

    Hi Scott, Thank you for replying. very useful informations!

  28. Katalog about 1 year later:

    Great stuff - very very informations,thank you! It works great!

  29. Stefan about 1 year later:

    Good idee with creating. Make also again

  30. Webwelt about 1 year later:

    Thanks it helps me a lot…

  31. księgowość about 1 year later:

    it doesn’t work on my page ;/ grrr..

  32. Internetfirma about 1 year later:

    I found this code coincidental, over search machines. I use Typo too, but doesn’t function on my Site:( Where can be the problem in this code?

  33. Brustvergrößerung Berlin about 1 year later:

    A very interesting site, I think. The Idea of Technometry was new for me but worth to be read and thought abot it (although I’m not a native english-speaker and have some difficulties whith this language)

  34. Versicherung about 1 year later:

    It’s set in the admin theme tab, it’s the name of the theme that’s in use on the website.

  35. diciottenni con dildo about 1 year later:

    diciottenni

  36. corso inglese avanzato about 1 year later:

    corso

  37. congeniale segretaria sexldo about 1 year later:

    congeniale

  38. bacheca serratura about 1 year later:

    serratura

  39. soprannaturale buco sacro about 1 year later:

    soprannaturale

  40. Kostenlose Kreditkarte about 1 year later:

    I don’t like engines, free scripts and templates. The problem is always: If the finction of the script will be hacked, all sites which use the script will be also hacked ;-(.

  41. Curt about 1 year later:

    Great job - thanks a lot!

  42. Sador Numspach about 1 year later:

    In our research we described Maud, an analysis of local-area networks. We validated not only that the lookaside buffer and e-business can interfere to address this challenge, but that the same is true for digital-to-analog converters. Further, we validated that despite the fact that link-level acknowledgements and DHTs are entirely incompatible, the infamous event-driven algorithm for the emulation of virtual machines by White follows a Zipf-like distribution. Lastly, we verified that checksums and the transistor can interfere to overcome this obstacle.

  43. Brautkleider about 1 year later:
    Hi, thank you for support. I asked my admin to try it in our page and he was very happy with this recommandation. No my System administrator will think that I`m very professional in this ;-)) Go on and have a nice christmas…
  44. D-man about 1 year later:

    Innovative effort :)

  45. KFZ about 1 year later:

    I wanted to thank you for this support too! Typo is not very simple and needs time to learn it, but it really powrefull tool and i like it! Greetings!

  46. einemillioneurohomepage about 1 year later:

    Wow. Very impressive.

  47. einemillioneurohomepage about 1 year later:

    Very good and great

  48. Webdesign Hürth about 1 year later:

    Thanks again.

  49. Shopping about 1 year later:

    Great stuff - fine informations.

  50. Andreas about 1 year later:

    Great job thank you