Theming¶

Tapestry uses four layouts (i.e. themes) throughout the application. There is one main layout which is used almost everywhere, and there are three other layouts that have slight tweaks to the main layout and are used in a few specific places.

These layouts are defined in the

config/config.defaults.yml

file as

  # Layouts
  application_layout: 'tapestry_default'
  application_layout_exam: 'tapestry_default_exam'
  application_layout_gmaps: 'tapestry_default_gmaps'
  application_layout_mobile: 'tapestry_default_mobile'

The values of these fields mean that these layout files are used in the default Tapestry installation:

  app/views/layouts/tapestry_default.html.erb
  app/views/layouts/tapestry_default_exam.html.erb
  app/views/layouts/tapestry_default_gmaps.html.erb
  app/views/layouts/tapestry_default_mobile.html.erb

To start creating a custom theme, add the layout fields to your

config/config.yml

file and give them new values, for instance:

  # Layouts
  application_layout: 'my_site'
  application_layout_exam: 'my_site_exam'
  application_layout_gmaps: 'my_site_gmaps'
  application_layout_mobile: 'my_site_mobile'

Then copy the default layout files to

  app/views/layouts/my_site.html.erb
  app/views/layouts/my_site_exam.html.erb
  app/views/layouts/my_site_gmaps.html.erb
  app/views/layouts/my_site_mobile.html.erb

and edit them as you see fit.

You will likely also want to create a new css file. The default file

  public/stylesheets/tapestry_default.css

is linked from the html files in the layout directory. So, you should copy the default css file to

  public/stylesheets/my_site.css

and update your new my_site* files in the layout directory accordingly.