How to Customize the Look of your Portal

With Gelato, customizing your API documentation portal can be done in three simple steps:

  1. Importing your Documentation
  2. Setting your color theme and adding any custom CSS*
  3. Setting a custom Header and Footer*

*Enterprise account required

Import your documentation

Log into your Gelato account here: , click the APIs & Docs tab, and then click the Add new API button. Give your new API a name and then add a version number and some other basic information about access and click Save version. Finally, click Import an API Definition and follow the onscreen instructions for importing your Open API (formerly known a Swagger), RAML or API Blueprint document.

Setting your color theme and adding any custom CSS

With all of the data in place, it’s time to adjust your portal's appearance. Click on Portal Settings and then select Launch Theme Editor from the left hand navigation

From this page, you can customize the overall appearance of the portal. In the Basics tab, you can upload your logo and add text. This is where you will also set the brand color (this will always be the background color for the header). You can also customize the favicon (we’ll convert it for you too).

You can select the Landing Page tab to change the text or add images to your landing page. eate a link in Markdown, you will start with the words you want displayed in s The Custom CSS tab allows you to add custom CSS rules that will be applied portal-wide. While working on the page, you can preview your work by clicking the Preview CSS button

Once you are happy with the way your portal looks, click the publish button to bring your changes live.

Setting a custom Header and Footer

Returning back to the Portal Settings tab, select either Header or Footer from the left hand navigation

Once on the header or footer page, first check the Enable box. This will activate the field where you can enter your custom HTML and CSS

Before you save your changes and make them live on your portal, click Preview in Browser to get a preview of how they will appear. Once you have everything looking the way you want, simply click the save custom header/footer button and your changes will be made live.

If you need to revert back to the original header/footer, no sweat! Just click the Restore Original Header button and everything will be restored to the previous state.

If you have any questions about portal customization, don't hesitate to reach out. We love hearing from our customers!