To make a simple theme for Nesta you only need to write some Haml and Sass (or Scss), and drop the files into the right directory.
Making a simple theme
Let’s make a new theme, based on an existing theme. We can use the
nesta theme:create command to save us a bit of typing. It will make an empty
app.rb file, a
README file, and a couple of empty directories:
$ nesta theme:create mytheme $ ls themes/mytheme README.md app.rb public/ views/
For the purposes of this example, let’s give ourselves a head start by basing our work on the Slate theme.
$ nesta theme:install git://github.com/gma/nesta-theme-slate.git $ cp themes/slate/views/* themes/mytheme/views/
themes/mytheme/views/master.sass in your editor and find the code that sets the background color of the
h2 tag (as I write it’s on lines 160-161, but it may shift about a bit as
master.sass gets updated):
h2 background: $background-tint - #111 background: rgba($background-tint - #222, 0.4) url(/slate/images/lines.png) repeat
You’ll see that the background is set twice; first to a solid background color, and then again to a combination of a translucent colour and the
lines.png file (the second rule will be ignored by browsers that don’t support
rgba alpha transparency). Change the background rules to this:
h2 $h2-tint: #8AE32A background: $h2-tint + #204 background: rgba($h2-tint, 0.5) url(/mytheme/images/lines.png) repeat
Have a quick look through master.sass for other references to
/slate and change them to
/mytheme (there should be at least one).
Now enable the theme:
$ nesta theme:enable mytheme
To see if it worked, start a local copy of Nesta and check your local site in your browser:
$ shotgun config.ru
The background colour on headings should have changed to green. It should look something like this:
You can override any of the default Haml templates the same way. See the documentation on changing the design, paying attention to the section on “Overriding the default templates”.
If you have any static files (i.e. “assets”) to include in your theme it’s a good idea to store them in the theme’s
public folder. We tell Nesta how to find these assets by configuring the
Rack::Static middleware – uncomment this code in the generated
module Nesta class App use Rack::Static, :urls => ["/mytheme"], :root => "themes/mytheme/public" end end
If we didn’t specify the theme name as a prefix then
Rack::Static would try and serve all your users’ assets from the theme’s
public folder. This could be fairly bad news for your users if they’ve dropped a bunch of content into the top level
Due to the way the
Rack::Static middleware works this extra prefix does mean that we need to create an extra directory named after the theme inside
public, or Nesta won’t be able to find your assets.
Here’s an example:
$ ls themes/mytheme/public/mytheme/images/ delicious.png digg.png feed-icon.png reddit.png
You can add routes (such as
get "/") to a theme just by defining them in your theme’s
app.rb file. Put them inside the
Nesta::App class, like this:
module Nesta class App helpers do end get "/some/path" do set_common_variables # do stuff end end end
That’s pretty much it; you now know how to make themes for Nesta!
Please do contribute awesome designs back to the community by creating a public repo containing your theme on GitHub. Announce them on the mailing list too. I’m planning on putting together a themes section, with screenshots and links to the best themes. We need some more good themes first though, so get to it!