Our key products
Theming
Applying different brands to Bero implementations
Theming
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. `.png`s in Bero need to be `.png`s in JID; `.svg`s in Bero need to be `.svg`s 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 blank" rel="noopener">`favicon.ico` & blank" rel="noopener">`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 `handcloud_phone.png`
- Lesson Completion `high_fivers.png`
- Feedback Submitted `launch_feedback.png`
- Fallback Image for Lesson Start Card (displays lesson image if available) blank" rel="noopener">`lessonpresentation.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