Embed Size (px)
Citation preview
Michael Garner, Senior Solutions Engineer, APAC
Branding the LMS for your institution
2
Today’s Session
• Look at various branding capabilities in Learn
• Using easy techniques to develop a brand
• Getting started & resources
• Next Steps
3
Why brand?
• Creating a standard look and feel across the institution
• Create a delightful student experience
• When one properly it looks cool
• Considerations…..– Upgrades and support!– Test, test and test…on many browsers
6
Spectrum of Customization Methods
Custom Login Page
GUI Controls
Color Palette /SystemTheme
Custom Color
Palette
Custom System Theme
EASY INVOLVED
Custom Login Page
• Login page is a single file which contains its own CSS and markup
• Can be restyled or even redesigned independently from the rest of UI
• Most of the markup can be modified as needed
EXPERIENCE: CSS and DOM experience preferredSCOPE: LimitedLEVEL: Easy*
* Depends on design complexity
GUI Controls
• Choose tab style and alignment
• Specify banner image and link it to a specific URL
• Choose top frame sizing
• Specify URLs for the Home and Support links
• Specify role for Direct Access tab and module content
• Choose course name format
EXPERIENCE: No prior CSS or DOM experience neededSCOPE: Global non-intrusiveLEVEL: Easy
Color Palettes and System Themes
• Widen UI customization scope with selection of supplied Color Palettes and/or System Themes, both are maintained by Blackboard
• Use included System Themes to completely change the look of the application
• Color Palettes are the easiest way to change the color of a limited set of UI elements
• Colors selected using GUI controls can be saved as a new Color Palette
• Customize ColorsTop frame, Top tabs, Content Frame, Content Area, Page Header, Primary Buttons, Secondary Buttons, and Modules
EXPERIENCE: No prior CSS or DOM experience neededSCOPE: Global non-intrusiveLEVEL: Easy to moderate
Custom Color Palettes
• Custom Color Palettes are used to create new color schemes and modified the presentation of UI elements unaffected by supplied color palettes
• UI customization scope depends on your design requirements. In most cases a custom color palette can be used in lieu of creating a custom System Theme.
EXPERIENCE: CSS experience requiredSCOPE: Global non-intrusive*LEVEL: Moderate*
* Depends on design complexity
Custom System Theme
• Custom System Theme allows for a complete UI transformation
• UI look-and-feel can be essentially rewritten in the design process
• Create a custom system theme if the options in the custom color palette are not enough.
• Themes can be found on the system in the <bb install dir>/content/vi/BBLEARN/branding/themes
EXPERIENCE: Extensive CSS and DOM experience requiredSCOPE: Redesign*LEVEL: Very involved*
* Depends on design complexity
Blackboard Learn Brands
• Blackboard Brands allow you to represent multiple unique visual identities on a single instance of Learn – for different colleges, campuses, degree programs, K12 schools, etc.
Blackboard Learn Brands
• Audiences are targeted using different hostnames institution roles.
Blackboard Learn Brands
• Course Delivery License – Single Brand– Single Brand for everyone (Default Brand)
• Community License – Multiple Brands– Multiple custom hostname brands– Multiple primary role-specific brands– Multiple brands for combinations of hostname and role
Custom System Theme
Custom System Theme
EASY INVOLVED
Custom System Theme
• Custom System Theme allows for a complete UI transformation
• UI look-and-feel can be essentially rewritten in the design process
• Create a custom system theme if the options in the custom color palette are not enough.
• Themes can be found on the system in the <bb install dir>/content/vi/BBLEARN/branding/themes
EXPERIENCE: Extensive CSS and DOM experience requiredSCOPE: Redesign*LEVEL: Very involved*
* Depends on design complexity
Custom Theme Step-by-Step
• Go to Brands and Themes from the system admin tab and choose Theme and Palette Catalog
Custom Theme Step-by-Step
• Download any theme
Custom Theme Step-by-Step
• Create new theme
• Enter a name for the theme and a reference name for the theme. The reference name is used as the folder name on the file server.
• Choose the zip file and click Submit.
Custom Theme Step-by-Step
• Locate your custom theme in the themes folder
<bb dir>/content/vi/BBLEARN/branding/themes/<theme_folder>
Custom Theme Step-by-Step
• This folder contains theme.css file which has been ”minified” to improve performance. Minified means that the theme.css has been with all of the imports and then compressed and chopped up into smaller files, theme1.css and theme2.css.
• In order to customize the theme you need the original version not the minified version. Copy theme.css from __orig__ folder into root folder of theme. Then make adjustments to the imports. For example:
@import url("assessment.css");
to
@import url(”__orig__/assessment.css");
Custom Theme Step-by-Step
• From this point on BbLearn becomes your theme development environment.
• Edit fonts, images, and css, properties files in root folder. Then copy those items to the original folder so that the original folder is always complete.
• Edit css files in __orig__ folder that do not have duplicates in the theme root folder.
• Reload the browser window to preview your edits
• It is important to preview your work both inside and outside the course.
Anatomy of a Theme
Core• app_nav.css – main stylesheet that covers core areas
and My Blackboard• 480.css/768.css – styles used for different screen sizes• external.css - Stylesheet for On Demand Module• login.css - Styles for the login page• outcomes.css - Styles for the outcomes tool• fonts
• utilicons• images
Plugins• assessments.css Assessments tool styles.
• gradebook.css Styles used in gradebook
Anatomy of a Theme
• theme.css Imports all other stylesheets in the theme folder, except for theme_rtl.css
• theme.properties Stores properties for this themetabAlignment=right (right, left, or center)theme.required.version=9.1.110082.0 (required version to use this theme)tabStyle=transparent (in gui, squared, rounded, etc)iconSet=0 (what are the options here?)frameSize=large (options in gui?)type=modern (standard, modern)courseNameUsage=N (what are the options?)
Custom System Theme: Tips
• NOT a side project
• Significant CSS and DOM experience is required to create, test and deploy the theme
• ~12,000 lines of code
• You will need to maintain, QA, and test Custom Theme to ensure it works with the new features released with each upgrade of Bb Learn
• Generally not compatible with Course Themes
• Back up the theme folder frequently
Custom System Theme: Tips
• Good portion of selectors are used in many places throughout the application. Changes to attributes in the stylesheets at the top may potentially (and unintentionally) cascade to many components.
• Attributes dealing with positioning (position:absolute|fixed|static) and layout ( float:left|right) should be approached carefully as changes there may have an unintentional impact.
• Test your changes in as many supported browsers as possible. See supported browser list under "Client Configuration Support" tab.
• Rely heavily on Firebug or Chrome Developer Tools.
