Creating New Themes

Using Themes feature, you can apply a color theme to the entire portal, such as your corporate theme or other preferred theme. You can completely change the look and feel of Intellicus to suite your corporate needs.

The look and feel of following items can be changed:

• Logo

• Images for home

• Images for logout

• Menu pads

• Colors

Figure 1: Intellicus in different themes(Dark/ Light)

The theme is controlled by a set of images and styles set in style sheet files by administrators. You can have multiple themes, and you can select a theme as your personalized theme to work with Intellicus.

Default location of images

By default, Intellicus uses the images placed in Default folder. Once you install Intellicus on your machine, images are placed at the folder path as below:
Folder path: IntellicusJakartawebappsintellicuscommonimagesDefault

Default location of style sheet files

By default, Intellicus uses majorly style sheets like style.css, intellicus.css, viewer.css, etc. placed under IntellicusJakartawebappsintellicuscommonstylesheetsDefault

Note: Folder and file names are case sensitive.

General steps to create a portal theme

Intellicus is shipped with a Default theme, if you want to create additional themes, then you must create copy of respective Default directories adjacent to it. Below is a path where copy needs to be created:

intellicuscommonimages
intellicuscommonstylesheets
intellicuscustomtemplatesgridsdhtmlx
intellicuscustomtemplatesmatrixintellicus
intellicustoolsdhtmlx
intellicustoolsdojo
intellicustoolseditarea
intellicustoolseditareaimages
intellicustoolsjquery
intellicuswebdesignerimages
intellicuswebdesignerstylesheets

For example, if you want to create a theme ‘Ocean’, then your file location is created as below:

intellicuscommonimagesOcean
intellicuscommonstylesheetsOcean
intellicuscustomtemplatesgridsdhtmlxOcean
intellicuscustomtemplatesmatrixintellicusOcean
intellicustoolsdhtmlxOcean
intellicustoolsdojoOcean
intellicustoolseditareaOcean
intellicustoolseditareaimagesOcean
intellicustoolsjqueryOcean
intellicuswebdesignerimagesOcean
intellicuswebdesignerstylesheetsOcean

Now, you can customize images and CSS files under Ocean.

Tip: Personalized themes will be applicable only after login. To make a new theme appear as default, (even on landing page), rename that folder as Default. For example, if you have created a theme and stored in folder ‘Ocean’, rename that folder as ‘Default’.

You can always backup or rename original Default folder.

Images for logo

Intellicus uses images with following name and dimension for logo.

You can replace the default logo image with another image. To access the logo, navigate to IntellicusJakartawebappsintellicuscommonimagesDefaultLogo.

You can replace the default logo with the new logo. While doing so, make sure the file name and dimension of the image are the same as specified in the table above.

Style sheet files

CSS files intellicus.css and viewers.css have classes that control colors on portal components.  To change a theme, open and edit the file placed in folder for that theme.

For example, to change look and feel of buttons in “Natural” theme, you need to open intellicus.css present in “Natural” folder and make changes in class controlling appearance of buttons.