Anatomy of a Theme
When creating themes, you'll be working with HTML pages, mustache templates, JavaScript, cascading style sheets (CSS or LESS), images, and manifest files. This may sound like a lot, but once you understand how all the pieces fit together, you'll realize there's not much to it!
In this topic:
HTML Template Pages and Layout
Weebly templates are HTML pages that use the Mustache templating language. Mustache allows pages to use variables that are resolved using data from the site. A Weebly page usually has the following:
|
- Body/content: This is the area where site owners add their main content by choosing from predefined layouts, or by designing the area from scratch using elements (you don't need to add that functionality to your theme - like the header layouts, it's built in). You can add sections to the body, which allow the owner to add distinct areas with different layouts. If you don't include sections in your template, users can add them later, after they choose your template.
- Footer: The universal section at the bottom of every page.
When site owners create a page, they choose from three different header types that determines where the above areas are displayed:
- Header: Has a title bar area with navigation and title/logo above a header area that normally consists of a banner image or video. The content area displays below the banner image.
- No Header: Doesn't have a header area with a banner image. Only the title bar area and content areas display.
- Splash: Doesn't have a content area and the banner image is the full size of the page.
As a theme designer, you determine how each of the header types should be designed. For example, one theme might have a Header template designed like this:
While another theme's Header page might look like this:
You need to create templates for these header types (you don't have to create one for every type and you can create different ones). The templates are in HTML and use variables to provide the content. You add div tags for each of the areas on the page (eg: logo/title, navigation, banner) to provide the general layout, and then add references to variables like {menu} or {content} to pull the content into those areas. More about creating the templates here.
Partials
While the template determines the general layout of a page, the specific content displayed on that page is controlled by partials. Partials are just what they sound like - an incomplete page, like an include or import. For example, any page in the site can use any template (one with a header, one without), but a page containing products has a very specific way of displaying a product within that template. The Product partial determines that display. As a theme developer, you can customize the structure and styling of some of these partials.
You can also create your own partials. This might be useful when you want something to appear throughout the site. You create your own partial, include it in a Weebly partial, and then it will appear on every page that uses that partial.
More about partials here.
More about partials here.
Theme Styles and Colors
Weebly themes use LESS to style components on a page. LESS extends CSS and adds features like variables and mixins. The main stylesheet for all themes is named main.less. It contains the classes, pseudo-classes, and IDs to style the different areas of the page - headers, navigation, banner, content, footer, forms and buttons, and so on. You can edit the existing LESS file as needed. In fact, you'll likely do most of your work in this file.
Themes can use a color palette to deterimine the main color scheme for a site. Palettes are optional, but they do provide a way for users to determine the main colors used on their site. A palette defines the primary color for the site, plus an optional accent color. As a theme designer, you determine where these two colors are used. You can provide any number of predefined palettes for the theme, and users can also select their own.
Here's a theme with two predefined palettes. The user can click the eyedropper icon to select any other two colors they'd prefer.
Themes can use a color palette to deterimine the main color scheme for a site. Palettes are optional, but they do provide a way for users to determine the main colors used on their site. A palette defines the primary color for the site, plus an optional accent color. As a theme designer, you determine where these two colors are used. You can provide any number of predefined palettes for the theme, and users can also select their own.
Here's a theme with two predefined palettes. The user can click the eyedropper icon to select any other two colors they'd prefer.
You can further define the color scheme of a theme by providing light and dark color variations. Color variations are a way to define specific colors for areas of a site. For example, you might create a light variation that has a white background in the header like the one above, and a dark variation that uses a black background.
Aside from light and dark variations, you can create color variations to provide color schemes that the user can't customize. For example, the Venue theme offers 4 different color variations:
Aside from light and dark variations, you can create color variations to provide color schemes that the user can't customize. For example, the Venue theme offers 4 different color variations:
Clicking a color changes the colors used for the header background and button background, among other things. Here's the same theme, but using the dark red version.
Both versions and palettes use variables in the LESS files to handle the color selections. More about implementing color variations for your theme here.
Palettes and variations are completely optional. If you don't want users to be able to change the color scheme of your theme, then you don't need to implement them.
Theme Functionality
When you create a Weebly theme, you can provide options that allow the user to change the way the theme functions or displays. For example, you might allow the user to choose how the nav bar displays (either sticky or static) or you might allow them to place a color overlay over the banner image. If you can control it with CSS, you can make it an option. Or you can choose to not provide any options at all.
Note: When you provide options or color palettes/variations, if you update your theme, the user's choices will remain after they receive the update.
JavaScript
Weebly themes use JavaScript to add functionality like event handling and mobile display. You should include the basic scripts that come with the theme you are using as your base, and then you can add your own scripts in your own custom file.
Note: Any URLs used in external scripts for your theme must use the HTTPS protocol.