Create a Custom Theme

This tutorial will guide you step by step in creating a custom theme for your InterWorx-CP system.

Before you get started with creating or changing your images, you need to be familiar with the directory structure of the InterWorx system. You need to fully understand where each file is stored and which files to edit in order to successfully create a new theme. You’ll also need a quick once over about the Smarty template system.

In changing the theme of your InterWorx system, your focus will only be on the template (.tpl) files, the images, and the style sheet.

Smarty is a Template Engine that provides a programmer and template designer with a wealth of tools to automate tasks that you commonly deal with at the presentation layer of an application. You can access the Smarty debug console, which will show you which Smarty variables are being used on each .tpl page, by adding {debug} into any .tpl page and then accessing that file. The Smarty Debug Console will pop up in a new window. Avoid editing any Smarty variables already in the template unless you know what you’re doing. You can read more about Smarty at the Smarty Homepage.

This particular tutorial will focus on changing the colors and graphics of a theme. Changing the layout of the theme is not dealt with in depth. The easiest way to create your own theme is to download and modify an existing theme. There are 5 steps involved in creating a custom theme:

1. Download and Unpack an Existing Theme
2. Customize the .css File
3. Add/Edit Images
4. Customize the Manifest File
5. Upload and Add Your Theme to InterWorx-CP

If you’d like to change only the colors and graphics, the following paths with show you where the images and style sheet are located:

If you’d like to change the layout of your NodeWorx and SiteWorx control panels, you need to edit the template files located:

1. Click on the Server menu if it is not already expanded.
2. Click on the ♦    Setup submenu if it is not already expanded.
3. Click on the      ◊    Themes item.
4. You should now be looking at the Theme Management controls in the main content area.
5. A list of themes is shown. The current theme will have Selected in the Status column.
6. Click the Download button for the Vanilla Ice theme.
7. You will be redirected to a page where the download of the chosen theme will begin.
8. Save the vanillaice.zip to your desktop.
9. Unzip vanillaice.zip. and you will have two folders called nodeworx and siteworx.

After sucessfully downloading and unpacking vanilla ice theme, you need to rename the vanillaice folder to prevent conflicts with the original vanillaice theme. For the purposes of this tutorial, we are going to call our new theme ‘blue’.

1. Rename /siteworx/smarty/templates/vanillaice/ to /siteworx/smarty/templates/blue/
2. Rename /nodeworx/templates/vanillaice/ to /nodeworx/smarty/templates/blue/

Our first focus will be on the style sheet. Within the stylesheet you can change the color of the text, the color of the table headers and borders and the color of the links on every page.

1. Open up the /nodeworx/smarty/templates/blue folder you created on your computer.
2. You should see the ‘vanillaice.css’ file in the ‘blue’ folder.
3. Rename vanillaice.css to blue.css.
4. Open blue.css in your favorite text editor.
5. Edit the style sheet to reflect the text color and size.
6. Save and close the stylesheet

1. Open up the /siteworx/smarty/templates/blue folder you created on your computer.
2. You should see the ‘vanillaice.css’ file in the ‘blue’ folder.
3. Rename vanillaice.css to blue.css.
4. Open blue.css in your favorite text editor.
5. Edit the style sheet to reflect the text color and size.
6. Save and close the stylesheet

You now need to edit each image file according to how you’d like your control panels to look. You can change the image entirely if you’d like. For this example, we’ll simply open each file in our image editing program and apply a blue tint to each file to go along with our blue theme.

• You will need to edit the NodeWorx images in /nodeworx/smarty/templates/blue/images
• You will need to edit the SiteWorx images in /siteworx/smarty/templates/blue/images

Once you’ve changed all your images, you’ll notice a manifest.txt file in /nodeworx/smarty/templates/blue. 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. For this example, we’ll edit it according to the following:

• [blue] - This is the name of your theme
• name=”Blue Theme” - This is the name displayed on the Themes page
• author=”Greg Swaney” - This is the person who created the Theme, obviously in this case it would be your name
• url=”http://interworx.com/” - This is just a shameless plug to your website
• preview=”blue.gif” - If you’d like to take a screenshot of your theme for people to preview before they switch to it, name it the name of your theme and place it in the images folder.
• description=”The blue variant of the vanilla ice theme.” - give your theme a description

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 blue.zip.

1. Click on the Server menu if it is not already expanded.
2. Click on the ♦    Setup submenu if it is not already expanded.
3. Click on the      ◊    Themes item.
4. You should now be looking at the Theme Management controls in the main content area.
5. A list of themes is shown. The current theme will have Selected in the Status column.
6. Click the Add link. You will be redirected to a page with an upload box.
7. Click the Browse button to locate blue.zip on your computer.
8. Click the Upload button to begin the upload of your theme.
9. You will see the following message at the top of the screen: » Theme Added Successfully.

1. Click on the Server menu if it is not already expanded.
2. Click on the ♦    Setup submenu if it is not already expanded.
3. Click on the      ◊    Themes item.
4. You should now be looking at the Theme Management controls in the main content area.
5. A list of themes is shown. The current theme will have Selected in the Status column.
6. Click the Select button for the theme you wish to set to the current theme.
7. InterWorx-CP will refresh and you will see your chosen theme.