Chapter: Preface Up Main page Chapter 2: Customize your theme 

1 Creating a custom theme

1.1 Overview

InterWorx ships with a handful of themes that you can choose to base your custom theme on. The main “InterWorx” theme is the master theme, and all other themes that InterWorx ships with are based on that theme. Since new versions of InterWorx can include new features, and therefore, new interfaces, we have designed the theme system to be “upgrade proof”. That is to say, properly created custom themes will require no updating when new versions of InterWorx are installed.
Creating a new theme involves the following steps:
  1. Choose which existing theme you will base your new theme on.
  2. Download the theme selected in step 1.
  3. Extract the downloaded theme.
  4. Edit the theme’s manifest.txt file (this is how you specify this is a new theme).
  5. Make your modifications to the images, CSS, and/or template files.
  6. Compress your new theme back into a .zip file.
  7. Upload your new theme.
  8. Test your customizations.

1.2 Theme Components

Every theme is comprised of several important elements. Customizing your new theme is simply a matter of changing some aspects of the following elements:
Element Location Role
figure images/icons/file_extension_css.png
CSS Files
/nodeworx/theme.css
/siteworx/theme.css
The NodeWorx CSS files is heart of your theme. Loaded after the base CSS, it’s the place to go to for creating a custom look. SiteWorx will loads both theme.css files therefore the /siteworx/theme.css can be empty.
figure images/icons/sitemap_image.png
Images
/nodeworx/images
/siteworx/images
Folders containing images. SiteWorx specific images may go in the SiteWorx images folder, but will have to be referenced from the SiteWorx theme.css.
figure images/icons/file_extension_tpl.png
Template Files
/nodeworx/*.tpl, /siteworx/*.tpl Framework of the theme.
figure images/icons/file_extension_txt.png
Manifest File
/nodeworx/manifest.txt Describes the theme and makes it recognizable to InterWorx.

1.3 Choosing a “base theme” for your new theme

In order you decide which theme you’ll base your new theme on, you’ll want to look at the existing themes, and decide which one looks like a good starting point for your customizations. You can preview the installed themes by navigating to NodeWorx  ▷ Themes in the NodeWorx admin or Reseller interface. Once you select your base theme, you can move on to the next step.

1.4 Download the base theme

Downloading the base theme is as simple as navigating to NodeWorx  ▷ Themes, and clicking the “Download” link next to the theme you want to grab. Your browser will initiate the theme download process. The downloaded file will be a .zip compressed file.

1.5 Extract the downloaded theme

Once the theme archive has been downloaded, you need to extract it, using your OS’s supported “unzipping” method. Extract the file to an easy to access location, like your Desktop. When you extract the file, you will see two folders, one named nodeworx, and the other siteworx.

1.6 Edit the manifest.txt file

Inside the nodeworx directory of the extracted theme archive, you will find a file named manifest.txt. This is the file that contains the data about the theme, and in order to start making your new theme, you need to edit it, using a text editor of your choice. The table below details the various parts of the manifest.txt file
Directive Purpose Required?
[vanillaice] This is the “system name” of your theme. This must be unique to the system, alphanumeric, and contain no punctuation or spaces. You should change this value. YES
name This is the display name shown on the Themes page and in the dropdowns for selecting themes. You should change this value. YES
author This is the person who created the Theme, obviously in this case it would be you. You should change this value. NO
hd_left_url Link used when clicking on the logo image at the top left. YES
hd_right_url Link used when clicking on the logo image at the top right. YES
help_url Link used when clicking the "Help" link. YES
base_theme This is the system name of the theme that your theme is based on. This is not in the InterWorx theme, since it is the root theme for all others. If you are basing your theme on the InterWorx theme, you MUST add this section to the manifest. YES
branding_interworx The content of this optional parameter will be used to replace the word "InterWorx" in the HTML output for your theme. NO
branding_siteworx The content of this optional parameter will be used to replace the word "SiteWorx" in the HTML output for your theme. NO
branding_nodeworx The content of this optional parameter will be used to replace the word "NodeWorx" in the HTML output of your theme. NO
version=2 This is a required parameter. It instructs InterWorx to use the "new" theme format after themes were changed in an older InterWorx version. DO NOT DELETE THIS LINE OR CHANGE THE VERSION. YES

Here is the contents of /nodeworx/manifest.txt from the Heliotrope theme.
[heliotrope]
name="Heliotrope"
author="InterWorx L.L.C."
base_theme="interworx"
hd_left_url="http://www.interworx.com"
hd_right_url="http://www.interworx.com"
help_url="support.php"
description="The original purple theme."
type="public"
version=2
 Chapter: Preface Up Main page Chapter 2: Customize your theme 

(C) 2017 by InterWorx LLC