Customize the logo

You will want to use your own images and branding in  your developer portal.  To use a custom image, add its file to the developer portal’s content library, make a note of its path in this environment, and add a link in the ActiveDocs code to the location of the file in the content library. 

For the purposes of this demo, you can use any image on your laptop. Follow these steps:

  1. In the Developer Portal→Content environment, in the upper right, expand New Page and select New File. The resulting screen is shown in Figure 6.
Upload a new logo.
Figure 6: Upload a new logo.

 

  1. Under the Upload File section, choose the following:
    1. Section:  Choose  images because you will be uploading a logo.
    2. Path: Enter /images/MyLogo.png in the field.
    3. Attachment: Choose the logo you have identified.
Choose the image and click Create File.
Figure 7: Choose the image and click Create File.

 

  1. Click Create File.
  2. Make a note of the path to the image you added. For example, if you added the MyLogo.png image to the images section, the path would be /images/MyLogo.png.
  3. Navigate to the Layouts→Main Layout screen.
  4. Replace the existing brand, <a class="navbar-brand" href="/">{{  provider.name }}</a>, which is shown in Line 46 in Figure 8:
The code includes the existing brand in Line 46.
Figure 8: The code includes the existing brand in Line 46.
  1. Figure 8: The code includes the existing brand in Line 46.

Replace this line with:

<div class="logo">   <a href="/">  <img src="/images/MyLogo.png" style="width:150px;"> </a> </div>

Add the code needed to use the newly uploaded logo image.
Figure 9: Add the code needed to use the newly uploaded logo image.

 

Scroll to the bottom of the page and click Save.