When designing your interactive content campaign, you can customize it by including a color scheme. This combination is made up of:
- Primary color: it is the predominant color of the campaign, which will be used as the main color. It is applied to buttons, selectors, and titles.
- Secondary color: it is the background color of the main container of each page of the campaign. In addition, it is possible to apply semi-transparency.
- Background color: it is the background color of the page (if no background image is included). It is applied to the texts of the buttons and the answer selectors (when the participant passes over the answer options, it changes to the background color).
- Font color: it is the color of the non-title texts.
Below, we detail to which specific elements of the campaign each type of color applies, in the different campaign pages.
To define the color scheme of your campaign, go to the 'Design' section of the campaign editor.
2. Color scheme for each campaign page.
2.1. Landing page.
2.1.1. Primary color.
- Background and border color of buttons when static: 'PARTICIPATE', 'VIEW ENTRIES'...
- Button text and icons inside focused buttons (when hovering or selecting the button).
- Color of the 'View Terms and Conditions' link.
In addition, it applies to:
- The header of the campaign registration modal window, which the participant views when anonymous and/or social registration, has been configured.
- Button to 'CLOSE' the legal bases.
2.1.2. Secondary color.
- General campaign container, where the title, description, and landing buttons are included.
In addition, as we have already mentioned in the introduction of this tutorial, you can apply semi-transparency to the secondary color. To do so, just click on the 'Secondary color' field, where you have typed the color code you want. A color selector will be displayed and to the right of it two bars. The right one determines the level of transparency you want to give to the secondary color.
2.1.3. Background color.
- Page background. It covers the entire background. If you do not include a background image, you can apply a plain background color.
- Button text and icons inside the buttons when static.
- Background of buttons when in focus.
2.1.4. Text color.
- Title and description text.
This also applies to:
- Text of the legal terms and conditions.
- The colors of the campaign description text and the legal bases can be customized from the text editor where they are included.
Below, we show you an example, which is the color that affects each element of the landing page.
Registration modal window
Terms and Conditions modal window
Although for an optimal color scheme, we recommend using a primary and text color that stand out from the secondary and background (subdued) colors, the customization of the design allows other combinations and configurations, such as the ones shown below.
1) Achromatic color scheme (grayscale)
2) Apply transparency to the secondary color
3) Add a background image
4) Add a background image and apply semi-transparency to the secondary color.
2.2. Entry form.
2.2.1. Primary color.
- The background color of action buttons ('Previous' and 'Next') when static
- Badges or answer buttons when in focus or selected
- Text of answer buttons when static
- The number of quiz questions (step buttons)
- The number of questions buttons when the user has already answered the question
2.2.2. Secondary color.
- General container of the participation form
2.2.3. Background color.
- The background color of the static badges or answer buttons
- Action buttons ('Previous' and 'Next') when in focus
- Text of idle action buttons
- Text of the answer buttons when in focus or selected
2.2.4. Text color.
- Quiz question text
2.2.5. Other colors.
The colors of the failure message in a quiz, of the feedback message after answering a question, and of the answer selection input are fixed.
The color of the feedback can be changed by CSS with the help of the tutorial on How to change the colors of the feedback message and answer message of a quiz by CSS.
To change the color of failure messages in quizzes and of the answer selection input, you must request it to firstname.lastname@example.org, indicating the #RGB of the desired color.
1) Single answer multiple choice
2) Star rating answer
3) Numerical rating answer
3) The participant uploads a video
5) Questions background image
6) Matrix questions
7) Sports game forecast
2.3.1. Primary color.
- The background color of the game action buttons ('Previous' and 'Next') when static.
- The background color of the 'Play again' and 'Continue' buttons
- The background color of the boxes indicates the remaining time, hits, and lives
- Text of the total points scored in the scoring modal window
2.3.2. Secondary color.
- The base color of the game
- The background color of the scoring modal window
2.3.3. Background color.
- Text of the boxes indicating the remaining time, hits, and lives of the game screen
- Text of the 'Play again' and 'Continue' buttons
2.3.4. Text color.
- Texts of the breakdown of points obtained in the scoring modal window
Below, we show you examples of how color affects the game page elements of different gamification mechanics.
1) Matching Cards / Memory Cards game
2) Hangman game
3) Scoring modal window
2.4. Data form.
2.4.1. Secondary color.
- Form container
2.4.2. Text color.
- The text (optional) that you include as a form header.
The text color can be customized from the text editor where it is included.
The rest of the colors that appear are fixed, as we show below with an example.
2.5. Page after participation.
2.5.1. Primary color.
- The background color of the header, where the message 'Thank you very for participating!' is displayed by default.
- The background color of the 'SHARE' button.
- In points-based campaigns, the text indicates the score obtained.
2.5.2. Secondary color.
- The container where the content of the final screen is displayed.
2.5.3. Background color.
- Text of the message 'Thank you for participating!'
- Text of the 'SHARE' button
2.5.4. Text color.
- The text you include in the final screen
- The color of the text on the page after participating can be customized from the text editor where it is included.
An example is shown below.
2.6. Winner page.
2.6.1. Primary Color.
- The background color of the header, where the winner's page icon is displayed
- The background color of the sweepstakes date module
- The name of the winners and alternates
- The background color of the 'TERMS AND CONDITIONS' button
2.6.2. Secondary color.
- Winners page container.
2.6.3. Background color.
- Text with the date of the sweepstakes.
- Container color with the name of winners and reservations.
The notice certifying the random drawing with Cool Tabs and based on the criteria established by the promotion administrator, as well as the icon on the winners' page, are shown by default with fixed colors.
An example is shown below.
3. Other specifications.
If you have any doubts or want to make any other color changes, please contact us at email@example.com.
For more advanced customization, see the tutorial on How to configure custom CSS for your campaign. You will find detailed CSS rules to apply to your campaign and move elements around or hide them, include new ones or completely change the graphic line of the campaign.
4. Related content.