Changing the design
Out of the box Nesta has a clean simple look, but for many sites you're going to need to change it. There are two approaches that you can take:
- Install a different theme.
- Implement your own design, either from scratch or based on the default templates.
-
Choosing a theme
Themes are typically stored in Git repositories, and can be installed into the
themesfolder with thenesta theme:installcommand. Several themes can be installed at once, but only one will be active. The active theme is set in theconfig.ymlfile. -
Editing the default templates
Start here if you'd like to base the design of your site on the default templates (or an existing theme).
-
Creating a new design
If you need to implement your own design from scratch this is the page for you.
-
Templating engines
By default Nesta uses Haml for HTML templating, and Sass (in the Sassy format) because -- once you're used to them -- they're just better. If you'd rather change them (e.g. to Erb and the SCSS syntax) you'll need to tell Nesta how to find your templates. You can use any of the templating engines that are supported by Sinatra -- this page shows you how.
-
Creating Themes
Everything you need to know to design and release your own Nesta themes.
Articles on Changing the design
-
Setting up rack-codehighlighter
If you write about software, you can make code look more attractive by adding syntax highlighting to your pages. Nesta is a Sinatra app (and is therefore built on top of Rack), which makes it easy to setup syntax highlighting with the
rack-codehighlightergem. -
Refresh the browser when you save a file
Most of the pages on a Nesta site are written in a text editor, using Markdown or Textile. You don't get to see what your words look like on a web page you save the file to disk and reload your browser. Wouldn't it be nice if your browser automatically reloaded pages as you saved them? When designing a theme, what if changes to HTML and CSS were reloaded immediately?
-
Running a blog in a larger site
We start by customising the default templates and using a different layout for blog articles. We then move the blog to the URL /blog, freeing up your site's home page for different content.
-
Making an Art Directed blog
When Geoffrey Grosenbach released the new PeepCode blog it made quite a splash. Each article is beautifully presented with its own unique design. When he [wrote about][peepcode] how he'd based his blog on Nesta I got lots of questions asking how to achieve something similar.