Tutorial: Adding a custom block to a page other than the front page

You can customize the appearance of a page on your Developer Portal by adding a custom block. Blocks are boxes of content that are rendered into an area or region of a web page, such as the Products page or Apps page. Blocks can be displayed in regions, such as footer or sidebar, on your page.

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. The tutorial Adding a custom block to the front page explains how to add a custom block to the front page.

About this tutorial

In this tutorial, you create a custom block that contains extra guidance on application creation and registration, and add that custom block to the Apps page of your Developer Portal.

The Apps page displays like this before the block is added. A screenshot of the origianl front page

This tutorial takes you through creating a custom block, and configuring it to show on the Apps page.

  1. Log in to your Developer Portal as an administrator.
  2. Click Blocks, then click + Add content block.
  3. In the Block description, enter App Info.
  4. In the body area, click Source, then enter this HTML:
    <div class="tutorial_block_2">
<p>Before you can use an API, you must create an application. When you create an application you are provided with a client ID and client secret for the application. You must supply the client ID when you call an API that requires you to identify your application by using a client ID, or a client ID and client Secret.</p>
</div>

    Add custom block page

  5. To see a preview of the block click Source again.

    Add custom block (source view)

    Note: This block uses almost no inline-styling, instead it allows your theme to decide how it is rendered. The advantage of this set up is that you can easily change the rendering without modifying existing content in the database. Any styling that is required can be added to a custom theme. For more information, see Tutorial: Creating a custom theme for the Developer Portal.
  6. Click Save and configure.
  7. In the Title field, enter Creating an App and ensure that the Display title checkbox is selected.
  8. Under Visibility, click Pages.
  9. In the Pages text area, enter /application , ensure that Show for the listed pages is selected.
  10. From the Region list, select Secondary.

    page showing the block configuration

  11. Click Save block.
  12. Click Save blocks.

What you did in this tutorial

The Apps page now has an additional block with a guidance message.

App page showing new custom block

What to do next

Instead of using inline styling like that provided in the html, adopt best practice by adding class selectors and developing a custom theme. By default this block is English, so you might want to consider adding translated versions.