Customization & accessibility

Port offers various customization options to help you tailor the developer portal to your organization's branding and style as well as communicate important information to your users.

Portal customization

Change organization name & logo

The title and logo of the portal (in the top left corner) are set to "Port" by default. You can customize both to match your organization's branding.

You can upload an organization logo directly in Port. Port stores and serves the image, so you do not need to host it externally. The logo appears in the application header and in the organization picker.

To change the title or logo:

1. Click your profile picture and select Settings.

2. Open the Logo tab.

3. Change the Title to your desired value. The title is limited to 30 characters.

4. To upload or replace the logo, choose an image in one of the following ways:

   • Drop an image into the selector.
   • Paste an image from your clipboard.
   • Click the pencil icon on the current logo and select Edit.

5. Review the Previews section to see how the title and logo look in dark mode and light mode.

6. Click Save to apply your changes.

Title scope

This title is intended for visual purposes, it will only affect the text in the top left corner of the portal.

It is not related to the title & identifier of your organization (i.e. the name & id returned by the Get organization details API endpoint).

Each organization has one logo. Uploading a new image replaces the previous uploaded logo.

If Port cannot load the logo, it displays the default Port logo.

To restore the default Port logo, click the pencil icon and select Delete, then click Save.

Supported files and limitations

• Formats: PNG, JPEG, or SVG.
• Maximum file size: 5MB.
• Maximum dimensions: Raster images (PNG and JPEG) are limited to 512x512 pixels.
• Recommended shape: A square image, because logos appear in a square container.

Existing logo URLs

If you previously set a logo using an external URL, it continues to render and is preserved when you save other settings. You can no longer enter a new external URL in the UI. To change an existing URL-based logo, upload a file instead. No migration is required.

Add an announcement banner

Organization admins can configure an announcement banner that appears at the top of the portal for all users. The banner can be enabled or disabled at any time.

Users can dismiss the banner and it will remain hidden until the admin updates the announcement.

To add the banner:

1. Click your profile picture and select Settings.

2. Open the Announcement tab, and toggle Enable announcement to turn it on.

3. Fill in the banner details:

   • Announcement: The text that will appear in the banner. (Maximum 300 characters)
   • Color: Choose a color for your banner. Currently, the available colors are blue and red.
   • Link (optional): Add a URL to make the banner clickable and direct users to the provided link. (Maximum 300 characters)

4. Click Save.

Custom icons

Organization admins can upload custom icons to use throughout Port. Once uploaded, they will be available for all users in your organization and can be used for blueprints, properties, actions, etc. Allowing you to align the portal with your organization's branding and visual identity.

To upload a custom icon:

1. Navigate to any location in Port where you can select an icon (such as when creating or editing a blueprint, etc).

2. Click on the Upload icon button at the top of the icon selection panel.

3. Upload your icon file. You can:

   • Select a file from your computer.
   • Copy and paste the file directly into the upload area (hover over the upload area first to enable paste).

   Supported formats: PNG, SVG, or JPEG. For PNG and JPEG files, maximum dimensions are 512x512 pixels. For SVG files, maximum dimensions are 8192x8192 pixels.

4. Enter a name for your custom icon (between 1-30 characters).

5. Click Save.

Your custom icon is now available throughout your Port organization. Custom icons will appear in a dedicated Custom icons section at the top of the icon selection panel, above the default Port icons.

To delete a custom icon:

1. Navigate to any location in Port where you can select an icon.

2. Click the Manage button to open the icons manager view.

   Manage button visibility

   The Manage button is only visible after at least one custom icon has been uploaded.

3. Click on the icon you want to delete.

4. Click the Delete button and confirm the deletion in the prompt.

Limitations

• Maximum file size: 10MB.
• Maximum icon dimensions:
  • PNG and JPEG: 512x512 pixels.
  • SVG: 8192x8192 pixels.
• Icon name length: 1-30 characters.
• Browser compatibility: Custom icons do not work reliably on Safari.
• Platform URL: Custom icons are supported on both the port.io and port.io domains. However, if you experience any issues on port.io, try switching to port.io.

Dark mode

To change the theme of the portal to dark mode:

1. In your Port application, click on your profile picture .

2. Click on Theme to toggle between light and dark mode.

Accessibility

Port is fully compliant with WCAG 2.2 (Level A & AA), Section 508, and EN 301 549 standards, making the platform more accessible to developers of all abilities. This includes enhanced keyboard navigation, screen reader compatibility, improved color contrast, and detailed ARIA labeling.

Various supported hotkeys are listed below to help you navigate the portal using a keyboard.

Widget card navigation

In dashboards, you can use Shift + Alt/Option + ArrowLeft/ArrowRight to jump between widget cards (wrapping around is supported).

Table cell actions

In tables, you can use Ctrl/Cmd + C to copy cell contents, and Ctrl/Cmd + E to edit or expand a cell.

Actions menu

Some components have an actions menu that can be opened by clicking on the component and pressing Shift + Return (Enter).

This can also be used to drag/rearrange widgets in dashboards, or files/folders in the catalog sidebar:

Search

Press Ctrl/Cmd + K to focus on the search bar.