Code Editor
Your website theme (also commonly referred to as a template) is what defines the overall design of your website, such as the colors, fonts, background images, and other design elements.
Simple theme changes can be made under the Design Options area, but to really customize the look of a website, you need to customize a theme using this HTML/CSS Code Editor.
Simple theme changes can be made under the Design Options area, but to really customize the look of a website, you need to customize a theme using this HTML/CSS Code Editor.
In this topic:
Using the Code Editor
You can change how the editor displays your code. Click the black square for a black background and color text. Click white for a white background.
Choose Auto Preview to update the displayed theme whenever your code changes.
Click the Search icon to search for text in the current file.
All files for the theme are shown in the left-side of the Code Editor. This logical structure shows the following:
Create a New File
To create a file, click the Add (+) icon to the right of the file type to create.
Upload Files
To upload a file, click the Add (+) icon to the right of the file type to upload.
Rename a File
To rename a file, click the gear icon to the right of the file and choose Rename.
Delete a File
To rename a file, click the gear icon to the right of the file and choose Delete.
You can change how the editor displays your code. Click the black square for a black background and color text. Click white for a white background.
Choose Auto Preview to update the displayed theme whenever your code changes.
Click the Search icon to search for text in the current file.
All files for the theme are shown in the left-side of the Code Editor. This logical structure shows the following:
- HeaderType: The header layout templates that provide the HTML structure for the pages.
- Partials: Areas of the page held in a separate file that provide the content for that area
- Assets: All other files, such as CSS, images, and JavaScript.
Create a New File
To create a file, click the Add (+) icon to the right of the file type to create.
Upload Files
To upload a file, click the Add (+) icon to the right of the file type to upload.
Rename a File
To rename a file, click the gear icon to the right of the file and choose Rename.
Delete a File
To rename a file, click the gear icon to the right of the file and choose Delete.
|
Header Type
The HeaderType directory contains the theme HTML templates that define the overall structure of the website. These templates provide different types of layout structure; for example a short header, a tall header, or no header. If you are creating a custom theme, you need to create an HTML template for each header type your theme will support and use that header type as the class for the body tag:
|
HTML Template
|
Within the HTML, special tags are used by the theme engine to insert content.
Mandatory Tags
You must include these tags on every HTML template page:
Mandatory Tags
You must include these tags on every HTML template page:
{title} or {logo} |
{title} inserts the site title. {logo} allows the user to decide whether to display the title or a graphic logo. |
{menu} |
Inserts the site menu |
Inserts the site content |
|
{footer} |
Inserts the site footer text |
Optional tags:
If your theme supports social icons, search, and phone number/text using options (options allow users to show/hide different aspects of a theme), then you need to add these tags:
If your theme supports social icons, search, and phone number/text using options (options allow users to show/hide different aspects of a theme), then you need to add these tags:
|
Displays the text "Add Text" that the user can click to edit. |
{social} |
Adds the ability to display social icons |
{search} |
Displays the search icon. |
You can also display a headline and headline text using these optional tags:
{headline:text} |
Displays placeholder text in a headline font that the user can edit/replace. |
{headline-paragraph:text} |
Displays placeholder paragraph text. |
We also provide these optional, pre-defined tags for your use:
Adds a button that can be edited. |
|
{minicart} |
Displays (relocates) the minicart element The HTML is wrapped in the wsite_custom-minicart-wrapperclass. |
{membership} |
Relocates the log in/out element. The HTML is wrapped in the wsite_custom-membership-wrapperclass. |
{subtitle:text}
|
Adds subtitle text/slogan. |
{sidebar:comment} |
Adds a sidebar. |
{address:text} |
Adds address fields. |
By default, these tags show the same content on every page that uses the template. However, you can allow unique content on each page by specifying the global="false" attribute. For example: .
Custom tags:
You can create custom tags based on the tags below to create areas where users can add content not covered by the predefined tags. Substitute area-name with a more meaningful word.
Custom tags:
You can create custom tags based on the tags below to create areas where users can add content not covered by the predefined tags. Substitute area-name with a more meaningful word.
{area-.name:text} |
An area that holds text |
{area-name:content} |
An area to drag content elements into |
An area that holds an image |
For image tags, it's strongly recommended that you include size constraints.
ex.
You can also use the global="false" attribute for these tags. Don't forget to update your stylesheet to reflect the use of these tags.
Add a Custom Header Type
To add a header type, click the plus icon and select the New Header Type option.
A new page will be generated that has only a basic HTML structure and mandatory theme tags. You can customize it however you want!
Users of your theme will be able to access the custom header type template when they create a page, same as the native ones.
ex.
You can also use the global="false" attribute for these tags. Don't forget to update your stylesheet to reflect the use of these tags.
Add a Custom Header Type
To add a header type, click the plus icon and select the New Header Type option.
A new page will be generated that has only a basic HTML structure and mandatory theme tags. You can customize it however you want!
Users of your theme will be able to access the custom header type template when they create a page, same as the native ones.
Partials
Partials are Mustache template files that are included in a page, similar to an include, import, or a nested template. You can edit these partials to change how their contents display. Or you can create your own so that you don't have to repeat code (which can be a nightmare to maintain). Change the partial and the change is reflected everywhere it's used.
Note: Different partials use different variables. When you edit a partial, only use variables that are already in use on the page.
Partials are Mustache template files that are included in a page, similar to an include, import, or a nested template. You can edit these partials to change how their contents display. Or you can create your own so that you don't have to repeat code (which can be a nightmare to maintain). Change the partial and the change is reflected everywhere it's used.
Note: Different partials use different variables. When you edit a partial, only use variables that are already in use on the page.
|
CSS
The stylesheet contains the CSS code that defines the look and style of your website. You can use either CSS or LESS (a CSS pre-processor that provides additional functionality). All styles are in the main_styles.css file. You can add additional styles to this file. |
|
Configure Themes
You can configure your theme for things like responsiveness, ability to adjust when dark color schemes are used, and to create different color variations of your theme. You can even create custom options, like the ability to hide/show different elements in the theme. These configurations are all handled in the manifest.json file, located under Assets.
These are the required properties in the manifest:
You can configure your theme for things like responsiveness, ability to adjust when dark color schemes are used, and to create different color variations of your theme. You can even create custom options, like the ability to hide/show different elements in the theme. These configurations are all handled in the manifest.json file, located under Assets.
These are the required properties in the manifest:
manifest |
Set to 1 |
version |
The version of your theme |
responsive |
Set to "true" if your theme is responsive |
glyph-icons |
Always set to "true" |
is-dark |
Set to true if your theme has a dark background color. When set to true, text and other objects will automatically lighten against this background, without any additional styling needed. |
variations |
You can create different color variations for your theme. More below. |
Custom options |
You can create configurable options for your theme. More below |
Create Variations
Many themes have color variations that the site owner can choose from. Like theme options, the color variations are shown in the Design tab.
You configure the different color variations in the manifest file. The first one defined will be the one selected by default in the editor.
Use the following properties in the manifest to define the color variation:
Many themes have color variations that the site owner can choose from. Like theme options, the color variations are shown in the Design tab.
You configure the different color variations in the manifest file. The first one defined will be the one selected by default in the editor.
Use the following properties in the manifest to define the color variation:
name |
Name of the color |
color-sample |
The hex value of the color. This is what will display in the color square. |
is-dark |
Set to true if this color is dark. Text will automatically lighten when placed against the color. |
You then need to style your variations. How you do that depends on whether your theme uses CSS or LESS.
Create Theme Options
Options allow users to globally change some aspect of the theme. For example, the theme in the screenshot to the right has options for displaying/hiding the search box, social icons, and a phone number. You create options in the manifest file.
Create Theme Options
Options allow users to globally change some aspect of the theme. For example, the theme in the screenshot to the right has options for displaying/hiding the search box, social icons, and a phone number. You create options in the manifest file.
Resources
CSS tutorial:
http://www.w3schools.com/css
HTML tutorial:
http://www.w3schools.com/html
Inspect & modify HTML & CSS in real-time with Firebug for Firefox: http://www.getfirebug.com
CSS tutorial:
http://www.w3schools.com/css
HTML tutorial:
http://www.w3schools.com/html
Inspect & modify HTML & CSS in real-time with Firebug for Firefox: http://www.getfirebug.com