Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-84412

Change the BigBlueButtonBN activity icon

XMLWordPrintable

    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • Hide
      1. Log in as admin
      2. Enable the BBB plugin and set it up with valid server credentials
      3. Create a course and enrol a student
      4. Add BigBlueButton as an activity to the course
        • Confirm that the icon rendered is a vector and not a bitmap
      5. Go to Appearance > Themes > Boost cog > Advanced settings > Raw initial SCSS
        Paste:
        .activity-icon.communication.isbranded img[src*="bigbluebuttonbn"] {     filter: invert(15%) sepia(100%) saturate(5000%) hue-rotate(-5deg) brightness(100%) contrast(110%) !important; }

        Save

      6. Go to course. Confirm BBB logo color is red.
      Show
      Log in as admin Enable the BBB plugin and set it up with valid server credentials Create a course and enrol a student Add BigBlueButton as an activity to the course Confirm that the icon rendered is a vector and not a bitmap Go to Appearance > Themes > Boost cog > Advanced settings > Raw initial SCSS Paste: .activity-icon.communication.isbranded img [src*="bigbluebuttonbn"] {     filter: invert(15%) sepia(100%) saturate(5000%) hue-rotate(-5deg) brightness(100%) contrast(110%) !important; } Save Go to course. Confirm BBB logo color is red.
    • Hide

      Code verified against automated checks.

      Checked MDL-84412 using repository: https://github.com/jfederico/moodle.git

      More information about this report

      Built on: Thu Feb 20 10:28:50 PM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-84412 using repository: https://github.com/jfederico/moodle.git main (0 errors / 0 warnings) [branch: MDL-84412 | CI Job ] More information about this report Built on: Thu Feb 20 10:28:50 PM UTC 2025

      Description:

      The current BigBlueButtonBN (BBB) activity icon in Moodle is a map image wrapped inside an SVG. This does not align with the standard Moodle activity module icons, which are typically vector-based and theme-adaptable.

      The proposed solution is to convert the existing icon into a proper vector format while maintaining its recognizable blue color. However, the updated icon should also allow theme-based color adjustments, ensuring consistency across different Moodle themes.

      Expected Benefits:

      Improves UI consistency by aligning BBB's icon with Moodle's standard iconography.
      Enhances theme compatibility—icons will adapt dynamically to Moodle theme settings.
      Better scalability—vector icons scale properly without losing quality.

      Implementation Proposal:

      • Convert the existing BBB icon into a true vector-based format (e.g., SVG with proper paths).
      • Ensure the icon’s base color remains blue but allows theme-based overrides.
      • Apply the new icon in locations such as:
        • Course page activity listing
        • Activity/resource selection panel

      This change will modernize the BigBlueButtonBN plugin's look and feel, making it more adaptable to different Moodle themes and improving overall UX.

      Note: See images attached

            jfederico Jesus Federico
            shamiso.jaravaza Shamiso Jaravaza
            Shamiso Jaravaza Shamiso Jaravaza
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 53 minutes
                53m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.