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
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
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
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
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:
$ bundle exec mr-sparkle 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
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
would try and serve all your users' assets from the theme's
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
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
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!