Themes

What is a theme?

Themes are pre-defined styles that can be applied to alter the appearance of your site. A theme defines the look and feel of your site. You can use themes to add new functionalities or change the appearance of webNetwork. As an example, take a look at the two different themes below:

You will notice that the color, as well as the page structure, are entirely different. webNetwork comes packaged with several themes, and allows you to create your own or build off of an existing one. We are constantly working on building new themes into the software, so that you have a wider selection to choose from.

How the theme system works

General overview

With several themes to choose from, only one may be active at a time. By activating a theme, you are setting the layout that your members will see when visiting the website. Making a theme active also defines which template files you'll be modifying through the administrative area. The flowchart below describes the basic theme structure:

As you can see, the template files are stored in the themes/clean_blue/templates/ folder by default. This is useful if you wish to modify the templates with a third party software packages such as Dreamweaver or Frontpage. If you are using the built in WYSIWYG editor within the software, you will be modifying the template files of the current active theme. That is, if you've enabled Clean Blue, you'll be modifying the template files in themes/clean_blue/templates/. If you enabled a theme you've created, such as New Theme, you'd be modifying the files in themes/new_theme/templates/.

Inheritance

Our theme system uses inheritance to allow you to quickly and easily create new themes. When creating a new theme through the administrative area, it will automatically inherit the templates and stylesheet of the Clean Blue template. Inheritance means that unless you modify a specific template file, it will inherit the original one from the Clean Blue template.

Simple example

For example, let's say you created a new theme called New Theme, and didn't modify any template files to override the original. You then browse to the home page. When browsing the home page, the software needs to load the main.html and index.html template files (as well as other files, but we're keeping this example simple) and style.css. First, the software will check themes/new_theme/templates/ folder to see if main.html, index.html, and style.css exist. If they do, it would open and load them automatically. However, since you haven't modified any template files, they would not exist, and the software would fall back to (or inherit) the files from the Clean Blue template, and load the template files from templates/clean_blue/.

Another example

Now let's say you created a new header and footer, and changed some colors. You would have modified main.html and style.css, which would now exist in themes/new_theme/templates/. When loading the home page now, the software would see that main.html and style.css exist, and load those instead of the ones located in templates/clean_blue/.

Furthermore, if you decided to browse to another page, such as the registration page, the software would try to load main.html and register.html. Since main.html exists in themes/new_theme/templates/, it would override the original one and load that, but it would not load the register.html from themes/new_theme/templates/ since it does not exist, and would fall back to themes/clean_blue/templates/.

Creating a theme

To create a new theme, log into the administrative area. Browse to the Themes section by clicking on the Templates link on the left, them select the Themes icon at the top of the page. A list of available themes will be displayed in a table, with a Create new theme link at the bottom of the page. Clicking this link will bring up the form below:

Enter the name of your theme here. Use only alphanumeric characters. This name will determine the path to your new theme. For example, if you called it My Theme, the path would be themes/my_theme/templates. You can now edit the templates to define this new theme.

Templates

Overview

Templates are the individual files that make up a theme. The layout of the software is broken up into many template files so that you have the most flexibility in modifying your layout. Each page on the site has at least one template file. In many cases, a page will include other template files as well. Let's take a look at the home page to break down the different template files that are associated with this one page.

The yellow, red, and green areas highlight the three different template files that are included when the registration page is loaded.

main.html
main.html controls the header/footer of the website. main.html is wrapped around all of the content that is shown on the website. In many cases, this is only file you need to modify to achieve your desired look and feel. For example, if you wish to make webNetwork match your existing website, all you would need to do is include your header and footer, and overwrite our original main.html.

webbox_login.html
This template file is loaded and rendered when displaying the page. It contains the HTML code you see for the login box to the left.

register.html
This template file is the actual content you'd expect for the page, which is basically the registration form for the website. Let's say you wanted to add a help tip at the top of the page, or put a border around the form. This is the file you'd do it in.

Template variables

Template variables are used for a variety of purposes from including other templates, to including error messaging, to language text (for the Multilanguage version). It is critical that no variables are deleted while you are modifying the software template files, since it may cause important parts of the software output to be lost.

Template variables are parsed when the page is loaded, and replaced with the appropriate output. Using our previous example of the registration page, the template variable {WEBBOX_LOGIN} would be replaced by the contents of webbox_login.html.

Modifying the templates

To modify a template, log into the administrative area. Select Templates from the left menu, and then select Page Templates from the top menu. This will bring up a list of all available template files. Click on the Edit icon to bring up the template in our built in WYSIWYG editor. Please keep in mind that this editor is intended to make minor changes to the site, such as modifying text, colors, etc. If you're planning to make major layout changes to the software, we recommend downloading the file through FTP to your local computer, making the necessary changes, and then uploading them back up to your server.