Skip To Content

Brand a site with header and theme options

Branding your site with your organization's logo and colors establishes your content as trusted and authoritative. It also helps your site to blend with your organization's other web content. This topic describes how administrators and core team members can do the following:

To get started, sign in to Portal for ArcGIS and click Sites on the Overview page to view a list of your sites.

Tip:

You can also edit a site when viewing it in a browser. Be sure you're signed in and look for the edit button to the left of your site.

Choose a header style

Your site's header is where you can brand your site with a logo, create navigation to other resources with menu links, and link to social media accounts.

  1. Click Header on the customize panel.
  2. Click the Appearance menu to choose a style for your header. The following three options are available to choose from:
      • Standard—The default for every new site, this design features a thin, compact bar that has space for a logo (60 pixels), social media, and menu links.
      • Prominent—This design provides more space for larger logos (120 pixels) and extra menu links.
      • Custom CSS/HTML—Use a syntax-enabled code editor to configure a header with custom code. For more information, see Custom headers and footers.
      Note:

      To add a logo, follow the steps provided in the next section.

  3. Click the Branding menu. All fields provided in the menu are optional.
    • Name—Enter a name to appear in your site's header. The name you provide in this field is only visible in the header and will not be reflected in your site's URL or on your list of sites.
    • Short Name—Enter a shortened version of them you've added to your header. This name will only appear if your header's original name is too long when viewed on smaller screen sizes (for example, a mobile phone).
      Tip:

      People increasingly use mobile devices to access the internet. It's highly recommended that you add a short name to ensure the quality of your site on any device.

  4. Choose an option for Layout: Box or Wide.
  5. If you want to brand the header of your site with custom HTML or CSS, choose Use custom HTML/CSS.

    Note:

    Header HTML does not support embedded JavaScript. Script tags will be ignored.

  6. Modify the CSS box in the side panel and click Apply Changes to see your code in effect.
  7. Click Save.

Add a logo to a header

The size and positioning of your site's logo depends on the header style you choose.

  1. Click Header on the customize panel.
  2. Click to expand the Branding menu.
  3. Click the Logo toggle button to turn it on.
  4. Add an image by choosing Image URL or by uploading an image from a file.

    Tip:
    If you're uploading an image from a file, an image saved as a PNG file works best. You can crop and zoom the image in the card's Image settings section on the Customize panel.

  5. If you're using the Prominent header, you can choose a setting for Image Alignment.
  6. For Logo Alt Text, provide text to meet accessibility standards.

    Tip:
    If a logo has text on it, the alt text can be the name of the company. If the logo is a logomark design, you can consider it decorative and type “” for the alt text.

  7. Click Save.

Create a theme

Create a theme for your site by choosing colors for your site's header, text, and buttons.

Tip:

When choosing a color, review branding guidelines for your organization. Many branding guidelines provide exact color codes for content such as websites and logos. If you don't have branding guidelines, consult with your team or stakeholders to ensure that your site's theme properly reflects your organization.

  1. To select a color for any of the following options, enter a color code or choose a color from the color picker next to the color code field.
    • Global Nav Background Color applies color to your site's global navigation bar.
    • Global Nav Text Color applies color to the text in the global navigation bar.
      Note:

      For more information on global navigation, see What is global navigation?

    • Header Background Color applies color to the header of your site.
    • Header Text Color applies color to all text in the header.
    • Body Background Color applies color to your site's rows. Row color and text color can also be configured for each row by following the steps provided in Add your first card using the row card.
    • Body Text Color applies to text across your site.
    • Body Link Color applies color to any links provided on your site.
    • Button Background Color applies color to buttons provided on your site.
    • Button Text Color applies to the text on any buttons provided on your site.
  2. Once you've set colors, click Apply Changes.
  3. You can also apply fonts to text in the header and the body of your site.
    • To choose a font for your site's body, click the Base Font settings button.
    • To change the font for the header of your site, click the Header Font settings button.
Note:

To start over or return to default colors, choose Reset to Defaults at the bottom of the Theme menu.

Create a footer

The Site Editor default does not have a footer. You must create a custom footer to have a persistent footer across all pages of your site.

  1. From the Footer section, select Custom.

    A default footer appears on the page and a CSS box appears in the side panel.

  2. Click the settings button at the lower right of the footer to edit the HTML.
  3. Click the settings button again to view your changes.
  4. Modify the CSS box in the side panel and click Apply Changes to see the effects on your HTML.
Tip:

Footer HTML does not support embedded JavaScript. Script tags will be ignored.

Next steps

To configure your site with more branding, you can do the following: