Skip to main content

Community themes

Lisa Wong
Updated

The community theme determines the appearance of the community's signup page, surveys, and forums in desktop and mobile view.

Refer to this topic as you create a new community theme with the theme editor open. The sections in this topic correspond to the headings in the theme editor.

To access the theme editor, click the App Drawer and select Theming.

Discussions Header & Navigation

Forum (desktop view):

  • The header image does not adjust to the size of the member's browser window. If the member's browser window is less than 1615 pixels wide, the right side of the header will appear cut off. When designing your header put any branding on the left side.

  • Pick a Header Background color that matches the header image's background color.

    That way, if members are viewing the forum on a screen wider than your header image, the header will still appear contiguous.

  • Alternately, use header images with a transparent background.
  • For more information about images, see Community theme image specifications.
  • Transparency settings for Header Background and Navigation Bar are not reflected in forums.
  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.

Forum (mobile view):

  • Other header and navigation elements for mobile forums are set under Discussions (Mobile Only).

Discussions Body

Forum (desktop view):

  • Dark text against a light background is more readable.
  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.
    Note: The appearance of these forum elements does not change regardless of your theme settings:

    • The moderator label in moderator posts

    • The forum toolbar

Forum (mobile view):

  • Dark text against a light background is more readable.
  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.

Sign Up Page

Sign Up page (desktop view):

Sign Up page (mobile view):

Some theming elements in the Portals/Discussions Header & Navigation and Portals/Discussions Body sections also control the appearance of the Sign Up page:
  • Header Image
  • Mobile Header Image
  • Header Background
  • Dividers and Outlines
  • Body Font
  • Body Font Color
  • Link Color
  • Content Box Color
  • Title Font
  • Title Font Color

Discussions (Mobile Only)

Forum (mobile view):

  • The header image doesn't extend across the entire header. For best results, match the background colors of the header and header image.
  • Alternately, use a transparent image and choose a background color that reflects your branding.
  • For more information about images, see Community theme image specifications.

Portals/Discussions Footer

Forum (desktop view):

  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.
  • The footer looks the same in desktop and mobile view. However, in mobile view, footer links and logos may be stacked instead of being displayed straight across the screen to account for the smaller screen display.

Surveys (Header, Body, Footer)

Classic surveys

Survey (desktop view):

  • The desktop header does not adjust to the size of the member's browser window. If the member's browser window is less than 987 pixels wide, the right side of the desktop header will appear cut off. When designing your desktop header put any branding on the left side.
  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.
  • Pick a color that matches the header image background. That way, if members are viewing the survey on a screen wider than your header image, the header will still appear contiguous.
  • Alternately, use a transparent image and choose a background color that reflects your branding.
  • For more information about images, see Community theme image specifications.
  • The footer looks different in mobile view. In mobile view, the links and footer text are inside a menu and the footer logo is not displayed.
  • The maximum number of characters for footer text is 512.

Modern surveys

How modern survey theming works

  • You can think of the modern survey theme as a series of overlapping layers:
    • A white background is the default.
    • If you set a page background image, it will appear on top of the white background.
    • If you set a page background color and opacity, the color will appear on top of the page background image like a tinted overlay.
      Note: For the page background image to appear, the page background color must have enough transparency. For example, setting Page Background Color to rgba(255,255,255,0.21) creates a subtle white overlay that allows the image to show through.
    • The header, question container, and footer form the topmost layer.
  • In modern surveys, one survey view is available to all participants (desktop, mobile, and tablet). The survey page expands or shrinks to fill the participant's device screen. There is no distinction between desktop and mobile.

Header images and background colors in modern surveys

  • The same header image appears across all devices and screen sizes.
    • Recommended height: 100 pixels.
    • Recommended width: 400 pixels
    • Larger images are resized to 100 pixels height and the aspect ratio of the width is maintained.
    • If you are experiencing image blurriness, try doubling the recommended height and width in pixels.
  • For the background of your header image, solid colors work better than gradients.
  • Consider using an emblem or image as a logo instead of something that features words. Once resized, the words in header images may not appear as crisp and may become blurry.
  • The header does not adjust to the size of the participant's screen.
  • Classic surveys use a wider header image than modern surveys. To avoid unintentionally cropping the header image when you transition from classic surveys to modern surveys, try:
    • Using a narrower header image.
    • Experimenting with Header Alignment options.
    • Left-aligning the visual elements within the image.
  • Pick a Header Background Color that matches the header image's background color. If members are viewing the survey on a screen wider than your header image, the header will still appear contiguous.
  • Alternately, use header images with a transparent background.

Other considerations for modern surveys

  • Question Container Background Color affects the question container background, navigation buttons background, and pop-up background.
  • For the Page Background Image, follow these guidelines:
    • Maximum file size: 2 MB
    • Recommended width: 1920 pixels
    • Recommended height: 1080 pixels
  • In modern surveys, Text Color affects question and answer text. It also affects the answer border, navigation buttons (for example, the forward and back buttons in carousel Grid questions), and slider components.
  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.
  • The maximum number of characters for footer text is 512.

Non-configurable survey elements in modern surveys

The following survey elements are not affected by theming:
  • Answer background color
  • Dropdown menu background and text color
  • Error message text and background color
  • Rating question answer color
  • Date question calendar dropdown color
  • Appointment Booking question Calendly plugin color
  • Highlighter question instruction overlay color
  • Usability Task question (website): "Complete the task and return" message background color
  • Usability Task question (Figma): Prototype background color
  • Recording action: Success message background and text color

Surveys (Classic) Mobile

Classic survey (mobile view):

  • The following fonts are available:
    • Arial
    • Georgia
    • Hand of Sean
    • Helvetica
    • Montserrat
    • Open Sans
    • Raleway
    • Roboto
    • Times New Roman
    • Verdana
    Note: If the community locale is set to an Asian language, the only available font options are Serif and Sans-Serif.
  • Pick a color that matches the header image background. That way, if members are viewing the survey on a screen wider than your header image, the header will still appear contiguous.
  • Alternately, use a transparent image and choose a background color that reflects your branding.
  • For more information about images, see Community theme image specifications.
  • Show Footer Text and Footer Text are set under Surveys.
  • The maximum number of characters for footer text is 512.

Mobile modern surveys use the page and theming elements under Surveys. For more information, refer to the Surveys (Header, Body, Footer) section above.

Email Branding

Some Surveys (Classic) Mobile theme elements also control the branding and appearance of emails sent to members.

Email invitation (desktop view):

  • The Mobile Header image appears in a banner that is 600 pixels wide, at the top of the email. The image is aligned to the left and resized if it exceeds 640 pixels in width.
  • For more information about editing the email footer, see Edit the default email footer.
  • The Header Background Color controls the background color of the banner, at the top of the email.
    Tip: Pick a color that matches the header image background. That way, if members are viewing the survey on a screen wider than your header image, the header will still appear contiguous.
  • Alternately, use a transparent image and choose a background color that reflects your branding.
  • For more information about images, see Community theme image specifications.
  • The Question Font controls the font used in the email body.

Related articles

Powered by Zendesk