Site Appearance

Overview

Site appearance lets you upload a logo and favicon and customize the the site header, navigation bar, footer, fonts and buttons.  

In this article

1. Navigate to Appearance
2. Add Site Logo and Favicon
3. Customize Site Header
4. Add Site Background
5. Adjust Footer Options
6. Set Site Fonts
7. Customize Site Buttons

---

Step by Step Walkthrough

Step 1 - Navigate to Appearance

From the dashboard, select "Site Options", then "Appearance" from the side navigation bar.

Step 2 - Add Site Logo and Favicon

Open the Logo & Favicon section to upload a site logo and favicon. 

• Upload a logo file that is a JPEG, JPG, or PNG file and 3 MB or less.
• The favicon should be 128px x 128px and a PNG or ICO file. The favicon is an icon that will appear in the address bar as a website icon on all browsers helping visitors identify the website when there are multiple tabs open.

Step 3 - Customize Site Header

Header Options

• Header Height: Adjust the header height to control how much vertical space the header will take when viewing the site.
• Site Search: Choose to display the search option on the site (recommended). If disabled, visitors will no longer be able to use search terms or keywords to find items on the platform.

Navigation Bar Options

• Navigation bar: Select the navigation bar background color, text font & color, and text hover color.
• Navigation dropdown: Select the dropdown background color, background hover color, text color, and text hover colors.

Step 4 - Add Site Background

Add an optional background that can be any solid color or can be created by uploading a graphics file.

• Use an image as the background
  • Select "Image" and click "Select File" and follow the instructions to upload a file.
    • Select a background image option (Normal, Full Background, or Tile).
      • For a normal or full background, upload an image that is 2000 pixels wide X 1300 pixels high. Supported images types are JPEG, JPG, or PNG and the file size must be 3MB or less. 
• Set a color as the background
  • Click "Select Color"
    • Choose from a color menu or input the RGB color number.

Step 5 - Adjust Footer Options

The footer appears on every page in the site. The footer displays copyright information, the translation widget, social media icons, and the "powered by" logo and link. 

• Add copyright text
• Add a footer background color and text font and color
• Add a powered by logo and a link if a visitor clicks the logo
• Add social media links for the social icons to display and direct visitors to your social media sites.
  • Be sure to select an icon color for social media icons to contrast well with the footer background color

Step 6 - Set Site Fonts

Keep the default fonts on the site or choose to customize fonts by selecting a default font type, size and color for all headers and paragraph text within the site. Choose from over 1,000 different google web fonts.

Step 7 - Customize Site Buttons

Keep the default button colors and styling or choose to customize them. 

1. Login button: Displays on the login screen for private sites or in the upper right hand corner of the site for public sites
2. Register button: Displays on all sessions or events in directories and on the session detail view when site registration is turned on.
3. Member Application: Displays on the login screen for private sites or in the upper right hand corner of the site for public sites
4. Catalog Application: Displays on the login screen for private sites or in the upper right hand corner of the site for public sites
5. Primary button: Displays as the "Primary" button option when creating manual buttons in a text and graphics section
6. Secondary button: Displays as the "Secondary" button option when creating manual buttons in a text and graphics section

Click "Save" for appearance settings.