Required stack
필요 기술
CSSHTMLBigBlueButtonGreenlightDockerYAMLUI/UX DesignWeb FontsBranding Implementation
Project brief
프로젝트 내용
I’m refreshing our BigBlueButton deployment and need a cohesive visual identity that instantly feels reliable. The priority is a modern logo that communicates trustworthiness, paired with a well-thought-out colour scheme we can apply across the web conferencing interface, marketing site, and slide decks.
Here’s what I’m looking for:
Site work is located here. meetings.australianteachers.com.au. I want to provide a seamless user experience, it must feel like a natural extension of the main australianteachers.com.au site. Currently, the meetings subdomain appears to be a standard BigBlueButton (Greenlight) installation with default branding.
Below is the assessment of the current branding gaps and a formal Scope of Work (SOW) to align the two platforms.
Branding Assessment
| Element | Main Site (australianteachers.com.au) | Meetings Subdomain (meetings...)
Task:
| Logo | "ATC | Education Simplified" text-based logo with a professional, academic feel. |
| Primary Colors | Deep Navy/Blue and Crisp White. | Default Greenlight Green/Blue. |
| Secondary Colors | Accents of Cyan and Grey. | Standard open-source interface colors. |
| Typography | Modern Sans-Serif (likely Open Sans or Montserrat). | Default system fonts. |
Scope of Work (SOW): Brand Alignment & UI/UX Improvement
1. Project Objective
Transform the standalone BigBlueButton meeting interface into a white-labeled "ATC Virtual Classroom" that matches the corporate identity of the Australian Teachers Corporation.
2. Phase 1: Visual Identity & UI Customization
* Logo Integration: Replace all instances of the BigBlueButton/Greenlight logo with the high-resolution "ATC | Education Simplified" logo.
* Color Scheme Overhaul: * Update the CSS primary brand color to the specific ATC Navy (e.g., #1a2b3c).
* Update button styles and hover states to use ATC color accents.
* Favicon: Synchronize the browser tab icon with the main site’s favicon.
* Landing Page Content: Rewrite the "Welcome to BigBlueButton" text to reflect ATC’s mission (e.g., "Welcome to the ATC Virtual Learning Portal").
3. Phase 2: User Experience & Navigation
* Header/Footer Alignment: Add a simplified navigation bar to the meetings landing page that allows users to return to the main australianteachers.com.au site.
* Consistency Check: Ensure font families (typography) match the main site for a unified reading experience.
* Custom Meeting Backgrounds: (If supported by version) Upload branded ATC virtual backgrounds for use within the meetings.
4. Phase 3: Technical Setup & QA
* SSL & Security: Verify security certificates are consistent across subdomains.
* Responsive Testing: Ensure the branded UI remains functional on tablets and mobile devices.
* User Acceptance Testing (UAT): Conduct a walkthrough with stakeholders to ensure the "flow" from the main site to the meeting site feels cohesive.
5. Timeline & Deliverables
* Day 1: Asset collection and CSS style mapping.
* Day 2: Implementation on the Greenlight/BigBlueButton frontend.
* Day 3: Final testing and launch.
Recommendation
Since the meetings site is built on BigBlueButton, the customization will primarily take place in the Greenlight frontend settings or via custom CSS injections. I recommend using the exact Hex codes from your main site's stylesheet to ensure a perfect color match.
Most of these changes will be applied via the Greenlight v3 (or v2) environment variables or by customizing the Docker deployment files.
1. Visual Branding Assets
[ ] Logo Replacement: Provide the developer with a .svg or transparent .png of the ATC logo.
Path: Typically configured in the Greenlight settings or via the LOGO_URL environment variable.
[ ] Favicon Update: Provide a 32x32px or 16x16px .ico or .png file.
[ ] Color Palette Mapping: Provide exact Hex codes for CSS injection:
Primary Navy: #002D5B (Estimated based on your site)
Accent Cyan: #00AEEF (Estimated based on your site)
Text/Dark: #333333
2. CSS & Frontend Customization
[ ] Custom Stylesheet: Inject a custom CSS file to override the default "Greenlight Green."
Target the .btn-primary and .navbar classes to match the main site’s buttons and header.
[ ] Typography: Import the font used on the main site (e.g., via Google Fonts) and apply it to the body and headings in the CSS.
[ ] Layout Consistency: Adjust the border-radius on buttons to match the main site (e.g., if the main site uses sharp corners, remove the default Greenlight rounded corners).
3. Content & Messaging (Localization)
[ ] Welcome Text: Edit the en.yml (or relevant language file) to change "Welcome to BigBlueButton" to: "Welcome to the ATC Virtual Classroom."
[ ] Footer Links: Add HTML to the footer template to include:
Link back to: https://australianteachers.com.au
Link to Privacy Policy and Terms of Service.
[ ] Default Presentation: Replace the default "Welcome" PDF slide that appears inside the meeting room with a branded ATC slide.
4. Navigation & Integration
[ ] Breadcrumb/Header Link: If possib
Here’s what I’m looking for:
Site work is located here. meetings.australianteachers.com.au. I want to provide a seamless user experience, it must feel like a natural extension of the main australianteachers.com.au site. Currently, the meetings subdomain appears to be a standard BigBlueButton (Greenlight) installation with default branding.
Below is the assessment of the current branding gaps and a formal Scope of Work (SOW) to align the two platforms.
Branding Assessment
| Element | Main Site (australianteachers.com.au) | Meetings Subdomain (meetings...)
Task:
| Logo | "ATC | Education Simplified" text-based logo with a professional, academic feel. |
| Primary Colors | Deep Navy/Blue and Crisp White. | Default Greenlight Green/Blue. |
| Secondary Colors | Accents of Cyan and Grey. | Standard open-source interface colors. |
| Typography | Modern Sans-Serif (likely Open Sans or Montserrat). | Default system fonts. |
Scope of Work (SOW): Brand Alignment & UI/UX Improvement
1. Project Objective
Transform the standalone BigBlueButton meeting interface into a white-labeled "ATC Virtual Classroom" that matches the corporate identity of the Australian Teachers Corporation.
2. Phase 1: Visual Identity & UI Customization
* Logo Integration: Replace all instances of the BigBlueButton/Greenlight logo with the high-resolution "ATC | Education Simplified" logo.
* Color Scheme Overhaul: * Update the CSS primary brand color to the specific ATC Navy (e.g., #1a2b3c).
* Update button styles and hover states to use ATC color accents.
* Favicon: Synchronize the browser tab icon with the main site’s favicon.
* Landing Page Content: Rewrite the "Welcome to BigBlueButton" text to reflect ATC’s mission (e.g., "Welcome to the ATC Virtual Learning Portal").
3. Phase 2: User Experience & Navigation
* Header/Footer Alignment: Add a simplified navigation bar to the meetings landing page that allows users to return to the main australianteachers.com.au site.
* Consistency Check: Ensure font families (typography) match the main site for a unified reading experience.
* Custom Meeting Backgrounds: (If supported by version) Upload branded ATC virtual backgrounds for use within the meetings.
4. Phase 3: Technical Setup & QA
* SSL & Security: Verify security certificates are consistent across subdomains.
* Responsive Testing: Ensure the branded UI remains functional on tablets and mobile devices.
* User Acceptance Testing (UAT): Conduct a walkthrough with stakeholders to ensure the "flow" from the main site to the meeting site feels cohesive.
5. Timeline & Deliverables
* Day 1: Asset collection and CSS style mapping.
* Day 2: Implementation on the Greenlight/BigBlueButton frontend.
* Day 3: Final testing and launch.
Recommendation
Since the meetings site is built on BigBlueButton, the customization will primarily take place in the Greenlight frontend settings or via custom CSS injections. I recommend using the exact Hex codes from your main site's stylesheet to ensure a perfect color match.
Most of these changes will be applied via the Greenlight v3 (or v2) environment variables or by customizing the Docker deployment files.
1. Visual Branding Assets
[ ] Logo Replacement: Provide the developer with a .svg or transparent .png of the ATC logo.
Path: Typically configured in the Greenlight settings or via the LOGO_URL environment variable.
[ ] Favicon Update: Provide a 32x32px or 16x16px .ico or .png file.
[ ] Color Palette Mapping: Provide exact Hex codes for CSS injection:
Primary Navy: #002D5B (Estimated based on your site)
Accent Cyan: #00AEEF (Estimated based on your site)
Text/Dark: #333333
2. CSS & Frontend Customization
[ ] Custom Stylesheet: Inject a custom CSS file to override the default "Greenlight Green."
Target the .btn-primary and .navbar classes to match the main site’s buttons and header.
[ ] Typography: Import the font used on the main site (e.g., via Google Fonts) and apply it to the body and headings in the CSS.
[ ] Layout Consistency: Adjust the border-radius on buttons to match the main site (e.g., if the main site uses sharp corners, remove the default Greenlight rounded corners).
3. Content & Messaging (Localization)
[ ] Welcome Text: Edit the en.yml (or relevant language file) to change "Welcome to BigBlueButton" to: "Welcome to the ATC Virtual Classroom."
[ ] Footer Links: Add HTML to the footer template to include:
Link back to: https://australianteachers.com.au
Link to Privacy Policy and Terms of Service.
[ ] Default Presentation: Replace the default "Welcome" PDF slide that appears inside the meeting room with a branded ATC slide.
4. Navigation & Integration
[ ] Breadcrumb/Header Link: If possib