Create and use Community themes in power surveys

Create Community themes and set them as active to use in power surveys.

Note:

To create different themes for different surveys, first duplicate an existing community theme (so you don't have to reset the Portals/Discussionssettings), and then edit the Surveys settings only.

Example

You want members and nonmembers to have different brand experiences when they participate in surveys. To achieve this objective, you create two community themes:

  • Community Theme 1 has Surveys settings appropriate for members. You use Community Theme 1 for any surveys you distribute to members.
  • Community Theme 2 has Surveys settings appropriate for nonmembers. You use Community Theme 2 for recruitment surveys intended for nonmembers.
  1. Open the Community app and click Community > Member Experience at the top of the page.
  2. Click Theming.
  3. Copy an existing community theme.
    1. On the left-hand side, click the theme you want to copy.
    2. Click Menu, and select Duplicate.
    Result: The copied theme appears on the left-hand side with the theme name copiedTheme - Copy.
  4. Open the copied theme.
    Warning: Any changes you make to the settings in the Portals/Discussions Header & Navigation area are immediately visible to community members once the theme is set to active, even if you are distributing a survey to nonmembers.
  5. In the Theme Name field, enter a new name for the theme.
  6. Edit the settings in the Surveys area.
    1. Upload a Desktop Header image.

      The desktop header is visible to survey participants using desktop computers, and appears in the topmost area of survey pages. Follow these guidelines when you are creating the header image.

      Header
      • Supported file type: JPG, PNG, and GIF
      • Maximum file size: 2 MB
      • Header images are aligned with the left edge of your question content area.
      • Recommended width: 987 pixels. An image with a width of 987 pixels will stretch from the left edge to the right edge of the content area.
      • Recommended height: 100 pixels
      1. Click Upload File.

        If your are replacing an existing header image, click the red X next to the image name.

      2. Click Browse, select your image, and click Open.
      3. In the Alternative Text (required) field, type a description of the image that can be understood by text-only readers.
      4. Click Add.
      5. To remove an image, click the red x beside the file name.
    2. Select options for these settings:
      • Page Background Color
      • Question Font
      • Answer Font
      • Footer Font
      • Header Background Color
      • Content Background Color
      • Question Font Color
      • Answer Font Color
      • Footer Font Color

      For more information about the different theme elements, see Community themes.

      Note: You can override the default Question Font settings using the Editing toolbar.
    3. Upload a Footer Logo image.

      The footer logo is visible to survey participants using desktop computers, and appears in the bottom right area of survey pages. Follow these guidelines when you are creating the logo image.

      Logo
      • Supported file type: JPG, PNG, and GIF
      • Maximum file size: 2 MB
      • Recommended width: 180 pixels
      • Recommended height: 30 pixels
      1. Click Upload File.

        If your are replacing an existing header image, click the red X next to the image name.

      2. Click Browse, select your image, and click Open.
      3. In the Alternative Text (required) field, type a description of the image that can be understood by text-only readers.
      4. Click Add.
      5. To remove an image, click the red x beside the file name.
    4. Select or clear Show Footer Text.
    5. Edit the Footer Text.
      The maximum number of characters for footer text is 512.
  7. Edit the settings in the Surveys Mobile area.
    1. Upload a Mobile Header.
      The mobile header is visible to survey participants using mobile devices, and appears in the topmost area of survey pages. Follow these guidelines when you are creating the mobile header image.
      Mobile Header
      • Supported file type: JPG, PNG, and GIF
      • Recommended height: 100 pixels
      • Recommended width: 640 pixels

      • Maximum size: 2 MB

      1. Click Upload File.

        If your are replacing an existing header image, click the red X next to the image name.

      2. Click Browse, select your image, and click Open.
      3. In the Alternative Text field, type a description of the image that can be understood by text-only readers.
      4. Click Add.
      5. To remove an image, click the red x beside the file name.
    2. Select options for these settings:
      • Header Background Color
        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.
      • Page Background Color
      • Question Font Color
      • Answer Font
      • Help Background Color
      • Help Font Color

      For more information about the different theme elements, see Community themes.

  8. Optional: Click Publish to save changes to a theme, or to make changes to an active theme live.
  9. Optional: To close the theme editor without saving changes, click Undo Changes, and then click Undo Changes again when prompted for confirmation.
  10. Preview the new survey theme by doing one of the following:
    Tip: Open the Activities page in a new browser tab so you can make adjustments to your survey theme while you preview. However, you cannot preview two versions of the same theme at the same time.
  11. Set the theme as active for the community.

    Only the Active Theme is visible to power survey participants, even if you select a different theme when creating the distribution email.

    1. On the left-hand side, select the inactive theme.
    2. Click the options menu, and select Set as Active Theme.
    3. Click Set as Active Theme when prompted for confirmation.
    Result: The newly active theme is now the Community theme members see when they view power surveys for this community. In the theme editor, the theme appears with an Active label above its name.
Create an invitation or Create a new activity link to apply your Community themes.
Note: If you edit a theme in a live survey, only the participants who have yet to start the survey will see the changes.