Site Settings: Site Appearance
This article will cover:
- Site Logo
- Shortcut Icon (Favicon)
- Site Colors
- Site Background
- Custom CSS
- Custom HTML in HEAD
- Header HTML
- Footer HTML
- Custom Scripts
In the Site Administration area, under Settings, you will find a Site Appearance sub-section. It allows you to customize the site logo and set the color theme. It also lets you add custom HTML and CSS for advanced styling and integrations.
The site logo is the main graphic seen in the top-left of all pages. To ensure it looks sharp on all platforms, please provide a graphic that is at least 560px wide or 200px tall. The logo will be automatically reduced to fit within 280px by 100px for most browsers. Only devices with high resolution Retina / HiDPI displays will see the full version.
Shortcut Icon (Favicon)
A shortcut icon is a square image of at least 200px. It is sometimes referred to as a "Favorites Icon" or "Favicon". A custom image can be provided that will automatically appear inside the browser tab while visiting the site. When the site is bookmarked, this icon is often saved along with the page address.
Keep the icon very simple as it will appear very small in most cases (often shown as 16x16 pixels). A preview of this small size is included in the Site Appearance area after the custom image is uploaded.
Note that when a mobile device allows a website to be added as a shortcut on the device's home screen, this icon will also appear.
The blue color theme shown below is the default for all Recollective sites but it can be modified. Select the Color Theme input to choose a new theme.
Tip: If you have a specific color in mind, you'll need the color's hex value (e.g. #FF000 is red). Once you have it, paste it directly into the Color Theme field
The second Form Accent Color input allows you to choose a secondary color for use on forms. This color will automatically match the Color Theme but you may wish to customize it in some cases. For example, if your theme is red, you might want to use a more neutral Form Accent Color as red is usually reserved for error messages or actions that trigger deletion.
Another reason to use the Form Accent Color is when your theme is grey or black and you wish to have primary action buttons stand out relative to secondary buttons.
The Site Background of your site can also be customized. You can choose a single color, gradient, texture or upload a photo to appear on the site login page.
The settings below are reserved for technically-savvy site administrators as invalid CSS or HTML can block access to your Recollective site entirely, or at least negatively impact usability.
The Custom CSS section is reserved for advanced administrators that would like to apply their own styles to the Recollective application. You do not need to add a style block, only the CSS is required.
Tip: We strongly suggest using your browser's developer tools to preview changes before they are applied to the site. To do so, right-click on the HTML element you would like to modify and select Inspect Element. Locate the class names or element IDs and create style declarations within the developer tool. You'll be able to preview your changes and then copy the final CSS.
Custom HTML in <HEAD>
When integrating Recollective with another site, there may be a need for Recollective to display a shared navigation bar along the top of the page. HTML placed in this field will appear above all other elements on the page for all pages.
Tip: We don't recommend adding a header as it can negatively impact usability on various platforms. Be sure to test all changes at various browser widths and on small mobile devices.
At times, it may be important to add additional links to the site footer such as legal agreements. HTML placed in this field will appear below all other elements on the page on all pages.
Custom HTML in the page footer might also exist to create a consistent look and feel across related sites.
To keep your site secure, the ability to add custom third-party scripts is restricted. If you are looking to run a custom script, contact us for assistance. If you have previously added custom scripts as part of your Site Appearance, you will find that editing these areas is now locked by default with the option to Continue Editing. If you choose to edit anyway, all restricted elements, such as scripts, will be removed when the field is saved. We recommend that you copy the content before editing.