The Site Setup interface enables Site and Super Admins to manage a number of important site settings, including:
- applying a Theme,
- configuring various layout options,
- and managing high-level imagery.
If you're managing a new Higher Logic site or have just created a new Microsite, configuring the various settings in this interface is one of the first tasks you should complete.
NOTE: If your organization licenses the Microsites module, the changes made here are specific to the microsite you're currently managing.
Watch the video
Access the Site Setup interface
- In the Admin Toolbar, click Site Options > Site Setup (right click for a new tab).
The Site Setup interface is organized into the following tabs, each allowing you to manage a specific aspect of your site:
Site Name
On this tab, you can configure the basic properties of your site. Each option is described in the table below.
| Field | Description |
|---|---|
| Site Name | A site's official name and the title that appears on the Site List and other pages. |
| Slogan |
TIP: If a site has a slogan or mission statement you want to share, enter it here. Slogans appear in the middle of the main banner, between the site's Logo image and Welcome box. NOTE: Some customers prefer not to use a slogan so they can use the available space for a wider Logo image (often to meet branding needs). |
| Path Name | This is a Microsite's unique URL path name. For example, if you had a Microsite called EC West and set its Path Name to ecwest, its URL path would be: http://[sitename].com/ecwest
NOTE: Path names only apply to Microsites (i.e., additional sites that aren't your main site). |
| Copyright | If you'd like to display a copyright notice at the bottom of every (non-admin) page, enter it here.
NOTE: Copyright notices generally include the current year; if yours does, remember to update it each year. |
| Domain Name | Your site's domain name. |
| Google Tag Manager Code | Are you interested in tracking your site's traffic? Where do your members spend most of their time? What pages see the most hits? You can set up the Google Analytics feature on your site:
NOTE: If you have microsites, navigate to the Site Setup for each one and enter your GTM key. This applies the tracking code to your main community site and all additional sites. |
Admin
- The Site Setup interface is one of the main areas a Site Admin can access to manage a site.
- The Admin tab is only accessible to Super Admins.
- This is where Super Admins can control which features/settings Site Admins are able to access/change in this interface.
NOTE: If your organization licenses the Microsites module, you'll want to configure these settings for each Microsite or, better yet, update your Microsite template.
- Allow Layout Changes? - These options correlate to the settings on the Layout tab, and you can enable/disable each of them to control which Layout options Site Admins can manage.
-
Lock Top Level Navigation? - Toggle this to Yes or No to control whether Site Admins can update your site's top-level navigation menu (highlighted below) via the CMS.
- Allow Local Design? - Here, you can decide whether Site Admins can create a local Theme specifically for their site or be restricted to choosing an existing Theme (i.e., the prefabricated Higher Logic Themes and those created on the Theme Editor page). If local Themes are allowed, you can further control which Theme-creation options are available. Refer to the Create & Edit Themes page to learn more about importing Theme CSS, using the Color Picker, and overriding Theme CSS.
- Allow Images? - These options correlate to the settings on the Images tab, and you can enable/disable each of them to control the types of imagery Site Admins can upload.
Layout
NOTE: Super Admins can control what layout options Site Admins are allowed to change. If you're a Site Admin, some (or all) of the fields listed below may not be available to you.
On this tab, you can manage the site layout options described in the table below.
| Field | Description |
|---|---|
| Site Frame | Determines the default maximum width of all pages (content will respond to optimally fill the browser at widths smaller than the maximum).
|
| Main Menu Bar Type | A site's Menu Bar is located at page top, and is the primary way users navigate your site.
The option selected here controls how the Menu Bar looks and functions:
|
| Site Search | Controls whether the Site Search box appears in the Main Menu Bar (see image above).
NOTE: Disabling this option doesn't disable the ability to search, only whether it's available in the Menu Bar. If it is disabled, you may want to add the Faceted Search widget to the Home page so your users can search the site. |
| Footer Type | A site's Footer is located at page bottom, and generally includes information like an organization's branding, contact information, a link to its Privacy Policy, and links to its social media sites.
The option selected here controls whether a site has a Footer, and if so, how it looks and functions:
|
| Footer Content | Content from the page selected here is displayed in the Footer.
NOTE: It's often necessary to create a dedicated hidden page to meet the needs of content displayed in this way. |
| Welcome Box | Controls whether the Welcome Box is displayed at the top-right of each page (in the banner). If enabled, you can also enable/disable the following parts of the Welcome Box:
|
| Breadcrumb | Controls whether page breadcrumbs are available. If enabled, they appear below the Menu Bar, as shown below:
Breadcrumbs are recommended for two reasons:
|
| Bio-bubble | Controls whether Bio-bubbles are available. If enabled, a pop-up with user details appears when hovering over a user's picture or name. Bio-bubbles respect privacy settings.
|
| Cookie Notification | Use this toggle to control whether a cookie notification is displayed across your site (until acknowledged by a user).
See Manage Your Site Cookie Notification to learn how to configure and customize the cookie notification. |
| Additional Site-wide Content | Here, you'll see menus allowing you to select pages that have been created in the CMS/Page Designer. By selecting these pages, their content will display in the selected location across your site:
NOTE: It's often necessary to create a dedicated hidden page to meet the needs of content displayed in this way. Learn more about this process and what it enables you to achieve in Display Third-Party Code Across Your Site. |
Theme
Here, you can establish a site's visual aesthetic in one of two ways:
NOTE: Themes refer only to colors and CSS: A website's images, navigation, and other layout features are not controlled by a Theme.
Method 1 - Select a Theme
Use this method to apply any of the Themes created on the Site Admin > Theme Editor page to a site (see Create & Edit Themes).
NOTE: Each site using a Theme is listed in the Sites Using This Theme menu, and you can see what it looks like by selecting one and clicking Go.
In addition, three prefabricated, professional Themes are available for all customers: Affiliate, Network, and Experience.
1. Click to view a site using the Affiliate Theme.
2. Click to view a site using the Network Theme.
3. Click to view a site using the Experience Theme.
Method 2 - Create a site-specific Theme
NOTE: Super Admins can control what Theme options Site Admins are allowed to use, so some (or all) of the options listed below may not be available to you.
When creating a new Theme, there are three ways to customize it:
NOTE: These three tabs are in hierarchical order, meaning choices made in the Color Picker override any Import Theme CSS, while the Override CSS takes precedence over the Color Picker AND Import CSS.
Additionally, you can toggle each of these theme options ON/OFF. Turning off options you aren't using can result in faster page loads across your site. When it comes to troubleshooting, if you have added CSS, imported a theme, or changed colors with Color Picker and these changes aren't rendering, check to make sure these theme options are toggled ON.
NOTE: Local Design is typically only recommended for Microsites where a Site Admin wants total control over their site's design. In most cases, it's not the best option for any site under management by a Super Admin, as Local Design selections are not transportable to other sites.
While this functionality is available to meet specific business needs, we generally recommend that Super Admins create Themes using the Theme Editor (see Create & Edit Themes). This allows Themes to be copied, edited, and applied across all Microsites, while the only way to re-use a Local Design is to copy the website.
Customize Theme option 1 - Import Theme CSS
Here, you can import external CSS, like a Bootstrap Theme or code that was purchased from another source or custom-developed for your organization by a third-party.
When importing, you have two options (refer to the image below):
- Click this button to paste in CSS code,
- Or click this button to upload a Theme file.
Regardless of the method you choose, you can further edit the Theme using the Color Picker or Override CSS options, if needed.
NOTE: Thousands of Bootstrap Themes are available for free or a small fee. Keep in mind that Bootstrap Themes are different than Bootstrap Templates. While Higher Logic websites allow Themes to be applied, the underlying Template cannot be edited. If you want to apply third-party-created styles to your site, do not attempt to do so with a Bootstrap Template.
Customize Theme option 2 - Color Picker
- Higher Logic's native design tool, Color Picker allows you to easily select and apply colors to different aspects of your site, and to emails generated from your Discussions.
- This Theme option is a great choice for those without any specialized knowledge of CSS, as no coding is required and color selections are done by simply selecting them or entering hex codes.
- Editable colors are organized in the eight available tabs, and changes made to each class is previewed in the Sample area to the right.
NOTE: As you're making changes and working through each tab, the best practice is to occasionally click Next or Finish at the bottom of the page to save your changes.
Inheritance
Color selections made in the Main Colors tab are inherited across the site, but can be fine-tuned in the remaining tabs, if desired.
NOTE: This color inheritance is not reflected in the remaining tabs.
Discussion email colors
Colors used in emails generated from your site's Discussions can be updated on the Discussions tab.
NOTE: If no colors are set on the Discussions tab, Discussion email colors are determined through your main site's Main Colors tab and inheritance.
Customize Theme option 3 - Override CSS
The last of the three theme options, Override CSS is a powerful tool that allows advanced users fluent in CSS to insert any desired code they want, providing the greatest flexibility and control.
NOTE: CSS added here will override any Import Theme CSS AND Color Picker selections. Click the Show Theme CSS button see any imported CSS as you work.
Images
NOTE: Super Admins can control what image options Site Admins are allowed to change, so some (or all) of the fields listed below may not be available to you.
On this tab, you can manage a number of important site imagery, including:
NOTE: Compare the two images below for examples of each image type illustrated on a site.
A Phone Logo (not pictured) can also be uploaded to serve as your organization's logo for display on phones.
- Logo - This is the logo (generally your organization's logo) you want displayed in the top-left corner of your Higher Logic site (i.e., in the header/masthead). By default, the logo links back to the site’s Home page. Suggested dimensions: 250–375px width by 80–100px height. For optimal display on mobile devices, keep your logo width under 320px.
- Header Background - The background image in the site's header/masthead. When official branding is used here and a Logo is also desired, the best practice is to use .png Logo with transparency. Solid colors are often used as Header Backgrounds in conjunction with Logos.
- Menu Bar Background - The Main Menu Bar's background image. This is often a solid color so navigation links are easy to read.
- Page Background - The background image to show in the area outside the site's main content area.
NOTE: This image is only visible if the Site Frame on the Layout tab is set to Wide or Narrow: If set to Full, the site's main content area extends to 100% of the page.
- Content Background - The background image to show in the site's main content area. We generally recommend a white Content Background so your site's content is easy to see.
- Footer Background - The background image to show in the Footer. This is often a solid color so Footer text/information is easy to read.
-
Favicon (optional) - Favicons are small icons that display next to the URL of your site in a browser's address bar. Additionally, they often display next to the name of your site in a user's list of open tabs and bookmark listings so that users can easily identify it.
The Favicon must be a 16x16px, .ico file type. You can generate a favicon using your organization's logo.
NOTE: For best results, re-size images to meet their recommended dimensions before uploading them. Maximum file size is 5MB.
Accepted image types: .jpg, .jpeg, .png, .gif, .ico, and .jpe. The Favicon must be a .ico.
Contact Us
By default, your site includes a Contact Us link at the top left or right of the header for your interior pages, as shown below.
When clicked, users are taken to a Contact Us page containing a form they can fill out; when sent, the message is delivered to a point of contact at your organization.
Customizing the Contact Us form
The default form is shown above, and is typically sufficient for most customers, but you can make some customizations. Let's take a look at (1) what you can customize and (2) how to update the point of contact email address.
- Organization name, address, and contact information - If you'd like to include some or all of this information about your organization to the Contact Us form, fill out these fields. It will then display at the top of the form, as shown in the second image below.
- Point of contact email address - This email address will receive all messages sent via the Contact Us form. We recommend notifying this individual so they're aware they may receive these messages.
- Email form - This toggle controls whether the Contact Us form is included on the Contact Us page. If disabled, users will not be able to send a message to your point of contact, and the only information displayed will be whatever organizational information you provide.