Tutorial: Creating a custom theme for the Developer Portal

Customize the appearance of your Developer Portal home page, by generating a sub-theme, configuring the overrides.css file, and installing the newly customized theme.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.
Important: You’re not permitted to include any IBM® API Connect code within any custom themes that you create.

About this tutorial

The way to create a custom theme is to create a custom sub-theme of the standard API Connect theme that the Developer Portal uses by default. The sub-theme inherits all of the resources of the parent theme, and you can then override specific resources to configure the required customizations.

This tutorial takes you through the following lessons:
  1. Creating a sub-theme by using the theme generator.
  2. Customizing the overrides.css file.
  3. Installing and enabling your customized theme.

Creating a sub-theme

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Click Appearance > Generate sub-theme. The Generate sub-theme window is displayed.
  4. Enter a Sub-theme name, and select CSS for the Sub-theme type. (If you prefer, you can select SCSS, but this extension to CSS is for advanced theme developers, and isn’t covered by this tutorial.)
    Generate sub-theme window.
  5. Select the Default template to base your sub-theme on. You can create a sub-theme based on a color template. However, for this tutorial you use the default connect_theme template.
  6. Click Generate.
  7. Download the generated sub-theme to a location of your choice, and extract all the files from the .zip file.

Customizing the overrides.css file

On your computer, navigate to the files that you extracted. Find the overrides.css file in here banka_theme/banka_theme/css/overrides.css. You can now customize the overrides.css file.

  1. Open the overrides.css file in your chosen editor.
  2. Customize your sub-theme by entering the following elements into the overrides.css file: 
    /* Body of the home page */
body.path-frontpage.contexthome {
  color: #152935;
  background-color: #d1f0f7;
}

/* Header of the home page */
.navbar {
  background-color: #a0a0a0;
}

/* Footer of the home page */
footer.footer {
background-color: #dee0e2;
}

footer.footer ul.nav > li > a {
color: #454A4C;
}
    Copy the given code block into your css file
  3. Save the overrides.css file.

Installing and enabling your customized theme

  1. After you have finished updating the overrides.css file, compress all the theme files back into the .zip sub-theme file that you downloaded originally.

    Note that you can also include your own custom logo and favicon in your theme files, and these are then included as part of your theme when it is installed. These files must use the naming convention logo.svg, and favicon.ico, respectively. You can also change your logo and favicon at a later time, see Changing the site logo and Changing the shortcut icon.

  2. In the Developer Portal, click Appearance > Install new theme. The Install new theme window is displayed.
  3. In Upload a module or theme archive to install click Browse, and navigate to your newly updated compressed theme file.
  4. Click Install to install the theme onto your site.
  5. Click Enable newly added themes, and find your new theme in the list of Disabled themes. Click Enable and set as default to set your new custom sub-theme as the default theme for your site.
  6. Return to the Developer Portal home page by clicking Back to site. You can now see your custom theme.
    The home page with the updated theme

What you did in this tutorial

In this tutorial, you completed the following tasks:
  • Created a sub-theme of your Developer Portal site by using the theme generator.
  • Configured some customized home page elements in the overrides.css file of your sub-theme.
  • Uploaded and installed your customized theme in your Developer Portal site.
  • Successfully customized the appearance of your Developer Portal home page.