Natura Theme

A beautiful & clean theme for Kirby

Installing Natura

To get started, create a new folder for your project and simply copy the contents of the natura_theme folder into your project's folder. From there, please refer to the official Kirby documentation to get up and running either locally, or on your own server.

Customizing the Header Image

You can use your own photo as the main header image, by editing the header custom field in your site settings. Simply log in to your panel, (or edit content/site.txt) and change it there. If it's left blank, it will default to included header image. Your photo should be 1200x400 or bigger in dimensions, if you want it to look nice and sharp.

Blogging

Natura is the perfect theme for blogging, and it's super easy to get started. If you don't have one already, create a new page and choose either the articles-simple or articles-detailed template. Once that page is created, adding a new article is as simple as creating a sub-page under your articles page, and choosing the article template. Happy blogging!

External Menu Links

Want to add a link in the main menu that links to an off-site page? No problem, simply create a new page, and choose the external template. Now just give it a title, input you're link, and you're good to go.

Using the figure kirbytext tag

I have written and included a simple plugin for kirbytext, that allows you to include a full-width image with a caption. It's called the figure tag, because it uses HTML5's figure and figcaption elements under the hood. To use it on a page, simply use

(figure:path/to/image.jpg caption: Your Caption Here)

Using the slideshow kirbytext tag

I have also written a custom kirbytext plugin for adding simple slideshows to your pages.The only requirement is your images be the same size. To use it, pass in a list of images, separated by a comma. You may use images associated with the page, or any external image. Here's how to use the slideshow kirbytext tag:

(slideshow:bird.jpg,plains.jpg,tracks.jpg,tuscany.jpg width:700 height:400 effect:slide)

Which results in something like this:

Floating Images

If you have images inside paragraphs, you'll probably want to align them to either the left, or the right. To do that, simply add the respective class to the image tag. Eg:

(image:myimage.jpg class:right)

Please note, this does not work with the figure tag.

Link Buttons

To make a link that draws a little more attention, try adding the block_button class to a links. The result looks like this:

Visit My Website

On mobile devices the button will become full-width.

Changing the accent colour

Right now the main accent colour for the theme is #299575. Unfortunately, there's no real easy way to change this, but there is a way you can do it, if you're determined.

I use Grunt as a task runner when developing websites. I won't go too much into it, but it essentially lets me compile preprocessors like Sass, and CoffeeScript into valid CSS and JavaScript, and also concatenates and minifies it, to speed up page load times.

We can change the variable value in the main Sass file, and use Grunt to compile it. The sad thing is you're going to need to use the Terminal app to accomplish this. If you are not comfortable with this, please email me, and I will provide you with an updated stylesheet you can use.

Step 1: Install Node

If you don't have Node, install it.

Step 2: Install the Grunt CLI

In order to run Grunt, we need to install the command-line interface for it. In your terminal, type the following, and hit enter:

npm install -g grunt-cli

Step 3: Install the Dependancies

Using Terminal, change your local working directory to the root of your project's folder. Run:

cd ~/path/to/my/project

Don't know how to find the path? Use this image I stole from Chris Coyier:

Changing the current working directory via drag-and-drop

Changing the current working directory via drag-and-drop

Now, with your working directory set, run the following in terminal, and press enter:

npm install

Ok, almost there. In your project folder, open up the file located at assets/styles/theme.scss, and open it in your favourite text/code editor. On line 5, you'll see this:

$accent: #299575;

Change it to whatever colour you want, and save your changes. Now, back in your terminal (you didn't close it did you?), run the following, and hit enter:

grunt sass

The output should look something like this:

Running "sass:dist" (sass) task
File "assets/styles/build/theme.css" created.

Done, without errors.

If so, you're golden! Refresh your site in the browser, and you should see your changes reflected. If you got an error, check the file you edited, and make sure you didn't mess anything up.

Questions? Comments? Requests?

If you would like to contact me regarding this theme, please feel free shoot an email to collin@syropia.net, and I'll be happy to assist you in any way I can.