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.  We offers hundreds of themes to choose from, or you can customize your own with HTML & CSS for complete control.

The CSS tab contains the CSS code that defines the look and style of 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.

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%% 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%% 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:

  <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>

%%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%% 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;

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 referencing an image in CSS, you should upload the image file to the “Files” tab and use just 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;

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

Helpful Resources

CSS tutorial -
HTML tutorial -
Inspect & modify HTML & CSS in real-time with Firebug for Firefox -