Selecting Custom Color and Typography in Event Editor

Updated March 21, 2022 21:11

As an event admin, if you are using Event Editor, you now have the option to add custom colors and custom typography to your event site.

Creating and Editing a Custom Color Palette

1. Open the Theme Color option ().
2. Scroll to Create Custom Color Palette option following the different standard color palettes. Be sure to click Save & Close when you have chosen a palette.
3. On Step 1, click Next at the top right to begin.
4. On Step 2, the Preview on the right displays a preview of the four colors you can choose shown on a sample page: Navigation Background: This is the color that will be displayed on the navigation menu throughout Schedule Builder. NOTE: The navigation text color will automatically be set to either black or white, depending on what background you choose. Background: This is used for all pages in Schedule Builder. You can set it either under Accent Color or Text Color because those both use the same background. Accent Color: This is used for lobby headings, buttons, and other accent areas throughout the event site (for example, tabs and other UI elements). Text Color: This is used for all the non-heading text throughout the event site.
5. To edit any of the colors, click the color box, which opens a “color picker” that lets you click to select any color.
6. Once you select a color, the text and background are displayed along with a Pass or Fail grade depending on the contrast ratio. This contrast is important for accessibility and ease of reading. Here are a few examples, one with a Pass grade and one with a Fail.
7. When you’re happy with all your color choices, click Next.
8. If you have a Fail contrast ratio, you’ll get a modal asking if you’re sure you want to use that color palette. You can choose to save anyway, or go back and change to a more readable contrast.
9. After you have saved the new palette, you can either: Click Finish and continue working on your pages, or Click Change Typography Now to specify your font.
10. Even though you have now created a custom color palette, your event site will not use these colors until you choose to save the palette. Click Save and Close at the top of the color slideout.
11. When asked if you are sure, select Yes, Apply To All Pages to apply the new palette to your live pages immediately.

Creating and Editing Custom Typography

1. Open the Theme Typography option.
2. Scroll to Create Custom Typography Option following the different standard type choices. Be sure to click Save & Close when you have chosen typography.
3. Choose whether you want to upload your own font or use a Google font, and then select the Save Typography Option button at the top right corner.
3a. To upload a custom font: Select Upload my own font in the first step. Click upload for the Header font family, and select the font file on your computer. Click upload for the Body font family, and select the font file on your computer. Once the second font is uploaded, the preview shows the uploaded fonts. Check the box confirming you own the font. After confirming, click Save Typography Option. Note: The supported file types are WOFF2 (preferred), WOFF, TTF, and EOT.
3b. To use a Google font: Select Use Google fonts in the first step. For your header font, start typing the name of a Google font and then select it from the drop-down list. For your body font, start typing the name of a Google font and then select it from the drop-down list. Once the second font is selected, the preview shows the Google fonts. Click Save Typography Option.
4. Even though you have now chosen a custom font, your event site will not use the font until you choose to save your typography choice. Click Save and Close at the top of the typography slideout.
5. After you have saved the new font, you can either: Click Finish and continue working on your pages, or Click Change Color Palette Now to specify your colors.
6. When asked if you are sure, say Yes to apply the new font to your live pages immediately.

Creating and Editing a Custom Color Palette

Comments

Related articles