Creating a sub-theme
Create a custom theme for your Developer Portal site by generating and configuring a sub-theme. A sub-theme is a theme that inherits all the resources of a specified parent theme. You can then override specific resources to configure your required customizations.
Before you begin
You must have administrator access to complete this task.
About this task
Create a sub-theme by using the theme generator in the Developer Portal UI, customize the appearance as required, and then upload the compressed file back onto the site.
- You’re not permitted to include any IBM® API Connect code within any custom themes that you create. Also, directly editing any API Connect themes on the file system is not permitted or supported, as edited versions of these files are overwritten when a fix pack or iFix is installed.
- All custom development is your responsibility. Although the use of custom themes is supported, IBM API Connect do not provide support in their development or modification.
For a guided example on creating a sub-theme, see Tutorial: Creating a custom theme for the Developer Portal. In this example, you create a sub-theme, and then customize the styling by editing the overrides.css file.
- If the administrator dashboard is not displayed, click Manage to display it.
On the administrator dashboard, click
.The Generate sub-theme page is displayed.
Enter a Sub-theme name, and select the Sub-theme
type that you would like to use. The name can contain only lowercase characters a - z,
and numerals 1 - 9.
- CSS - Cascading Style Sheets; the language that is used to describe how to display the HTML elements in the theme.
- SCSS - Sass CSS; a superset of CSS. SCSS contains all the features of CSS, but is extended to include the features of Sass as well. However, SCSS must be compiled into CSS before it can be installed and used in the Developer Portal.
Select the template to base your sub-theme on:
- Default - the standard connect_theme that the Developer Portal is based on.
- Business Mono - a black and white color theme.
- Sapphire Blue - a blue color theme.
- Emerald Green - a green color theme.
- Golden Brown - a brown color theme.
- Ruby Red - a red color theme.
Your sub-theme is available to download from the Generate sub-theme page.
- Click your new sub-theme and save it to your preferred location.
Extract the resources from the sub-theme file, and then edit the specific resources to
configure the customizations that you require.
Define your theme by creating metadata in the your_theme_name.info.yml file. You can then customize the appearance of your theme by configuring the overrides.css file. For detailed information about how to customize themes, see Theming Drupal.
After you have completed your customizations, compress the sub-theme resources back into the
Note that the following file extensions are also supported: tar, tgz, gz, and bz2.
- Install your new sub-theme onto the Developer Portal by clicking .
- Click Choose file, select your sub-theme, and then click Install.
Click Install newly added theme, find your new theme in the list of
Uninstalled themes, and click Install and set as default
to set your new custom sub-theme as the default theme for your site.
Your new theme is now set as the default theme, and is listed in the Installed themes section.