Add a custom stylesheet

If you rather use a css files to edit the look and feel of your page, add a new custom stylesheet or upload an existing one to the Purity III - Default style.

The custom css file is the last file to be loaded in your site. The custom css file is not compiled from the Less variables, so it is not overridden or lost if you decide compile another css file using the Less variables.

You can also manually edit the Less files in local/less/themes/<your copy of axway theme> folder. After modifications, compile the .less files to CSS. For more details, see Customize CSS styles.

Create or upload a custom stylesheet

  1. Log in to Joomla! Administrator Interface (JAI), and click Extensions > Templates.
  2. In the Templates sidebar, click Templates, and select the style Purity III_Details and Files.
  3. On the Editor tab, select New file.
  4. Select the css folder, set File Type to css, enter a name for you file (such as custom.css), and click Create. To upload a css file, click Choose File, select the css file you want, and click Upload.

You can now edit your custom stylesheet in JAI like any css file.

Copy a custom stylesheet

You can also copy a css file already included in the Purity III - Default style as your custom stylesheet.

  1. In JAI, click Extensions > Templates.
  2. In the Templates sidebar, click Templates, and select the style Purity III_Details and Files.
  3. On the Editor tab, open the css folder, select the css file to copy, and click New file.
  4. Select the css folder, enter a name for you copy (such as copied-custom.css) in Copied File Name, and click Copy File.

You can now edit the details you want in your copied custom stylesheet.

Add Less functionality to a custom stylesheet

If you need the Less functionality in the custom stylesheet as well, create a less file for your custom css file. This less file compiles the Less variables to your custom css file.

  1. In JAI, click Extensions > Templates.
  2. In the Template sidebar, click Templates, and select the style Purity III_Details and Files.
  3. On the Editor tab, select New file.
  4. Select the less folder, set File Type to less, set File Name to <your css file name>.less, and click Create.
Note   Styles defined in custom.less are independent of the template's stylesheet and do not render with updated variable values in ThemeMagic's preview.

Related Links