Starting a theme

Starting a Neto theme

To build a new theme, you will want to use the Theme Starter Kit.

For theme development you will need Node.js installed, and gulp.js installed globally.

How to build a theme

Set up directories and clone the kit

To start, you need a Themes directory where you will keep this repository as well as the repositories for each of your themes. Your Themes directory will eventually look something like this:

Themes
├── Theme-Starter-Kit
├── Ardrossan-Theme
├── Cart-Brewery-Theme
├── Classic-Theme
├── Country-Theme
└── Sherwood-Theme

After you have created your new Themes directory, clone the Theme Starter Kit repository into it:

cd Themes
git clone https://github.com/brandonsheppard/Theme-Starter-Kit.git

Your themes directory should look like this:

Themes
└── Theme-Starter-Kit

Generate your theme

We are now ready to generate our first theme. To do this we simply need to navigate to our Theme-Starter-Kit directory in terminal and run the script which will generate our theme.

cd Theme-Starter-Kit
bin/generateTheme mynewtheme

Note: You would replace mynewtheme with the name of your new theme.

Set up git

Now, you just need to set up git. If you're not experienced with git, I recommend you install GitHub Desktop and set up the repository using the app.

Customising templates

It's important to know that your themes repository should only contain the templates which are different to the templates on Skeletal. This is why your new theme only contains the header, footer and homepage by default:

mythemename
├── README.md
├── bin
│   └── compile
├── gulpfile.js
├── node_modules
├── package.json
└── src
    ├── css
    │   ├── app.css
    │   ├── app.less
    │   └── mythemename-style.css
    ├── js
    │   └── custom.js
    └── templates
        ├── cms
        │   └── home.template.html
        ├── footers
        │   └── template.html
        └── headers
            └── template.html

This means that if there are any templates that you wish to customise in your theme which are not included by default, you just need to copy them from the latest version of Skeletal into your theme.

How to upload your customisations

To actually develop your theme, you need to install the latest version of Skeletal on your Neto website from the theme builder. From here, you need to upload the contents of your theme's src directory over the top of Skeletal's templates.

You will need to configure your FTP application to upload your files without removing any files that are on the server and not in your local directory. This way, your Neto website will be using all of the default Skeletal templates for any templates that are missing from your theme.

How to compile your styles

Any custom styles which you add to your theme should be done in src/css/app.less. This file can be compiled into app.css by running the gulp command in your theme:

cd mythemename
gulp

This will prompt gulp to watch any changes you make to src/css/app.less and automatically compile them.


Was this article useful?

Be notified when this page is updated. Optional.