Customize with ThemeMagic

API Portal uses the Joomla! framework to extend the ThemeMagic feature. ThemeMagic is part of the Purity III template that is based on the T3 template framework.

With ThemeMagic, you have an administrative interface for creating or modifying themes, such as colors and fonts. Use the live preview to follow how your theme configuration looks before saving the changes. Themes are built using theming variables based on the Less language.

Open ThemeMagic

1. Log in to the Joomla! Admin Interface (JAI), and click Extensions > Templates.
2. In Templates sidebar, select Styles, then select the style Purity III - Default.

3. 

3. Select ThemeMagic. ThemeMagic opens your portal home page with theme variables are displayed on the left.

4. 

4. In the ThemeMagic window, sign in to API Portal. You are now ready to start customizing your portal.
5. 

Create a new theme

API Portal includes one theme named Axway. It is recommended to create any additional themes from a copy of the Axway theme to ensure they work properly.

1. Open the ThemeMagic tool, and ensure the Theme is the default Axway theme.
2. Click the drop-down menu next to the Preview button, and select Save As:

3. 

3. Enter a name for your theme, click Accept, and wait until the new theme is ready. A new folder is created for your new theme in local/less/themes/.

4. 

4. Ensure the Theme selected is your new theme, and change the theming variables on the left as needed to customize your theme.
5. To check how your changes look on the page, click Preview.
6. When you are happy with your theme, click the drop-down menu, and select Save.

Theming variables

Theming variables are grouped into different levels:

• Key Colors: These variables control the base colors for all styles. The default key colors are sea blue and gray.
• Basic Colors: These variables control the colors of the major UI elements, such as buttons and menus. The default values for the basic colors are based on the key colors, but you can overridden these to control the styles of individual UI elements.
• Global Fonts and Headings: These variables control the typefaces and sizes of the main text elements

In addition, there are some other variables for fine-grain customization of the UI elements, if needed. Most of these variables are based on Basic Color variables.

Use the new theme

1. In JAI, click Extensions > Templates.
2. In the Templates sidebar, select Styles, then select the style Purity III - Default.
3. Select the Theme page, and select your new theme from the Theme drop-down menu:

4. 

4. Click Save, then click </> Less to CSS. This is the preferred option as it will only compile the theme you want to use.

Configuration files

API Portal includes files added to the Purity III template's folders and files that replace those belonging to the Purity III template. All paths are relative to the Purity III template's folder.

• Before updating the Purity III template or T3 framework, back up the Purity III files API Portal replaces. After the update, restore or merge the backed up files.
• Before updating the API Portal plugin, if you have customized the Axway theme or any of the mentioned configuration files, back up the files to avoid losing your customizations. After the update, you may have to merge the backed up files.

Added files

The following list details the added files:

• less/themes/axway/template.less – Styles for the theme.
• less/themes/axway/variables.less – Theme values customized in a file editor.
• less/themes/axway/variables-custom.less – Theme values customized in the ThemeMagic. Do not edit this file manually.

Replaced Purity III files

The following list summarizes the replaced Purity III files:

• thememagic.xml – Configuration for the ThemeMagic GUI.
• language/en-GB/en-GB.tpl_purity_iii.ini – Language strings displayed in the ThemeMagic GUI. In order to be utilized by ThemeMagic, this file must be copied to Joomla!'s main language folder, language/en-GB/en-GB.tpl_purity_iii.ini when the API Portal plugin is installed.
• less/variables.less – Global variables for the Purity III template. Default values for theming variables must be defined in this file.