The Themes page in the Appearance section is a place to change the colors and fonts on the website and app. Admin and Moderators can access this page in the admin portal of a website by opening Appearance>Themes.
Each field in Themes allows moderators and admins to place a color code, which are commonly acquired from a branding banner using color picker tools with applications such as Photoshop or GIMP. This method is recommended because it's quick and eliminates any guesswork in picking the right colors to fit your event's theme.
If you prefer the guesswork, or have a keen eye for color, you can also click into a field and choose a color and shade from the palette window:
Most of the fields in Themes will allow you to choose a color for a particular object on the site and/or app, and are separated into section-categories.
Note: any fields indicated by a monitor icon in admin will only affect the desktop website (see the example below).
Categories, fields, and their function on a Zerista website and app
COPY THEME SETTINGS FROM ANOTHER CONFERENCE - copy the theme from another event within the same parent-event group; select the conference in the drop down list and press Copy.
Theme:
Desktop Theme - the title of the theme for the event; serves no purpose on the front end; automatically set to "default," but it's customizable.
Typography:
The font on the website, and only the website; fonts cannot be changed on mobile apps.
Google Fonts - changes the font of the entire site; only Open Sans and Roboto are effective; the default settings are in the image below.
Main Nav Font - changes the font of the main navigation bar (see below.
Title Font - changes the font of titles on the main body of each page of the website (see below).
Title Font Weight - changes the thickness of the title font.
Text Transform - choose how text transforms in one of four different ways from this dropdown.
Paragraph Font - changes the font of all other text in the body of each page of the website.
Body:
Primary Color - changes the colors of various buttons, highlights, font, and objects on the website and app (see below).
Background Color - Changes the background of the website below the top banner to the specified color.
Link Color - Changes the color of all links on body of each page of the website.
Link Hover Color - Changes the color of all links when the cursor hovers over.
Icons:
Color - Changes color of icons on the app and website.
Main Nav:
Background Color - changes the background color of the main navigation bar
Full Width - when toggled to true, the navigation bar fills the full width of the web page.
Text Transform - changes the way the text transforms from uppercase to lowercase or capitalized lettering.
Font-Size - changes the font size of the text in the main navigation bar.
Font Weight - changes font thickness.
Icons Color - changes the colors of the navigation bar icons on the mobile app (see below).
Icons Active Color - changes the color of the icon of the active page of the app (see how the house icon is a brighter white in the above example?).
Labels Color - changes the colors of the text in the navigation bars of both the website and mobile app.
Labels Hover Color - changes the color of the text when the cursor hovers over the main navigation bar of the website.
Labels Hover Background Color - changes the background color of the navigation "buttons" on the website, when the cursor hovers over, for a highlighting effect.
Labels Active Color - changes the color of the text in the navigation bar of the website for active menus.
Labels Active Background Color - changes the color of the background in the main navigation bar when a menu item is selected and active.
Mobile Accent Bar Color - changes the color of the accent bar on the app.
Accent Bar Inactive - changes the color of the accent bar for inactive menus (website only).
Accent Bar Hover - changes the color of the accent bar when the cursor hovers over the menu item (website only).
Desktop Accent Bar Color - changes the color of the accent bar for active menus on the website.
Border Radius - changes the size of the border around the main navigation bar on the website; higher values will make the nav bar appear rounded, while lower values will give it sharper edges.
Sub Nav:
Color - changes the color of sub menu links on the website.
Font Size - changes the font size of the sub menu links.
Background Color - no apparent effect.
Active Color - no apparent effect.
Active Background Color - changes the color of active sub menu links.
Top Bar: website only!
Background Color - changes the background.
Label Color - changes the color of the text.
Border Color - changes the color of the border.
Dropdown Triangle - changes the color of the dropdown triangle next to "Hi, <User>".
Banner: website only!
Background Color - changes the color of the of the background surrounding banner.
Border Radius - changes the width of border around the banner; determines roundness/sharpness of the banner's corners.
Card: Ui and sidebar sections -- website only!
Background Color - changes the background color.
Border Color - changes the color of the border around cards.
Border Radius - changes the width of the border around each card; determines roundness/sharpness of corners.
Shadow - affects the border shadow around the edge of cards.
Email: theme settings for email templates (Engage > Templates).
Background Color - changes background color of the email template.
Buttons Background Color - changes color of the Accept Invitation button and others.
Buttons Color - changes color of the text inside the Accept Invitation button and others.
Links Color - changes the color of links inside the email template.
Messages: theme settings for system message pop ups
Success Background Color - Changes the color of success messages received in the app and website.
Warning Background Color - Changes color of warning messages in the app and website.
Error Background Color - Changes the color of error messages in the app and website.
Custom CSS:
Custom Overrides - Allows admins to add custom CSS to make further adjustments to the theme of the website.
Please reach out to your project manager with additional questions. We recommend making minimal changes to the theming options and only using 2-4 main colors that fit with the overall event branding.