- Themes and Custom Themes

Themes

Themes are the look and feel applied to your WOW Applications. WOW supplies a number pre-built themes. This section describes actions to take if you want to create your OWN custom theme to match your organization's look and feel. The Themes section of the WOW utilities contains two operations. Add Themes and View Themes.

NOTE: As of WOW 7.3, an easier, more user friendly, way of creating custom WOW themes has been added. Please refer to:

- User Defined Theme - HTML Code Operation

Add Theme

Theme properties are contained within specific CSS files. This Chapter will not explain the process of creating a theme, when adding a theme WOW assumes the CSS file has already been created and it simply needs to be added to the list of available themes. The screenshot below shows the Add Theme operation screen. After adding the relevant information simply hit the insert button to add the new theme.

CSS File –This is the location of the CSS file that contains the properties for the newly created theme. The location of the file will differ according to where and how you installed WOW on your system.

Description –This is simply a description of the newly created theme.

Properties – ###

For more information on CSS, refer to: http://www.w3schools.com/css/

When creating your own theme, ensure the following items are included:

Your custom theme, defines files that are used when generating pages for your application. You need to use Windows explorer to find these files in your Tomcat or web server directory. See the image below to see how to identify the location of these files.

1) Your custom CSS should include the WOW default theme CSS as an import on the first line of their CSS file

/* Import Default Theme CSS to ensure nothing is ever missing for new WOW features */

@import "../../dataengine/themes/default_theme/css/cis.css";

2) Your template JSP should include an additional section at the bottom right before the body close to include forms used by WOW for Ajax (hover panel, auto complete, etc.)

<%--

// include required html code into a utility method. for future wow

// releases, this template will still function properly and be able

// to use new features if there is any additional required code needed

--%>

<%= planetj.html.HTMLGenerator.appendRequiredTemplateCode(null, request, response) %>

You can make these changes using Windows notepad or similar text editing tool.

View Theme

The View Theme operation is similar to the View User operation described earlier in this Chapter. This operation simply lists the themes that have been previously created. The screenshot below shows an example of the View Theme operation, listing all of the themes available within your copy of WOW.

Dynamic Themes with URL Parameter

There may be the case where you have added multiple themes and want certain customers to open the application with a particular theme. Well you can do this dynamically by setting the theme to be used in the URL as a parameter.

For example... let’s say we have the following URL to an application:

http://www.planetjavainc.com/wow/runApp?id=0

We can dynamically change this application's theme by specifying a parameter on the URL: _pj_theme=-5 or _pj_theme=-3 or any other theme id that exists shown in view themes screen.

NOTE: A negative theme number indicates a system theme.

So for example...

http://www.planetjavainc.com/wow63/runApp?id=0&_pj_theme=-5 will open the application using the Light Brown theme.

http://www.planetjavainc.com/wow63/runApp?id=0&_pj_theme=-3 will open the application using the Light Blue theme.

The theme id is created when you add a new theme and can be seen in the view themes screen.

More information on creating a theme with your logo and colors can be found here.

Tags: Custom themes, JavaScript, skin, Create your own look and feel

TODO: Add additional information on creating themes.