Chapter 1: Creating a custom theme Up Main page Chapter 3: Finalizing and uploading your new theme 

2 Customize your theme

2.1 Changing the Logo images (simple version)

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.

2.2 Changing the Logo images (advanced version)

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
  3. Find hd_left.gif or hd_right.gif
  4. Replace with your new image name
  5. Repeat for SiteWorx, if desired
Note that the header and footer are not rendered as part of the csstest.html (see below) file included with the download. You’ll need to complete your theme and upload it before you’ll be able to see the differences.

2.3 Changing the Colors and Graphics

All colors and graphics other than the header logos are assigned and positioned using CSS. Use of the Firefox plugin Firebug is highly recommended, since it makes testing CSS changes instantly preview-able. 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.
figure images/branding/firebug.jpg
Figure 2.1 The Firefox plugin Firebug is Highly Recommended

2.3.1 Modifying CSS

If you’re not looking to spend too much time working on your theme, modifying the CSS is the way to go. Pop open /nodeworx/theme.css and start editing. If you’re looking to see your CSS changes in action, open csstest.html in a browser.

2.3.2 Modifying template files

Interworx is built on top of Smarty Template Framework. If you choose not to include some of these theme files in your theme, InterWorx will automatically fall back to the base theme’s files. Moving {smarty} tags around in your .tpl files will give you more control over what elements should go where.
Template File Name Purpose
figure images/icons/file_extension_tpl.png
/nodeworx/main-template.tpl
/siteworx/main-template.tpl
These are the main template files for both NodeWorx and SiteWorx for when a user is logged in.
figure images/icons/file_extension_tpl.png
/nodeworx/index.tpl
/siteworx/index.tpl
These are the template files for the login screen and other misc areas of SiteWorx and NodeWorx.
figure images/icons/file_extension_tpl.png
/nodeworx/theme-assets.tpl
/siteworx/theme-assets.tpl
Here is where you add javascript and CSS files for inclusion in your theme. You can add them in the head of main-template.tpl instead, but they won’t be parsed and minified by Interworx. Make sure to read up on Adding Javascript below.
figure images/icons/folder.png
/nodeworx/widgets/
/siteworx/widgets/
Various elements that are used throughout the control panel have been added to the respective widget folder. These elements will fall-back to the .tpl files located in the base theme.
figure images/icons/parent.png
/widgets/
figure images/icons/file_extension_tpl.png
box-message.tpl
This file controls the various top-level error messages seen throughout Interworx Control Panel.
figure images/icons/parent.png
/widgets/
figure images/icons/file_extension_tpl.png
box-status.tpl
This file controls the various sub-level error messages seen throughout Interworx Control Panel.
figure images/icons/parent.png
/widgets/
figure images/icons/file_extension_tpl.png
link-action.tpl
This file controls the structure of most buttons seen throughout Interworx Control Panel.
figure images/icons/parent.png
/widgets/
figure images/icons/file_extension_tpl.png
link-quickhelp.tpl
This file controls the structure of any quickhelp link [?] seen throughout InterWorx Control Panel.
figure images/icons/parent.png
/widgets/
figure images/icons/file_extension_tpl.png
widget-graph.tpl
This file controls the structure of any graph seen throughout InterWorx Control Panel.

2.3.3 Using csstest.html to preview changes

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. You can also access csstest.html after your theme has been uploaded by pressing [Preview].
figure images/branding/csstest.jpg
Figure 2.2 Using csstest.html to preview changes

2.4 Update the Thumbnail

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. Also included in the nodeworx directory is a file named “csstest.html”, which you can use with a web browser to preview your customizations.
figure images/branding/thumbnail.jpg
Figure 2.3 Update the Thumbnail
 Chapter 1: Creating a custom theme Up Main page Chapter 3: Finalizing and uploading your new theme 

(C) 2017 by InterWorx LLC