Tutorial: Customizing themes for the Developer Portal

You can configure an overrides.css file in a theme to customize the appearance of your Developer Portal home page.

Before you begin

You must have administrator access to complete this task.

Download the pre-supplied sample theme: banka_connect_theme_custom_css.zip.

Important: You are not permitted to include any IBM® API Connect code within any custom themes that you create.

Download the overrides.css file from the pre-supplied sample theme from \banka_connect_theme\css, and open it in your chosen editor.

Customize the overrides.css file by entering hex codes, and pixel values when applicable, in the correct positions for the following elements:

Body of the home page

body.page-home #columns.no-menu-bar {		
  background-color: #fff;

Header of the home page

#page > header {								
  background-color: #a0a0a0;

Menu bar and border

#menu-bar {									
  background-color: #a0a0a0;
  border-bottom: 10px solid #ff9900;

Border of the footer

#page > footer, #page > footer .block-title {			
  border-top: 10px solid #ff9900;
  background-color: #dee0e2;

Footer

#page > footer a {
  color: #454A4C;

After you have entered the hex codes to complete the elements, save the overrides.css file.

After you have finished customizing the overrides.css file, add it back to the compressed file in \banka_connect_theme\css.
Install the compressed file as a theme in the Developer Portal. For more information, see Installing additional themes.
Return to the Developer Portal home page by clicking the Home icon from the administrator dashboard. You can now see your custom theme.

In this tutorial, you have completed the following tasks:

Customized the elements in an overrides.css file with hex codes and pixel values.
Installed the theme with the customized overrides.css file in the Developer Portal.