1. Digication Help Desk
  2. Student Guide (Kora)
  3. Style and customization

Customize module background color or image

Avatar
Shanika Wickramasinghe
Follow

Version: Kora Courses, February 28, 2023 or later

Permissions required: Student

Customizing the background color or image of modules can bring more depth to your ePortfolio design. The tools for customizing the module background are found in the Style editing menu for the module you have selected.

NOTE:
Consider accessibility as an essential aspect when selecting colors or images for your module background. For example using colors that offer strong contrast, like dark text on a light background or vice versa, gives more clarity and visibility. Be cautious with background images that are too busy, as they can make the text difficult to read. It's important to maintain a design that keeps the text easily accessible to all Digication users.

  • If you would like to add a background image or color to a module: select the module you would like to customize and then select the Settings icon (1) to access the module style settings (2).

0604-1.png

0604-2.png

  • You have several options to customize your background image or color. Select a color (3) option for your background from the color palette or you can customize further by entering a hex code (4). 

For more information about hex codes, please see the resource: https://htmlcolorcodes.com/

0604-3.png

  • In addition to selecting a color for your background, you can also change the opacity(5) of the color to fit your needs. Adjusting the opacity to less than 100% will allow the background color or image of the section content background behind the module to show through.

0604-4.png

 Adding a background image

  • If you would prefer to have an image as your background you can Select an Image (1) of your choice as your module background. 
  • You also have the option to make it Fixed and/or Repeat (2). When a background image is Fixed the image will remain in a fixed location within the module. When a background image is set to repeat, the image will repeat to fit the entire space of the module. The repeat may create a tile-like pattern.  
  • Beyond selecting an image for your background you can also change the opacity (3) of the image. Adjusting the opacity to less than 100% will allow the background color or image of the section content background behind the module to show through.

0604-5.png

  • To disable the 'Fixed' option (4), click and slide the toggle to the left.

0604-6.png

  • To enable the ‘Repeat’ option, click and slide the toggle to the right (5).

0604-7.png

Adjusting module padding

  • In addition to customizing the background color or image you also have the option to adjust Padding (1) in any Rich Text modules. 
  • The padding creates space between the top and side edges of a module and the text content. 30-40 pixels of padding is recommended to add more space and increase the readability of the text content on your ePortfolio page.

Padding set to 70 pixels (2).

0604-8.png

Padding set to 10 pixels (3).

0604-9.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.