Was this helpful?

A theme is a collection of files that defines the look and feel of a site. The Developer Services portal is initially defined with a default theme, which you can customize. This allows you to select your preferences for the look and feel of your portal. More specifically, you can change the color of links, backgrounds, text, and other theme elements. You can also change the welcome message that appears on the front page of your developer portal.

You can customize the theme through the developer portal UI, or by creating a custom theme file that overrides the default theme file.

Depending on your version of the developer portal, you will have several themes to choose from:

Theme             Description

Apigee Responsive theme

Based on Bootstrap 3, the default theme for later releases of the portal. This theme supports devices with widths from 768 pixels to 1400 pixels. All Bootstrap 3 features are available in this theme.

Note: To use the Apigee Responsive theme, ensure that the Bootstrap 7.x-3.0 theme is enabled.

Apigee DevConnect theme

The default portal theme previous to the Apigee Responsive theme.

Existing portals can be upgraded to the new Apigee Responsive theme but must first ensure that all blocks, templates, and other content is compatible with Bootstrap 3, and that the Bootstrap 7.x-3.0 theme is enabled.

Apigee Base theme

A parent theme to the Apigee DevConnect theme and not intended to be used on its own.

To set the default theme:

  1. Log in to your portal as a user with admin or content creation privileges.
  2. Select Appearance in the Drupal administration menu. The list of enabled themes appears.
  3. For the theme that you want to use as the default, select Set default.
    To use the Apigee Responsive theme, ensure that the Bootstrap 7.x-3.0 theme is enabled on that page as well.
  4. Save the configuration.

Customizing the Apigee Responsive theme

This section describes how to configure the Apigee Responsive theme, including:

  • Customizing modal forms
  • Customizing general settings

To customize modal form support:

The portal uses the Drupal Bootstrap Modal forms sandbox module to display Drupal forms as modals. The login and register forms by default function as modals. You can disable this functionality to have those forms appear as individual pages instead.

  1. Log in to the developer portal as a user with admin privileges.
  2. Select Configuration > User interface > Boostrap Modal forms in the Drupal administration menu.
  3. Enable or disable modal support for forms.
  4. Select Save configuration.

To customize the general settings of the Apigee Responsive theme:

  1. Log in to your portal as a user with admin or content creation privileges.
  2. Select Appearance in the Drupal administration menu. The list of enabled themes appears.
  3. In the Apigee Responsive (default theme) area of the page, select Settings (do not select the Settings button at the top of the page).
  4. The settings page for the Apigee Responsive theme appears.
  5. The following table describes the areas on that page that you can use to configure the theme. If you change any of these settings, select Save configuration.

    Area            Section Description

    Bootstrap settings

       
     

    Components

    Control the display of breadcrumbs, the position of the main menu (called the Navbar in the settings), and the display of region wells:

    • Breadcrumbs: Hide/show breadcrumb, turn on/off the Home link inside the breadcrumb.
    • Navbar: Change the position of the Navbar (main menu)  to fixed/static/normal positions, making the layout more dynamic.
    • Region wells: Add a well class to any region on the site to add a darker background to the region.
     

    JavaScript

    Control the display of anchors, popovers, and tooltips:

    • Anchors: Fix anchor positions, and enable smooth scrolling.
    • Popovers: Popovers add small overlays of content to any element. Enable/disable popovers and configure how popovers are used.
    • Tooltips: Configure how tooltips are used. You can force each tooltip to display on the right, left, top, or bottom of each form element, and set other display options.
     

    Advanced

    Controls how the portal uses BootstrapCDN to update the Bootstrap theme files. You can disable the reliance of the portal on BootstrapCDN, but you then must provide your own implementation of the Bootstrap framework.

     

    DevConnect Settings

    Set the welcome message, the default colors, and the size of the logo that appears in the main menu.

    Override Global Settings

       
     

    Toggle display

    Enable and disable the display of different areas of the portal.

     

    Logo image settings

    Specifies the image displayed in the main menu.

     

    Shortcut icon settings

    Specifies the image displayed in the address bar of a browser or for a bookmark to the portal.

Customizing the Apigee DevConnect theme

The Apigee DevConnect theme is the default portal theme for older releases of the portal, and can be upgraded to the new Apigee Responsive theme. However, you must first ensure that all blocks, templates, and other content is compatible with Bootstrap 3 before performing the upgrade.

To customize the general settings of the Apigee DevConnect theme:

  1. Log in to your portal as a user with admin or content creation privileges.
  2. Select Appearance > Apigee DevConnect theme > Settings in the Drupal administration menu. This displays the initial settings for the theme. Color settings are specified as hexadecimal values.

  3. Change the settings to suit your preference.
    For example, add or change the welcome message or change the header background color. The header background color is initially set to something close to orange (#FF4300). You can change it to another color such as blue (#0000FF).
  4. When you are done changing the settings, click Save.

Customizing a theme using a theme file

A Drupal theme file is named <theme_file>.tpl.php, where all theme files have the extension .tpl.php. To override an existing theme file, create a copy of the existing theme file with the same name, modify the copy, and write it to the correct directory.

For example, you want to override the default theme file named example-theme-file.tpl.php that is stored in the directory sites/all/custom/modules/example_module in the codebase. To override this file:

  1. Create a new file named example-theme-file.tpl.php, typically by copying the existing file.
  2. Edit your copy of example-theme-file.tpl.php to override existing settings and to add your own.
  3. Save your new example-theme-file.tpl.php file to sites/all/custom/themes/<default_theme_directory>/templates/example-theme-file.tpl.php in the codebase.

Drupal scans your default themes directory for all TPL files, and then associate the TPL files with declarations in the module file. To get Drupal to register a new theme file, clear your theme registry, or clear all of the site's caches. 

Help or comments?

  • Something's not working: See Apigee Support
  • Something's wrong with the docs: Click Send Feedback in the lower right.
    (Incorrect? Unclear? Broken link? Typo?)