Starting a theme

Starting a Neto theme

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

npm install -g ntheme

ntheme lets you generate and compile Neto themes!

Commands

- generate|g [options] <themeName>  Generates a Neto theme based on a Skeletal branch
- compile|c [options]               Compiles a Neto theme for the theme store
- migrate|m [options]               Migrates a Neto theme so it can use the other Theme Starter Kit scripts based on a Skeletal branch

Note that you need Node.js installed, and gulp.js installed globally to run these scripts successfully.

Generate a theme

ntheme generate themeName

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

Compile a theme

cd themeName
ntheme compile

For a theme to be published to the Neto theme store, it has to be compiled in a certain way which this module takes care of. In order for the compile script to work correctly, your theme will need:

1. Theme info file

Either your theme can have a THEME_NAME-netohemeinfo.txt file which is in the templates directory:

themeName
└── src
    └── templates
        └── THEME_NAME-netohemeinfo.txt

You can follow the Skeletal file as a template:

Or if you do not want to include this file, you can adjust your package.json to include a theme_names array of theme names. In most cases you will just have the one theme, so it would be:

"theme_names": [ "THEME_NAME" ]

2. Stylesheet

Ensure you have a stylesheet in ./css called THEME_NAME-style.css. This file should contain all your theme editor styles.

Options

-u

Compiles a theme as if it was installed from theme store, useful for the followings workflows:

  • If you want to place your theme up via FTP. This can be useful for starting a theme, as you don't have to install Skeletal on your development site, then sync your theme on top of it. That workflow doesn't work if your master theme is a different branch to Skeletal master.
  • Useful while in development because the stylesheet will be renamed from THEME_NAME-style.css to style.css, which the header template is referencing.
  • And useful because this compiled version is the outputted version Neto merchants will get, so it will give you a better understanding of the final product.
ntheme compile -u

Migrate a theme

cd themeName
ntheme migrate

If you have an older theme, its package.json might not be setup correctly, this script will update it so it has;

  • A compile script so you can run npm run compile,
  • Install Skeletal and ntheme as dependencies,
  • Add a generated_themes object.

Set up git

Now, you just need to set up git. If you're not experienced with git, We 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:

themeName
├── README.md
├── bin
│   └── compile
├── gulpfile.js
├── node_modules
├── package.json
└── src
    ├── scss
    │   └── app.scss
    ├── css
    │   └── THEME_NAME-style.css
    └── 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.

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.

Compile your styles

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

cd themeName
gulp

This will prompt gulp to watch any changes you make to src/scss/app.scss and automatically compile them. You can add in new build task in the gulpfile.js.


Was this article useful?

Be notified when this page is updated. Optional.