Your website theme (also commonly referred to as a template) is what defines the overall design of your website, such as the color scheme, font choice, background image, and other design elements. Weebly offers hundreds of themes to choose from, or you can customize your own with HTML & CSS for complete control.
Contents:
Contents:
Overview of the Advanced Theme Editor
For full control of the layout & design of your theme, click on the “Edit HTML/CSS” button under the “Design” tab.
Upon clicking on the “Edit HTML/CSS” button, you’ll be brought into the Advanced Theme Editor. This area is intended only for users familiar with HTML & CSS code.
HTML Tab:
The HTML tab contains the theme HTML code that defines the overall structure of your website. Within the HTML, a few special variables are used to tell Weebly where certain things are, such as the site title, navigation menu, and content area. We’ll get back to these in a minute.
CSS Tab:
The CSS tab contains the CSS code that defines the look and style of your website.
Files Tab:
The files tab lets you add or delete theme files (such as image files) that are referenced in the CSS code.
Preview Tab:
As you make changes to your theme’s code, you can click the preview tab to see exactly how the changes are affecting your website.
The HTML tab contains the theme HTML code that defines the overall structure of your website. Within the HTML, a few special variables are used to tell Weebly where certain things are, such as the site title, navigation menu, and content area. We’ll get back to these in a minute.
CSS Tab:
The CSS tab contains the CSS code that defines the look and style of your website.
Files Tab:
The files tab lets you add or delete theme files (such as image files) that are referenced in the CSS code.
Preview Tab:
As you make changes to your theme’s code, you can click the preview tab to see exactly how the changes are affecting your website.
Example Theme HTML
The code under the HTML tab should look something similar to this. The %%variables%% you see are explained in the next section.
The Variables to Include in Your Theme HTML
As you can see in the example above, the HTML of a theme contains special variables, which look like %%VARIABLE%%.
%%TITLE%%
%%TITLE%% is a variable that is replaced with your website title. This variable should be used in 2 places within your HTML code – once between the <title> tags in the <head> element, and once within the <body> tag for displaying the site title on your site.
%%MENU%%
%%MENU%% is a variable that is replaced with the code for your site’s navigation menu. The menu is generated as an unordered HTML list. The active link in the menu will have the id “active” that you can style with CSS.
Here is example output from the %%MENU%% variable:
<ul>
<li id="active"><a href="/index.html">Home</a></li>
<li><a href="/page2.html">Page 2</a></li>
<li><a href="/page3.html">Page 3</a></li>
</ul>
%%CONTENT%%
%%CONTENT%% is replaced with the HTML of the content you add with the Weebly editor. For example, if you create a page in Weebly with a contact form and map, the HTML code for the contact form and map would replace the %%CONTENT%% variable.
%%WEEBLYFOOTER%%
%%WEEBLYFOOTER%% is replaced with the footer text of your website. By default, the footer text will say “Create a free website with Weebly”. If you have a Weebly Pro account, this text can be customized in the Weebly editor. Do not try to remove or hide this variable.
%%TITLE%%
%%TITLE%% is a variable that is replaced with your website title. This variable should be used in 2 places within your HTML code – once between the <title> tags in the <head> element, and once within the <body> tag for displaying the site title on your site.
%%MENU%%
%%MENU%% is a variable that is replaced with the code for your site’s navigation menu. The menu is generated as an unordered HTML list. The active link in the menu will have the id “active” that you can style with CSS.
Here is example output from the %%MENU%% variable:
<ul>
<li id="active"><a href="/index.html">Home</a></li>
<li><a href="/page2.html">Page 2</a></li>
<li><a href="/page3.html">Page 3</a></li>
</ul>
%%CONTENT%%
%%CONTENT%% is replaced with the HTML of the content you add with the Weebly editor. For example, if you create a page in Weebly with a contact form and map, the HTML code for the contact form and map would replace the %%CONTENT%% variable.
%%WEEBLYFOOTER%%
%%WEEBLYFOOTER%% is replaced with the footer text of your website. By default, the footer text will say “Create a free website with Weebly”. If you have a Weebly Pro account, this text can be customized in the Weebly editor. Do not try to remove or hide this variable.
Including a Theme Header Image
As you saw in the example theme HTML code above, an empty <div> tag was included with the class name “wsite-header”. If you include this <div> tag in your HTML, you can specify a theme header image in the CSS with a background property. The image location should be referenced with the variable %%HEADERIMG%%.
For example, a header image CSS rule will look similar to this:
.wsite-header {
background: transparent url(%%HEADERIMG%%) no-repeat center top;
width:750px;
height:250px;
}
The default header image should be uploaded to the “Files” tab with the name default_header.jpg. You will have the option to change the default header image using the Weebly editor.
For example, a header image CSS rule will look similar to this:
.wsite-header {
background: transparent url(%%HEADERIMG%%) no-repeat center top;
width:750px;
height:250px;
}
The default header image should be uploaded to the “Files” tab with the name default_header.jpg. You will have the option to change the default header image using the Weebly editor.
Referencing Images in CSS
When you need to reference an image in CSS, you should upload the image file to the “Files” tab and use the image name as the URL path.
Here's an example CSS property that references the image file "pattern.jpg":
background: transparent url(pattern.jpg) repeat-x center top;
Here's an example CSS property that references the image file "pattern.jpg":
background: transparent url(pattern.jpg) repeat-x center top;
Importing / Exporting a Theme
You may want to share a custom theme with a friend or client. To export a theme, click on the “Export” button from within the Advanced Theme Editor. To import a theme, first click the “Design” tab, then “All Themes”, then “My Custom Themes”, and then “Import Theme”.
Exported themes are saved as a .zip file (click here to download an example). A properly packaged .zip theme file will have the following files within it (do not put these files into their own folders):
index.html – this is your theme HTML
main_style.css – this is your theme CSS
& various image files – these are the image files referenced in the CSS
Exported themes are saved as a .zip file (click here to download an example). A properly packaged .zip theme file will have the following files within it (do not put these files into their own folders):
index.html – this is your theme HTML
main_style.css – this is your theme CSS
& various image files – these are the image files referenced in the CSS
Helpful 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
HTML tutorial - http://www.w3schools.com/html
Inspect & modify HTML & CSS in real-time with Firebug for Firefox - http://www.getfirebug.com