Create a Custom Theme

This tutorial will guide you step by step in creating a custom theme for your InterWorx system. Custom themes can be used for re-branding the system for your customers, or just to create a custom look and feel.

With the release of InterWorx 4.0, the theming system has been simplified while increasing the flexibility of user themes. Unfortunately, some older custom themes are incompatible and will need to be upgraded.

The InterWorx theme system is used in the themes that ship with InterWorx. The "InterWorx" theme is the root theme - all other themes are based on this theme.

Every theme is comprised of several important elements. Customizing your new theme is simply a matter of changing some aspects of these elements.

The first step in creating a custom theme is downloading an existing one. InterWorx leverages the "Cascading" part of "Cascading Style Sheets" to allow new changes to be built upon the existing styles and layout.

1. Click the NodeWorx menu item if it is not already open.
2. Click the Themes menu item.
3. Choose the theme you want to base your new theme on
4. Click the 'Download' link
5. Extract the downloaded file to your desktop

The simplest form of customization is to replace the InterWorx logo and SiteWorx/NodeWorx logos with your own. In each theme, there are two images for NodeWorx and two for SiteWorx that are the logos used in the headers. These are "hd_left.gif" and "hd_right.gif".

Simply edit or replace these images with your own (must be .gif format) and edit the manifest file before uploading your new theme!

Another possibility is to use a different file entirely, and not convert to .gif. This lets you use higher-resolution images, such as PNG or JPG.

1. Put your new image in /nodeworx/images
2. Open /nodeworx/header.tpl in the download
3. Find hd_left.gif or hd_right.gif
4. Replace with your new image name
5. Repeat for SiteWorx, if desired

All colors and graphics other than the header logos are assigned and positioned using CSS.

Use of the Firefox plugin Firebug is highly recommended.

To customize your theme, the best place to start is the NodeWorx theme.css. Any changes to SiteWorx specifically should be made in the SiteWorx theme.css.

Changing the layout is possible in two ways: CSS, or editing header.tpl and footer.tpl. Changing the layout is beyond the scope of this tutorial.

In the /nodeworx/ folder of the download, you'll find an html file called csstest.html. This file has been specifically altered to work from your local machine, so that you can test some base elements of your custom theme without the trouble of zipping up your changes and uploading them repeatedly.

Simply open the file in your browser to see most changes as you make them. Changes to header.tpl and footer.tpl will not show up, sorry.

In the /nodeworx/images/ folder, there is an image called thumbnail.jpg. This image is used to show a preview of your theme on the Theme Management page. The image will ultimately be displayed at 320x262 (roughly 25% of 1280x1024) so that's the best size for the least distortion.

Once you've changed all your images, you'll notice a manifest.txt file in the /nodeworx/ folder in the zip file you downloaded. This file is used to tell InterWorx some information about your theme. Open this file in your text editing program and edit it according to your preferences.

All other directives in the manifest are not used in InterWorx.

Now, you've edited the style sheet and the images according to your preference. For the most part, you're finished making your theme. Now you need to zip the folders up and upload them.

1. Select the siteworx and nodeworx folders on your desktop.
2. Right click on one of them and you should see the option 'Send To'. Select this option and then you should see 'Compressed (zipped) folder'. Select this option and in a couple seconds, you should see a file on your desktop called siteworx.zip or nodeworx.zip depending on which one you right clicked on.
3. Rename this file to whatever you named your theme.

1. Click the NodeWorx menu item if it is not already open.
2. Click the Themes menu item.
3. A list of themes is shown.
4. Click the [ Add Theme ] link. You will be redirected to a page with an upload box.
5. Click the Browse button to locate the zip file on your computer.
6. Click the Upload button to begin the upload of your theme.
7. You will see the following message at the top of the screen: Theme Added Successfully.

1. Click the NodeWorx menu item if it is not already open.
2. Click the User Accounts menu item.
3. A list of users is shown.
4. Click the [ Edit ] link for the current user (you).
5. Use the Theme: dropdown to choose the theme for the user.
6. Click the Save button to save the change.
7. InterWorx-CP will refresh and you will see your chosen theme.