Site administrators can configure, preview, activate and update content that shows in the header and footer of their COVID-19 site. This self-service functionality gives administrators more control over their site and empowers their team to update key items without needing to contact Socrata Support.
When a user is not logged in to your site or has no user role, they will see the "Branded Header Bar". Users who have a role on your domain will not see the "Branded Header Bar" when they are logged in. Instead, users with a role on the domain will see the gray "Internal Navigation Bar," which can now be modified to include custom links just as the "Branded Header Bar" can be.
Headers and Footers configured through this functionality enhance the experience of users on mobile devices. These configurations can be applied to every page on a site or to every page except the homepage. More on that in the Branded Navigation Settings section of this article.
Site Administrators use the “Site Appearance” control panel to configure their site’s header and footer. When logged in, users will find “Site Appearance” on the Administration page, accessed by clicking “Administration” in the top right of the screen.
Within the “Site Appearance” control panel, there are five sections for configuration:
Provide a menu of links for Site Members who are signed into your site. These links will be displayed in a dropdown menu on the internal navigation bar.
This page is where administrators control a selection of functions across their site, beyond just the header and footer, including:
Select where these Site Appearance settings will appear when activated:
- Entire Site - header and footer configured here will show on every page of the site.
- All pages except homepage - header and footer configured here will show on all pages except for the homepage.
Template - There are two templates to choose from that control how the header and footer look.
- All elements of this header appear in a single horizontal row
- Only 1 background color can be chosen, the primary background color
- Elements in this header appear in two bars on two background areas
- The top bar contains the logo, display name and search bar, its background in the secondary background color.
- The lower bar contains header menu links, social media icons and the sign-in button.
Max Width - used for administrators who want a fixed width on their site when users visit. If this field is filled, make sure to include "px" following the numbers.
Browser Window or Tab Title Display - the text that shows in the browser or tab title area
Browser Window or Tab Icon (Favicon) - the icon that shows in the browser or tab title area
Typeface - Typeface for text in header & footer
Google Analytics Token - Enter a Google Analytics tracking code to collect analytics for your site under the Administration > Site Appearance > Branded Navigation Settings section of your site.
WebTrends Tag - Enter a Webtrends tag URL to collect analytics for your site.
Sign-in/Sign-out - options for allowing users to sign-in and/or create an account on the site.
This page is where administrators control the appearance of their site’s Header bar. All fields are optional.
Header Bar Logo - the image to show in the upper-left of the header bar. This must be hosted online (e.g. on the government's main website); please insert the URL here.
- Height & Width - administrators can optionally set the height and width for the logo displayed in the Header Bar. If this field is filled, make sure to include "px" following the numbers.
Header Display Name - Name displayed in the Header Bar. Usually set to the organization's name.
Header Bar Background Color - Use HEX values; the hexadecimal number here represents a specific color, or enter the word "transparent" for no color so that the site background comes through.
- Primary - background color of the Header Bar.
- Secondary - only used in the Rally template for the menu area.Bar Text & Link Color - the color of the text and “Linked Labels” in the header bar. Use HEX values, the hexadecimal number used to represent a specific color.
Header Links - linked text and dropdown menus that show in a horizontal menu in site's Header Bar.
This page is where the appearance of a site’s Footer is controlled. All fields are optional as any field left blank will not show anything in the Footer.
Footer Logo - the image to be shown in the footer. This must be hosted online (e.g. on the government's main website); please insert the URL here
- Height & Width - administrators can optionally set the height and width for the logo displayed in the Footer. If this field is filled, make sure to include "px" following the numbers.
Footer Display Name - Name displayed in the Footer. Usually set to the organization's name.
Footer Background Color - color that fills the Footer and is background for text and image elements in the Footer. Use HEX values, the hexadecimal number used to represent a specific color, or enter the word "transparent" for no color.
Footer Text & Link Color - the color of the text in the Footer. Use HEX values, the hexadecimal number used to represent a specific color.
Footer Links - linked text that show in the site's Footer
Copyright Notice - display a copyright notice with year in the Footer. The notice will automatically update to the current calendar year.
Powered by Socrata - displays "Powered by Socrata" branding in the footer, and also provides a link to socrata.com.
This page is where Social Profiles are linked within a site’s Header and Footer. All fields are optional.
- Add links to all the social profiles that site users may want to engage with, including: Facebook, Twitter, Youtube, LinkedIn, GitHub, etc.
- Adding Social Profile links this way adds the Icon for that site into both the Header and Footer.
To edit or update any field, just input the information needed.
When in doubt, leave it out
If a field is left blank, then that will not show on a site. For instance, administrators have the option to include a logo on both the header and the footer. If administrators only want a logo in the header, then they can just leave the footer logo area empty.
Text & Background Colors as Hexcodes
To edit and update the background and text colors in the header and footer, administrators will need to use hexcodes. A hexcode is a six-digit number and/or letter combination that is used to represent a specific color. For instance, the hexcode for white is #FFFFFF and the hexcode for black is #000000. Hexcodes must be preceded by the "#" symbol.
Once the hexcode is known for the desired color, it can be entered into the appropriate field.
Header & Footer Menus
In both the Header Bar and the Footer, administrators can configure linked text for users to use to navigate from any page on a site.
To add linked text to the header, find the “Header Links” section of the Header Bar configuration.
In the fields under Link Labels, input the short text that users will see and click on.
In the fields under URL, input the website address that users should be taken to when they click on the text.
Administrators can add up to 15 links in both the Header and the Footer. Just click the + Add Header Link button to add more links to configure.
In the Header Bar, in addition to the linked text, drop-down menus can be included.
To add a drop down menu in the Header Bar, first choose the + Add Menu Button. Then, in the field labeled “Menu Text” configure the title of the menu. From there, configure the links within that menu the same way the other Header and Footer Links were configured.
To reorder links in a menu, grab the arrow symbol in the center of the item to be moved and drag it to that place in the list where it should appear.
Once configurations across all sections have been prepared, the header/footer can be previewed across all pages of the site.
Select the Preview button. This will take the administrator to their site’s Public Catalog page, with a preview of the Site Appearance setting configured. From here, administrators can navigate to other pages of their site. A blue 'preview mode' banner will indicate the temporary nature of this condition.
When ready, navigate back the to the Site Appearance section on the Administration Panel by clicking on “Administration,” now found in a menu under the username in the top right-hand corner of the screen.
When the header and footer have been configured as desired, it is time to Activate. Activating means that a site’s pages will have the new header and footer, and that "Primer" (i.e. a dataset's landing page will become the front-page experience for datasets moving forward). To activate, click the blue Activate button in the Site Appearance section.
Remember, administrators can controls what pages utilize the new header and footer in the General Settings section.
Once activated, administrators can still make changes, preview, and update their site’s appearance at anytime. Just make the changes, Preview, and click the Update button when ready.
If the Preview and Update buttons are red, this indicates that there is an invalid entry in your Site Appearance configuration. Please review these sections before proceeding with the update.