Site Settings: Site Appearance

This article will cover:

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.

Site Logo

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.

Site Colors

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.

Site Background

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.

Custom CSS

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>

Integration of custom JavaScript functions, or the inclusion of additional metadata, requires HTML to be placed between the HEAD tags which come before the BODY tags. This area is for HTML to be inserted between those HEAD tags.

Header HTML

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.

Footer HTML

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.

Custom Scripts

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.

🗣️ Still have questions? Contact us or leave us some feedback on how we can do better!
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles