Customize CSS styles

This section describes how you can directly edit the files in local/less/themes/<your copy of axway theme> to customize your css styles. This folder contains all files related to your API Portal theme.

Tip   There are two options available to modify the css styles. It may be easier to use a custom css file, rather than manually edit the Less files. For more details, see Add a custom stylesheet.

There are several items you can change within your css, and the file you must edit depends on the element and the change in question. For some elements, you may need to edit more than one file for the changes to take effect.

Note   It is strongly recommended that you make a copy of the theme you want to change before making any edits. For more details on copying a theme, see Create a new theme.

In this example, the font in the main menu is changed to uppercase.

Check the current CSS

When planning changes to CSS files, you can quickly check which file controls the changes to the element you want to change.

  1. Go to your API Portal, right-click on an element in the main menu, such as APIs, and select Inspect element.
  2. Using the developer tools, find the style element you want to change. The css file reference for the element shows you the name, class, or ID of that element as well as where it is located.
  3. API Portal customizing the css sample modification to an element screen

Manually edit the Less files

Note   It is not recommended to manually edit the less/themes/axway/variables-custom.less file. This file contains the attribute values customized in the ThemeMagic editor. For more details, see Customize with ThemeMagic.
  1. Log in to the Joomla! Admin Interface (JAI), and click Extensions > Templates.
  2. In the Template sidebar, click Templates, and select Purity III_Details and Files.
  3. API Portal customizatoin list of available templates through Purity tool

  4. On the Editor tab, open the following folder:
  5. local/css/themes/<your theme>
  6. Select the template.less file containing the element, and locate the correct line. In this example, the value for text-transform is changed from inherit to uppercase.
  7. An example screenshot on editing a style css.

  8. Select Save > Close File, and close the editor.
  9. In Templates sidebar, select Styles.
  10. Select Purity III - Default, and click </> LESS to CSS to compile a new css file.
  11. Joomla Purity III styles template manager to compile changes to API Portal css

  12. Refresh the API Portal home page in the browser to see the changes you have made.

Related Links