How to make a theme for neto



Making themes with Neto is super simple. If you are proficient with HTML and CSS, it shouldn’t take very long to get into the swing of things.

This article will go through the basics of our template system and then we’ll move onto the typical workflow for creating a theme.

Before you begin

Make sure you request SFTP access from us so you can make changes.

If you don’t have an FTP program, we recommend using FileZilla which you can download here.

Getting around the Neto file system

Every Neto theme has a folder for the theme and it's assets. This folder contains every JavaScript, CSS and image file that the theme depends on.

This folder is only accessible via FTP, and contains the markup for your theme. The files in this folder are parsed by Neto to create the pages you see on the front end.


The theme assets for the default theme, skeletal, is located in:
/httpdocs/assets/themes/skeletal


A closer look at the templates

Neto’s CMS has 5 main page types, but chances are you’ll only need to work with two: Content pages and Product pages.


Content Pages

Content pages cover everything from the homepage to the category pages. Most of them speak for themselves, but below is a quick overview of each of the default pages and their purpose.


Located in /httpdocs/assets/themes/your-theme-name/templates/cms


home.template.html - Everything contained on the homepage is in this file.

default.template.html - This is the default template for any content pages, such as the About Us page.

category.template.html - This page contains the contents of the standard category page. It has a list of all products in the category, as well as things like the category description.

search_results.template.html - This page is very similar to the category page. It is the template for all search results. Chances are you’ll want to make many of the changes you make to the category page to this page as well.


Product Pages

Product pages are simply the pages that display the details of your product to the customer. They contain their own /includes/ folder.


Headers & Footers

Our templates also include headers and footers. Like any template system, these are a great way to have consistent design elements at the top and bottom of every page. You can, however, specify for content pages to use an alternate header.

By default, the header contains all CSS calls, the footer contains all .JS calls.


Includes

Includes are embedded code snippets, and work the same as they do in most CMS’s. By default, we only have sidebars in here, but you can make your own includes and call them via the [%LOAD_TEMPLATE%] tag.


Thumbs

These are the templates for all of the thumbnails used across the site. They are mostly used for product thumbnails on category pages and advert thumbnails in banners.


Cart, Customer, Stockists

You can also edit various elements of the Cart, Customer and Stockist pages. Stockist pages are simple to edit and function similarly to any Content page.

We do not recommend people make changes to customer and cart pages, however, unless they’re confident with the template system first. Typically, when building a theme, you should not need to make many significant changes to these pages.


A closer look at the Assets

Assets are really simple in Neto and work the same as any other system. Our software does not parse or modify these assets at all, except when users are customising themes.

By default, we include Bootstrap, Fancybox and a few other core plugins that our software depends on. We do not recommend changing or removing these plugins.

If you would like to include an asset in your templates, we recommend using the [%NTHEME_ASSET%] tag. This tag is great for theme building. It will automatically put the full asset URL up until the theme name. This means if you rename the theme, you will not need to change any of the URLs. This tag will also add a query string to the end of every URL after a user saves any customisations to the theme. This effectively circumvents any asset caching that may be on the site due to CDN services.

Note: This tag only works on templates. You cannot use the [%NTHEME_ASSET%] tag in an asset file, such as a CSS or Javascript file, as our software does not parse these files.


Neto (B@SE) Tags

So far we’ve mentioned a handful of tags that you can use in our templates, such as [%NTHEME_ASSET%] and the [%LOAD_TEMPLATE%] tag. These are both B@SE tags.


Our parser will go through template files on page load and parse these tags for you. There are many tags, and they can be extremely powerful [%IF%] tags and expressions for example). We wont go through them in this walkthrough, but you can find a list of all B@SE tags here.


Let’s make a theme

Using the above as a reference, and our tag library, you should be ready to get started on your first Neto theme. For the sake of simplicity, this walk through will assume that you’re happy with the default functionality of our base template, and that the changes you wish to make are purely structural (HTML) and aesthetic (CSS).

There are 3 steps to making a Neto theme. Firstly, you need to Install a base template, then you need to make your customisations.

Step 1: Install a new theme

All custom themes should be built from our base template, Skeletal. In order to install the latest version of Skeletal, complete the following steps:

  1. From the Neto dashboard, navigate to Webstore > Theme editor.

  2. Locate the Skeletal theme and click Install. Now you’ll want to set your theme to Skeletal.

  3. We’ll come back to the theme builder later, but for now the rest of the work is done via FTP. Feel free to get started here though. If you want, you can make minor customisations from the Customise tab, before you even have FTP access.

Some developers prefer to do things like change font, link and button colours here to save a bit of time.

Eventually we’ll learn how to set up our own customisable fields for themes.

Step 2: Customise your theme

For CSS, we’ll typically make all changes to the style.css file (httpdocs/assets/themes/skeletal/css/style.css).

This is important, because it means you can update dependencies like Bootstrap or Override.css in the future and keep your custom styles. This is also the only file that the theme builder reads/edits when users are customising their themes in the control panel.

Step 3: Make your theme customisable

You can make most styles in the styles.css file customisable.

In style.css, next to the style you want to be customisable, include a CSS comment with the desired ID of the customisable field.

.dropdown-menu>li>a:hover {
background:none;
background-color: #006dcc /{primary-colour}/ ;
}

This will now be customisable in the back-end under the title primary-colour. You can also reuse this tag, as long as the style is identical every time.

It does display a bit ugly though. We can rename these to something a bit more presentable by matching them up in the style.info.txt (httpdocs/assets/themes/skeletal/css/style.info.txt) file.

Where you simply need to add it, with the nicer name to the right, separated by a colon.


primary-colour: Primary Colour


  • Last Modified: 23/08/2016 Neto Version: 6.3