You can make your coursepage a bit more colorful by customizising tabs in Onetopic format. You can customize the tab format by changing the background and font color of the tab buttons, the borders of the buttons, and adding one of the various icons in front of the text.

 

Got to topic which tabs color you want to change. Click three dots and select Edit settings from menu.

 

In the tab settings, there is an option called Tab styles. Clicking on it opens the editing buttons and preview view. Note! Section content background changes the background color of the entire page content.

 

In the image below, the preview view is highlighted with square, showing how the tab will look after changing the settings. Although the preview shows multiple tabs, changing the color settings only affects this tab and its children.

Above the preview view, there are several gray buttons from which you can choose which tab or situation you want to change the settings for. The most useful of these is Set Default. Changes made in Set Default also apply to the child tabs under this tab.

 

 

After clicking Set Default or any of the other buttons on the same row, the Tab styles window will open.

From the first option, Select Icon, you can add one of the available icons in front of the tab text.

 

By clicking the Background box (color), you can choose the background color of the tab button. You can select a color by clicking on the desired spot in the color palette or by entering the desired color's RGB number or HEX code in the text field below the color palette. After selecting the color, click Ok.

 

 

In the Font section, you can customize the font style of the tab button. The first box is for changing the font size, and select px for the second box. The third box allows you to choose the font color, and the last two boxes are for font styles, such as Bold and Italic.

 

Finally, select Set styles and Save changes

 

 

You can find RGB and HEX code for different color using Googles css colour picker.

 

 

Brand colors of JYU in RGB and HEX

If you want to use brand colour of University of Jyväskylä, their RGB and HEX codes are listed here.

 

 RGB: rgb(0,41,87)
 HEX: #002957

 RGB: rgb(237,225,206)
 HEX: #ede1ce

 RGB: rgb(241,86,63)
 HEX: #f1563f

 RGB: rgb(194,154,91)
 HEX: #c29a5b

 RGB: rgb(199,201,200)
 HEX: #c7c9c8