Theming

Applying different brands to Bero implementations

Project brand

• Project name

• Project logotype and versions

  • White/light backgrounds

  • Dark backgrounds

• App web domain

Images

In order to override images for different instances of Bero, the front end requires images to be in the same format in both core & the new instance (e.g. .pngs in Bero need to be .pngs in JID; .svgs in Bero need to be .svgs in JID).

For that reason, it's a lot easier for designers to provide ALL custom assets in SVG format only (Gs are much easier to convert to other formats than the other way around).

Note: this list gets updated manually. For a more complete reference, image assets are found in the src/img/ folder in the repo (latest branch at writing).

All images can be overridden, though we recommend overriding only the .png files, with a few exceptions (sted at the top). Last updated 21 July 2021

• Site logo site_logo.svg

• App icon for mobile home screen

• Favicon favicon.ico & favicon.svg

• Loading Screen canoe-loading.svg

• Login Screen login_image.svg

• Homepage Banner

• Logos on the login screen, & settings page

• Site Error error.png

• Exams:

  • Exam Review Summary Screen exam_review.png

  • Retake Exam Screen (at the end of exam review) retake_exam.png

  • Passed Exam superman_success.png

  • Failed Exam exploding_computer.png

  • Course Download hand_cloud_phone.png

  • Lesson Completion high_fivers.png

• Feedback Submitted launch_feedback.png

• Fallback Image for Lesson Start Card (displays lesson image if available) lesson_presentation.png

• Discussion Screen is Offline offline_hand.png

• Tip Completion Screen tip_completion.png

• Formative Assessment:

  • Formative Assessment Student Counter Screen students.png

  • Formative Assessment Complete sitting_reviewing.png

• Five miscellaneous card fallback images:

  • stock_content.png

  • stock_course.png

  • stock_lesson.png

  • stock_objective.png

  • stock_test.png

Other variables

• Main active color (buttons, ...)

• Button border radius

• Top and bottom swoosh

• Tab and toggle highlights

• Confirmation success

• Confirmation fail