You created a course, maybe even filled it with content already. Now it’s time customize it to you likings Let’s add some colour and play around with the styling. 

*We recommend to use Google Chrome to ensure an optimal experience when using AppicalNow.

Step 1. Navigate to courses in the menu

Step 2. Click on the gear-icon in the top right corner of the course that you want to style and select ‘Styling’.

Step 3. Style, style, style!
Scroll through the Course Styling page and fill in all the colour-boxes according to your corporate style colours. Let your brand identity shine! 

  • Corporate Style Colors  
    To set a specific colour, you will need web colour codes (HEX codes) from your corporate style. These colour codes can contain all values between # 000000 and #FFFFFF.
    If you don't know the HEX codes but do know the RGB numbers, you can convert the HEX codes on this website: http://www.rgbtohex.net/
  • Fonts
    Choose the font in the app that matches your corporate style.
  • Mobile Stylesheet
    Don't forget to fill in the colours for the mobile app display! It'll ensure the mobile version of the app speaks your brand language as well. 

Choose the 4 leading brand colours for the following elements: Main Color, Support Color, Support Color for Text, Status Bar color for Android. 

  1. Main Color: the main colour for your app and desktop version. It will be the most visible colour, used for the biggest and most significant page elements. So most fittingly, it would be best to choose your brand’s leading colour. Elements with this color: Navigation bar, Start button in story cards and chapter cards, Navigation buttons in pages 
  2. Support Color: this is the secondary colour. It will be used for smaller elements such as buttons, icons or selected items. Here you should use your brands’ 2nd colour or a nice contradiction to the main one. Elements with this color: first day countdown, story progress, chapter progress and pages progress.
  3. Support Color for Text: this colour should be thought of as a ‘highlight’ colour, since we use it for elements that need to be, well, highlighted, mostly for text parts. The Support color text should be very visible against a white background. Elements with this color: general progress bar in Dashboard. We don’t recommend using white as a contrast text color. It will not display well against light-coloured backgrounds. 
  4. Status Bar color for Android: this is just for android phones.
  1. Main Color: top bar 
  2. Support Color: highlighting the selection 
  3. Support Color for Text: progress bar
  4. Background Color: the background color is changed automatically according to your chosen Main Color and can not be changed manually.

  1. Main Color: start button
  2. Support Color: progress bar
  3. Background Color: the background color is changed automatically according to your chosen Main Color and can not be changed manually.

Amazing! you now know how to style your courses!  

Did this answer your question?