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.
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.
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-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!
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.
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
figcaption elements under the hood. To use it on a page, simply use
(figure:path/to/image.jpg caption: Your Caption Here)
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:
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:
Please note, this does not work with the
To make a link that draws a little more attention, try adding the
block_button class to a links. The result looks like this:
On mobile devices the button will become full-width.
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.
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.
If you don't have Node, install it.
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
Using Terminal, change your local working directory to the root of your project's folder. Run:
Don't know how to find the path? Use this image I stole from Chris Coyier:
Now, with your working directory set, run the following in terminal, and press enter:
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:
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:
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.
If you would like to contact me regarding this theme, please feel free shoot an email to [email protected], and I'll be happy to assist you in any way I can.