Changing Portal Theme

Portal users can select their desired themes and activate them on the Gadget Portal. Follow the instructions below to change the theme of your Gadget Portal.

1. Log on to the Gadget Server Management Console.

2. In the "Manage Gadget Server" menu, click the "Theme Management" link.

3. The "Manage Portal Themes" page opens.

Themes can be selected in two ways.

By uploading new user-specific custom themes.
By selecting from pre-defined Gadget Server portal themes.

Uploading Custom Themes

4. Browse the custom theme you want to upload and click "Upload".

When a portal user is going to upload his/her own custom theme, he/she has to upload a .zip file which should adhere to a specific tree structure. For example, the following tree structure shows the hierarchy for a predefined theme called "GS-Dark".

.
|-- black.png
|-- images
|   |-- 1px.gif
|   |-- addGadgetsBg.jpg
|   |-- arrow_right.gif
|   |-- dashboard.gif
|   |-- defaultGadgetsBg.jpg
|   |-- gadget-close.gif
|   |-- gadgetDescriptionBg.jpg
|   |-- gadget-settings.gif
|   |-- gadget-toggle-down.gif
|   |-- gadget-toggle-settings.gif
|   |-- gadget-toggle-up.gif
|   |-- gs-header-logo.gif
|   |-- hide.gif
|   |-- infoCardBg.jpg
|   |-- loading.gif
|   |-- loginPageImage.jpg
|   |-- logoBg.jpg
|   |-- mainBg.jpg
|   |-- mainTabsBg.jpg
|   |-- maximize.gif
|   |-- minimize.gif
|   |-- myshadow.png
|   |-- powered_gadget_server.gif
|   |-- show.gif
|   |-- spacer.gif
|   |-- table-header.gif
|   |-- tabsBg.jpg
|   `-- Thumbs.db
|-- localstyles
|   `-- gadget-server.css
`-- theme-conf.xml

The theme-conf.xml file describes the theme configurations such as the theme name, author, css file path, thumbnail, description about the theme etc. The configuration for the "GS-Dark" theme is as follows.

<resource path="/themes/test-2/conf" isCollection="true">
      <mediaType>application/octet-stream</mediaType>
	<properties>
	      <property key="name">GS Dark</property>
	      <property key="author">WSO2</property>
	      <property key="css.name">localstyles/gadget-server.css</property>
              <property key="thumb">black.png</property>
              <property key="description">The theme is clean and simple all to help you get a stylish and functional look.
        	Theme is also designed with customization in mind. Meaning, with a little work, the theme can be completely personalized.
	      </property>
        </properties>
</resource>

Selecting From Predefined Themes

The Gadget Sever provides several portal themes by default under Select Default Theme. The currently active theme is marked as active.

To add a default theme or an added custom theme, simply click the Activate button associated with each theme.