Instead of creating directories and files, download the Base theme and unzip it to create the proper directory structure. Or, export any other theme to start.

When you unzip the archive, you’ll see that the theme’s root directory contains the following:

  • manifest.json file. This file provides configuration for the theme, including optional functionality.
  • main_style.css file. This is the stylesheet for the theme, when using CSS.
  • HTML template files for each of the different header types
  • JavaScript files (these may be in the assets directory).
  • assets (optional directory): Contains images, fonts, and Javascript files. If there are only a few of these files, they may be at the root instead.
  • partials (directory): Contains custom partials used on the pages.
  • images (optional directory): You can either place your images in this directory, or keep them at the root. Just be sure to refer to them correctly.
  • styles (if using LESS): Contains the stylesheet(s) for the theme. If you use color variations, your theme will have more than one stylesheet.
  • screenshot.jpg file (once you create it): This file is used to display your theme in the Theme chooser, shown when a user creates a site or changes the theme.

If you are working in an external editor, once you make your changes and need to test in Weebly, zip up the contents of the directory (and not the directory itself) and import it into Weebly.

The Code Editor displays a logical structure of the directories, which is different from the actual physical structure. Header type templates are shown in the Header Type directory. Partials are shown in the Partials directory. Every other file type is shown in the Assets directory. If you created any sub-directories, those also display in the Assets directory.

This screenshot shows how the Base theme’s files appear in the editor. Note that this theme contains an images sub-directory displayed in the Assets directory.

Logical directory structure in the Editor

Help make these docs better!