The community theme determines the appearance of the
community's portal, login and
signup pages, and activities, 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 open the theme editor, Open the
Community app and click
Community > Member
Experience at the top of the page and then click
Theming.
Portals/Discussions
Page and theming elements
Notes, tips, and considerations
Portal sign-in page (desktop view):
The header image does not
adjust to the size of the member's browser window. If a member's browser window
is less than 1280 pixels wide, the right side of the header image will appear
cut off. When designing your header image 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 portal or forum on
a screen wider than your header image, the header will still appear contiguous.
Alternately, use
header images with a transparent background.
The header image does not
adjust to the size of the member's browser window. If the member's mobile
screen is less than 750 pixels wide, the right side of the header image will
appear cut off. On the smallest mobile screens, members will only see 270
pixels of the header image. When designing your header image 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 portal or forum on
a screen wider than your header image, the header will still appear contiguous.
Alternately, use
header images with a transparent background.
The header image does not
adjust to the size of the member's browser window. If a member's browser window
is less than 1280 pixels wide, the right side of the header image will appear
cut off. When designing your header image 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 portal or forum on
a screen wider than your header image, the header will still appear contiguous.
Alternately, use
header images with a transparent background.
Pick high-contrast colors for
Navigation Bar,
Navigation Bar Font Color, and
Navigation Bar Rollover.
Dark text against a light background is more readable.
Members also need to be able to easily tell a navigation bar control is active
when they hover over it.
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.
Portal homepage (mobile view):
The header image does not
adjust to the size of the member's browser window. If the member's mobile
screen is less than 750 pixels wide, the right side of the header image will
appear cut off. On the smallest mobile screens, members will only see 270
pixels of the header image. When designing your header image 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 portal or forum on
a screen wider than your header image, the header will still appear contiguous.
Alternately, use
header images with a transparent background.
Navigation Bar
Rollover and
Navigation Bar Font are visible when
the navigation menu is expanded.
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 (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
portal or
forum on a screen wider than your header image, the
header will still appear contiguous.
Alternately, use
header images with a transparent background.
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.
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.
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.
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.
The header,
question container, and footer form the topmost layer.
In modern view,
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
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. To avoid unintentionally
cropping the header image on smaller screens, 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
Question Font background.
Other considerations
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
Text
Color affects question, instruction,
"required," pop-up, and answer text. It also affects the
answer border and navigation buttons border.
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.
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.
Mobile surveys in modern view
use the page and theming elements under
Surveys. For more information, refer to the
Modern Surveys table.
Email Branding
Some
Surveys Mobile theme elements also control the
branding and appearance of emails sent to members.
Page and theming elements
Notes, tips, and considerations
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.
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.
