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:

• Choose a header and title for a site.
• Add a logo to a site's header.
• Choose colors for the site's header, buttons, text, and background.

To get started, initiative or site team members can sign in to ArcGIS Hub and click Sites on the Overview page to view a list of sites. If your organization has a license to ArcGIS Hub premium, initiative sites are listed under Initiatives.

Dica:

You can also edit a site when viewing it in a browser. Be sure you're signed in to ArcGIS Hub 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. Open a site or initiative site in edit mode.
2. Open the side panel by clicking the toggle . If needed, click the back arrow next to Customize at the top of the panel to return to the root menu until you see the option to click Header.
3. Under Header 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.

     Anotação:

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

4. 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).

     Dica:

     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.

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

   Anotação:

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

7. Modify the CSS box in the side panel and click Apply Changes to see your code in effect.
8. 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 to expand the Branding menu under Header on the side panel.
2. Click the Logo toggle button to turn it on.
3. Add an image by choosing Image URL or by uploading an image from a file.

   Dica:

   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.

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

   Dica:

   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.

6. Click Save.

Create a theme

Establish a theme for your site by choosing colors for your site's header, text, and buttons. The colors you choose in your site's Theme menu are applied to the entirety of your site. You can override these selections by configuring colors for specific rows. For more information, see Colors and fonts.

Dica:

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. Open a site in edit mode.
2. Open the side panel by clicking the toggle . If needed, click the back arrow next to Customize at the top of the panel to return to the root menu until you see the option to click Theme.
3. To select a color for any of the following options, enter a hex value 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.

     Anotação:

     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 Color and fonts.
   • 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.
4. Once you've set colors, click Apply Changes.
5. 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.

Anotação:

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

Create a footer

You can use custom HTML to have add a footer to your site that's persistent across any pages attached to your site.

1. Expand the Footer menu on the side panel.
2. Click the toggle next to Custom.
3. Modify the CSS and HTML box in the side panel and click Apply Changes to see the effects on your HTML.

   Anotação:

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

Next steps

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

• Add menu links and ensure that global navigation is enabled. For more information, see Configure menu links and global navigation.
• Every site or initiative site includes a URL (web address). If your organization has a custom domain, you can configure this URL to further brand your site. For more information, see Configure a custom URL.