Using the Theme Editor

Primary administrators have access to the theme editor from the admin menu.  Here you can add or edit web and mobile logos and the background image for your login page, as well as set your theme colors. You will need to submit 3 images with your New Client Setup Form. The specs are below.

‍

Specifications for Logos & Background Images

Header Logo Image:  This is the main logo that is applied to every page in your community. It is seen in the top left of each page when viewed on desktop and some tablets.

Specifications
Shape: Rectangular
Orientation: Landscape orientation
File format: png (So transparency can be present)
Aspect ratio: 250:87  (minimum resolution: 256 X 30)

‍

Header Mobile Logo:  When users are viewing community pages from a mobile or tablet device, the square mobile logo is shown instead of the header logo image. This logo generally fits in 2-3 letters or a square or round symbol or logo representing your organization.

Specifications
Shape: Square
File format: png (So transparency can be present)
Aspect ratio: 1:1 (minimum resolution: 48 X 48)

‍

Login Background Image:  This is the background image on your community landing page. If there are faces, it is best if they are on the right side, as the login page content will be overlaid on the left.

Specifications
Shape: Rectangular
Orientation: landscape orientation
File format: png or jpg
Resolution: 1280x720 pixels and above

‍

Customizing Your Colors in the Theme Editor

Each customizable element is listed within the left hand panel, with a real time preview of your home page to the right; so you can see what your changes look like when applied to your community.  For the assignment of colors to certain objects, labels, and design elements; we use the 6 digit 'hexadecimal' code system.  You can click on the color rectangle to display a rainbow array to choose your color code by eye, or simply type in the 6 digit corresponding color code.  If you only know the RGB code, this can be converted easily using a Google search.

Once you are satisfied with any design updates, be sure to hit the "Save and Publish" button.  Updates in the theme editor take immediate effect once saved.

As we build our new theme editor for Monarch, there are some anomalies with the theme editor. The current status as of Summer 2022 for each element is described below. Please email support@360Alumni.com for help modifying your theme.

Theme Editor Color Controls

1. Header Background Color: Despite the name and preview, this actually controls the color of some of the header texts.
2. General: Body Text: Not currently applied consistently. Use #5c5c5c for best results
3. General: Page Background: Provides a background color for all pages throughout the site
4. Main Menu: Text: This controls the background color of the nav menus. Preview is not available so you must Save & Publish to see changes
5. Main Menu: Hover Text: Not currently used
6. Main Menu: Background: Not currently used‍
7. Main Menu Hover Background: Not currently used
8. Main Menu: Dropdown Border: Not currently used
9. Buttons: Background: Controls the color of buttons throughout the site
10. Buttons: Background Hover: Controls the color of buttons when you hover on them
11. Links: Text Color: Sets color for all links throughout the site, including links in footer
12. Links: Text hover: Sets hover color for all links throughout the site
13. Blocks: Block Border Color: Sets color for border of content blocks throughout site
14. Blocks: Block Title: Sets color of title above content blocks (this color is overridden by Links: Text Color and Hover if the block title is a link)

*Note: you can not currently modify the color of the footer. This will be customizable with Monarch.

Make Your Alumni Network Part of Daily Life:

• Why Donations of Time Are a Path to Giving
• Breaking Down Silos in Alumni Organizations
• Measuring the Value of an Alumni Community