Theme Settings
Experience Builder provides the ability to update and configure many options in the USWDS SF Lightning Community template.
-
Theme Options
- Colors
- Images
- Fonts
- Component Drop Zones
-
Theme Settings
- USA Banner Type
- Website/ Application Name
- Path to home page
- Logo Type
- Header Secondary Nav Menu Name
- Custom Navigation Toggle
- Display Login
- Custom User Profile Menu Toggle
- Custom Search Toggle
- Body Width
- Footer Settings
- Footer Navigation Menu Type
- Footer Main Nav Menu Name
- Footer Secondary Nav Menu Name
- Footer Social Nav Menu Name
- Agency Name & Agency URL
- Contact Center Name
- Contact Center Email
- Contact Center Phone
- Contact Center URL & Contact Center Link Text
- Footer Region Toggle
- Identifier Type
- Site Domain
- Second Agency Name
- Second Agency URL
- Second Agency Logo Asset Name
- Search Component
- Global Search Box
- User Profile Component
- User Profile Menu
- Navigation Component
The theme ships with a GSA-specific branding set. Rather than modifying the existing branding set, it is suggested that organizations create a new branding set and apply it to the theme.
By and large, a logo with a transparent background is best. However, due to the heavy contrast between the header (white) and identifier (black), it may be necessary to upload an image with a white background.
Source Sans Pro is the default font across the theme.
This drop zone can be toggled on via the Footer Region Toggle
In Experience Builder, the following fields are presented as configurable options in the Theme Settings menu. In many cases, turning a toggle on/off will hide or show a component drop zone on the page.
US Government website banner to provide verifiable information to users. Four options available depending on the type of site.
- Options
- Gov English (default)
- Gov Spanish
- Mil English
- Mil Spanish
/s
Most government agency logos have a 1:1 aspect ratio. However, there are agencies or initiatives which produce rectangular logos where the name is included. In that case, the "Website/ Application Name" does not need to be displayed and should be hidden. For example:
Note, review Images guidance for specifics about background colors and aspect ratios.
- Options
- Square (default)
- Wide
Allows site manager to use out of the box Salesforce navigation menu styles (off) or override it (on) and use a USWDS-themed navigation bar.
- Options
- On
- Off
Hides or shows user profile menu component. Does not enable/disable login on the site. For instance, mysite.gov/s/login will still render. If removing the user profile menu component, it is suggested that the login page be updated.
- Options
- Yes
- No
Provides the ability to drop a custom User Profile Menu component in the place of the current menu.
- Options
- On
- Off
If you choose not to display search on your site (you should), toggling the Custom Search to "On" and then not dropping a component into the drop zone will effectively hide the search box from your users. It will not prevent folks from going to /search though.
- Options
- On
- Off
All body widths scale for smaller devices.
- Options
- Full (100% page width)
- [Default] Standard (960px same as nav bar)
- Wide (1336px)
- Options
- [Default] Big, a menu with top level items and sub-menu items
- Small, a flat menu structure without sub-menu items
If you are having trouble finding the Navigation Menu Name or ID, run the following query:
SELECT Id, DeveloperName, MasterLabel FROM NavigationLinkSet
Turning on the Footer Region Toggle opens up space on the left side of the footer where a component can be placed. Note the due to the background color of the footer, the outlining of the zone may be difficult to identify. The image below used a CSS override to make it more obvious.
Implementation of https://designsystem.digital.gov/components/identifier/ Default: English Options:
- English
- Spanish
- Multi w Logo English
- Multi w Logo Spanish
- No Logo English
- No Logo Spanish
- Taxpayer Disclaimer English
- Taxpayer Disclaimer Spanish
URL for the given community.
If choosing a 'Multi' option from Identifier Type, enter name of the second agency which should be displayed.
If choosing a 'Multi' option from Identifier Type, enter primary website of second agency.
If choosing a 'Multi' option from Identifier Type, enter API name of ContentAsset.
- Once deployed, go to Files in the Salesforce app picker
- Select Libraries from left hand pane
- Upload new image under Asset Library folder
- Copy the API Name of the file
- Check "Let guest users see this asset file on public and login pages"
- Save
- Open Experience Builder for your community
- In the attributes menu, paste in the image API Name