Last updated: Aug. 23, 2016
Theme Directory Structure
If you choose to work within the Weebly code editor, the directories are created remotely. You don't need to store anything locally. However, if you want to work in an external editor, then you'll need to export and unzip a theme.
When you do, you'll see that the theme's root directory contains the following:
- HTML template files for each of the different header types
- partials (directory): Contains custom partials used on the pages (note that if you do not edit the default partials, they aren't included in the Zip file. Only customized partials are included).
- 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.
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.
Note: When zipping your theme, be sure to zip the contents of your root folder, and not the root folder itself. Your theme will be invalid if it includes the root folder!
When uploaded, the editor recognizes the files and folders and places them accordingly in the navigation pane of the editor, so the logical structure will be different than the 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.
Note: Be careful to always use the physical path when you refer to assets in your code. For example, to refer to images in the Base theme, you would use /images/dark-background.jpg and not /assets/images/dark-background.jpg.
© 2015-2016, Weebly, Inc.