You're viewing **Apigee Edge** documentation.  
[Go to the
**Apigee X** documentation](http://cloud.google.com/apigee/docs/api-platform/publish/portal/api-portal-themes). info

> [!NOTE]
> **This topic describes the original version of the portal.** All new portals are based on the [new theme, API docs, and developer identity service](https://docs.apigee.com/api-platform/publish/portal/build-integrated-portal). To migrate an existing portal, see [Migrate to the new version of the portal](https://docs.apigee.com/api-platform/publish/portal/migrate).


> [!NOTE]
> **Note:** The integrated portal is available as an Apigee-managed solution for Apigee Edge for Public Cloud customers only. If you are an Apigee Edge for Private Cloud customer, refer to the customer-managed [Drupal portal solution](https://docs.apigee.com/api-platform/publish/drupal/open-source-drupal).

<br />

A *theme* consists of a global cascading style sheet (CSS) that provides a uniform look and feel for all of the pages in your portal. The goal of a theme is to let you change the look and feel across all of your portal pages at one time.

A majority of the default styles provided with the sample portal are based on Bootstrap. You can customize, preview, and publish your theme, as described in the following sections.

Watch the following video to learn how to customize the portal theme.

<iframe width="560" height="315" src="https://www.youtube.com/embed/TRhqt7L2Obs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Access the theme editor

Customize, preview, and publish the theme for your portal in the theme editor. To open the theme editor, select **Theme** in the drop-down menu in the top navigation bar.

![Theme editor](https://docs.apigee.com/static/api-platform/images/theme-editor.png)

As highlighted in the previous figure, the theme editor enables you to:

- [Add custom styles](https://docs.apigee.com/api-platform/publish/portal/original-theme/portal-themes-v1#custom-styles) to customize your theme using the style editor pane
- Preview your theme in the preview area by clicking **reload the preview**
- [Customize your logo](https://docs.apigee.com/api-platform/publish/portal/original-theme/portal-themes-v1#logo)
- [Customize the background image](https://docs.apigee.com/api-platform/publish/portal/original-theme/portal-themes-v1#background-image)
- [Publish your theme](https://docs.apigee.com/api-platform/publish/portal/original-theme/portal-themes-v1#publish-theme) to your live portal

## Add custom styles

Customize your theme by adding your own CSS code in the style editor pane. All CSS style elements are supported.

> [!NOTE]
> The style customizations that are in effect can be influenced by CSS specificity rules, as described in [Understand CSS specifity rules](https://docs.apigee.com/api-platform/publish/portal/original-theme/portal-themes-v1#css-specificity-rules).

To customize your theme:

1. Select **Theme** in the drop-down menu in the top navigation bar.
2. Add your custom CSS code in the style editor pane on the right side of the page.
3. Preview your changes in the preview pane by clicking **reload the preview** .  
   \> **Note**: You can click through your portal navigation to preview content on all pages.
4. Click **Publish** to publish your theme changes.
5. Click **Publish** to confirm the update.

## Customize your logo

Customize the "Your Logo" image with your company's logo, replace the following image files in the file manager by uploading your logo using the **same names and relative file sizes**:

- `logo.png` (140 pixels by 40 pixels)
- `mobile-logo.png` (140 pixels by 40 pixels)

In addition, modify the following content in the CSS style sheet, as required:

<br />

    /* ==== Header Menu ==== */
    ...
    body .navbar-brand {
      padding: 5px 15px;
    }

    <br />




    `.navbar-brand img {
      max-height: 50px;
      margin: 0;
      padding: 0;
    }`

<br />

For more information, see [Manage your assets](https://docs.apigee.com/api-platform/publish/portal/portal-files).

## Customize the background image on the home page

Customize the background image on the home page by modifying the following content in the CSS style sheet.

- Modify the background image file and its placement.  

  You can upload your own version of the `portal-hero.jpg` image to the file manager using the **same name and relative file size** (1440 pixels x 540 pixels). If you want to use a different filename, be sure and edit the `background-image` value in the CSS below.

      /* ==== Jumbotron ====
      a billboard for drawing attention, from Bootstrap  */

      home-page-jumbotron-bg {
          background-image: url('/files/portal-hero.jpg');
      }

- Modify the format of the text that overlays the background image.

      .jumbotron {
       text-align: center;
       height: 500px;
       background-size: cover;
       margin: -50px -30px 0 -30px;
       border-radius: 0;
      }

      .jumbotron h1 {
       font-size: 40px;
       font-weight: 400;
      }

      .jumbotron h2 {
       font-size: 25px;
       font-weight: 400;
      }

      .jumbotron a, .jumbotron a:hover {
       font-size: 18px;
      }

      .jumbotron p {
       max-width: none;
      }

## Understand CSS specificity rules

> [!NOTE]
> Use of the `!important` rule on a style element declaration to override other declarations is considered bad practice and is not recommended. The `!important` rule impacts the cascading and specificity rules of CSS and can make debugging your style element declarations more difficult.

CSS specificity describes the method used by a browser to determine precedence for CSS style element declarations when conflicts arise. CSS specificity is calculated by applying a weight to a specific CSS style element declaration based on its selector type. The more specific the CSS selector, the higher the weight. An ID attribute, for example, will be given a higher weight in the calculation than a type selector.

For example, if you define the following style elements in your CSS code, the paragraph element will be colored red because the p style element declaration within a div element is more specific than the p style element declaration.

    div p { color: red }  ← More specific  
    p { color: blue }

Similarly, if you define the following style element declarations in your CSS code, then any text enclosed in `<div class="test"></div>` tags will be colored blue because the id attribute style declaration within a div element is more specific than the `div` style element declaration.

    div#test { background-color: blue; }  ← More specific  
    div { background-color: red; }

For style element declarations with the same specificity, the last style element declaration defined will take precedence. For example, given the order of the following style element declarations, the paragraph element will be colored blue.

    p { color: red }  
    p { color: blue }  ← Last specified

## Publish your theme

> [!NOTE]
> Apigee recommends that you preview all content in your portal before publishing to your live portal.

To publish to the live portal the theme and style customizations that you have added:

1. Select **Theme** in the drop-down menu in the top navigation menu.
2. Click **Publish**.

To view your published content in the live portal, click **Live Portal** in the top navigation bar.