Set Up Your Site
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 HLHigher Logic site or have just created a new MicrositeOrganizations that license the Microsites module can create and manage independent websites for each of their communities, each with a unique design, layout, and navigation., configuring the various settings in this interface is one of the first tasks you should complete.
NOTE: The changes made here are specific to the site you're currently managing.
Accessing the Site Setup Interface
- Click Admin in the Webmaster Links menu.
- Click site setup.
Using the Site Setup Interface to Configure a Site
The Site Setup interface is organized into the following tabs, each allowing you to manage a specific aspect of your site:
On this tab, you can configure the basic properties of your site, including:
A site's official name, and the title that appears on the Site List and other pages.
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 clients prefer not to use a slogan so they can use the available space for a wider Logo image (often to meet branding needs).
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:
NOTE: Path names only apply to MicrositesOrganizations that license the Microsites module can create and manage independent websites for each of their communities, each with a unique design, layout, and navigation. (i.e., additional sites that aren't your main site).
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? Which do not? To find out, 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.
NOTE: Only Super Admins can access this tab.
This is where Super Admins can control which features/settings Site Admins are able to access/change on the Site Setup page for their site:
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.
- 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 HL 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.
On this tab, you can manage the following site layout options:
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, beneath the site banner, and is the primary way users navigate a site's pages.
The option selected here controls how the Menu Bar looks and functions:
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.
The option selected here controls whether a site has a Footer, and if so, how it looks and functions:
Content Items from the page selected here are 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.
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:
Controls whether page breadcrumbs are available. If enabled, they appear below the Menu Bar, as shown below:
Breadcrumbs are recommended for two reasons:
Controls whether Bio-bubbles are available. If enabled, a pop-up providing user details appears when hovering over a user's picture or name.
NOTE: Bio-bubbles respect privacy settings.
|Additional Site-wide Content||
If needed, you can display Content Items from any page:
NOTE: It's often necessary to create a dedicated hidden page to meet the needs of content displayed in this way.
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.
Using this method, you can 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 clients: Affiliate, Network, and Experience.
1. Click here to view a site using the Affiliate Theme.
2. Click here to view a site using the Network Theme.
3. Click here to view a site using the Experience Theme.
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 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.
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:
- You can click this button to paste in CSS code,
- Or click this 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 HL 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.
HL'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.
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.
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.
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 HL 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 16x6 icons that are displayed next to the URL of your site in a browser's address bar. Additionally, they're often displayed next to the name of your site in a user's list of open tabs and bookmark listings, making it easier for users to quickly identify it. The Favicon must be file type .ico at 16x16px. Click HERE to 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.
While the default Contact Us page is typically sufficient for most sites, this page allows you to designate someone as a site's primary contact, who will receive the messages users submit via the Contact Us page (see Figure 14). This is generally done for specific Microsites who want or need a specific individual to manage the messages received through the Contact Us form.
- This is the primary contact information added to the site's Contact Us page.
- The is the form provided on a default Contact Us page, and the one provided if the primary contact's email address is hidden (messages will still go to the listed email address).
- The reCAPTCHA is added to the page to prevent bots from spamming your site. Users are required to complete the reCAPTCHA before they'll be able to send the message.
NOTE: If adding primary contact information to a site, we recommend setting the Hide email address option to Yes. This serves to important functions: (1) It enables the reCAPTCHA, which prevents bots from spamming them, and (2) it hides their email address on the form, preventing spam from other sources.
We also recommend notifying the individual designated as a site's primary contact so they're aware of the types of messages they may receive.