Style
-
Style
The Styles menu is where the images, colors and template of the community are set.
Click System> Styles
The list of themes created for the community will appear. The default theme will have the check box selected. The highlighted theme will be the one that is currently displayed.
To create a new theme, click +Add.
Users will be redirected to Styles: Create New Theme page.
Enter the Main theme colour in the *Main Theme Colour field. Enter a Hex colour code (#XXXXXX), or click in the field to choose the color from the colour picker. The Main Theme Colour is the colour displayed on the carousel on the login page if the carousel template is selected. It is also displayed on the admin side of the platform where the menu is located, and is the colour for the banners on the home page (Profile Surveys, My Survey Invitations), the colored banners in surveys where the questions appear, the links throughout the community, and is the highlight colour in the profile dropdown on the user side.
Enter the buttons colour in the *Buttons Colour field. Enter a Hex colour code (#XXXXXX), or click in the field to choose the color from the colour picker. This color will be the buttons colour for all buttons in the community.
Enter the header colour in the *Header Colour field. Enter a Hex colour code (#XXXXXX), or click in the field to choose the color from the colour picker. This color will be the color of the header for the whole community.
Enter the footer colour in the *Footer Colour field. Enter a Hex colour code (#XXXXXX), or click in the field to choose the color from the colour picker. This color will be the color of the footer for the whole community.
Choose the main logo for the community by clicking in the *Main Logo field. This will appear on the login page. The Image Uploader will open. Choose an image already uploaded into the community, or one from the computer. To upload a new image, click on Click to upload a file. A window will open to select a file from the computer. Once the appropriate image is found, click open. The image will appear in the uploader. Once the image is in the uploader, click to select it (a black box will appear around the image) and then click Insert.
Choose the user-side logo for the community by clicking in the *User-Side Logo field. This will appear on the user-side and will allow community members to go back to the main home page if clicked. The Image Uploader will open. Choose an image already uploaded into the community, or one from the computer. To upload a new image, click on Click to upload a file. A window will open to select a file from the computer. Once the appropriate image is found, click open. The image will appear in the uploader. Once the image is uploaded, click to select it (a black box will appear around the image) and then click Insert.
Choose an image for the background of the login page by clicking in the *Background field. The Image Uploader will open. Choose an image already uploaded into the community, or one from the computer. To upload a new image, click on Click to upload a file. A window will open to select a file from the computer. Once the appropriate image is found, click open. The image will appear in the uploader. Once the image is uploaded, click to select it (a black box will appear around the image) and then click Insert.
Choose an image for the favicon by clicking in the *Favicon field. The Image Uploader will open. Choose an image already uploaded into the community, or one from the computer. To upload a new image, click on Click to upload a file. A window will open to select a file from the computer. Once the appropriate image is found, click open. The image will appear in the uploader. Once the image is uploaded, click to select it (a black box will appear around the image) and then click Insert.
Choose the login template for the community. Click on the *Login Template field. Three options will appear:
-
Carousel- an area will appear beside the login box on the login page, where images and text can cycle through. Create as many information pages to cycle through as desired. The main theme color will display as the background for the carousel. For example:
-
Background- The carousel is removed and the login page only contains the login box. The background can cycle through up to ten images. For example:
-
Banners- the login page displays a series on horizontal banners, which can each contain unique info (text, images).
The *User Navigation Type field is where the layout for the home page is selected. There are two options:
-
Default
-
Hamburger- Style Menu
The Start and End Dates fields allow the programming of date ranges for specific themes to be shown. Enter the date range for the theme to be shown in the community. Once those dates pass, the theme will revert back to the default theme (click on the default check box beside the theme to set it as default).
Once all the appropriate selections are made, click save.
Themes that are already created can be edited. To edit a theme, click on the button in the edit column. It will redirect the user to the initial editing page. For example:
Edit the appropriate field to reflect the changes desired.
To update images for the theme, click on Update Images. A window will pop up where users can update the images for User Logo, Main Logo, Favicon, and Backgrounds.
Click on the field where an edit is desired. The image uploader will appear where users can select an image from an already uploaded choice, or one from the computer. Once the images are all correct, click save.
When the Background template is selected (as is in this example), there can be up to 10 images selected to cycle through. If more images are to be added, click on “here” where it says Click here to edit background images for this theme.
The Styles: Login Backgrounds- Theme X page will appear.
If more or new images are desired, click on the field below the words Click below to select an image. This will open the image editor where an image can be selected that is already uploaded, or chosen from the computer. Choose one from the list, or click on Click to upload a file to select one from the computer. Once the image is selected, click Insert.
Once all the images are added, click Save Background Images.
If wanting to preview the template, click Preview Theme X.
Once everything is complete, click Save on the main Styles: Update Themes page.