This page
Other pages
Account
|
Key
This line was removed.
This word was removed. This word was added.
This line was added.
|
Changes (65)
View Page History... |
| {section} {column:width=99%} |
| |
| h2. {color:#666666}About{color} |
| |
| Blackboard 9.x contains a flexible user interface which can be easily branded to have the look and feel of your institution. This page has been setup for users to share their notes on customizing the themes in Blackboard 9.x. Additionally, please find information for working with Language Packs [here|https://behind.blackboard.com/s/sysadminas/refcenter/docs/details.Bb?DocumentID=3550&pid=0&rid=0&dt=]. {panel:title=|borderStyle=solid|borderColor=#eeeeee|borderWidth=1px|titleBGColor=#ffffff|bgColor=#ffffff} |
| |
| h2. {color:#666666}Before You Get Started ...{color} |
| |
| Building a custom theme is easy but requires familiarity with CSS programming and design. If you don't have one or the other, peers or students can be good allies and resource. {panel} |
... |
| h2. {color:#666666}Getting Started ...{color} |
| To build your custom theme go to the Admin tab and download the "Bb Learn" theme from the Theme and Palette Catalog in the Brands & Themes page. |
| |
| To build your custom theme go to the Admin tab and download the "Bb Learn" theme from the Theme and Palette Catalog in the Brands & Themes page. |
| {table:cellpadding=5}{tr}{td:valign=top} !BBDN:Iconography^Plus_32.png|title=Tip! {td}{td:valign=middle}See in this step-by-step page how to [Customize a Login Page|Step-by-Step Custom Login Page] and how to [Customize a Theme Page|Step-by-Step Custom Theme]. |
| {td}{tr}{table} |
... |
| h3. {color:#666666}Overview{color} |
| A theme in Bb Learn is a collection of stylesheets organized into a folder. It contains all the stylesheets necessary to support layout, look and feel, and other styling aspects of that theme. We currently ship six For Learn 9.1 Service Pack 8, seven themes with the product: |
| |
| * BB Learn (default theme) |
| * Bb Learn 2008 |
| * Bb Classic (BB 8.0) * WebCT Classic 1 (WebCT Vista) |
... |
| * Brushed Metal * Schoolhouse |
| * Bb Learn 2012 - added with Service Pack 8 |
| |
| Themes are located in *Bb/LS/mainline/base/docs/themes* directory. Note: ignore themes with "_temp" in their folder name. These will be removed eventually. |
| As of 9.1 Service Pack 10, Bb Classic, WebCT Classic 1 and WebCT Classic 2 will be deprecated. New features built for SP10 will not be styled in these three themes, and clients who want to continue to use them will need to include some additional steps in planning their upgrade to SP10.| Blackboard will continue to support the use of these retired themes in the same way that we support the use of custom themes in the product today. If you plan to continue using one of these themes with your default brand beyond SP9, or if you are Community Engagement client using one of these themes with any of your institution brands, it will be converted on your system to a custom theme. If you are not using one of these themes on your system, the theme will be intentionally removed on upgrade to SP10. | Clients using any of the other themes - Learn 2012, Learn 2008, Brushed Metal, or Schoolhouse - will not be affected by this change. Clients who have customized their system theme will not be affected by this change, regardless of the "source theme" used for the custom theme. |
| |
| Themes are located in *Bb/LS/mainline/base/docs/themes* directory. Note: ignore themes with "_temp" in their folder name. These will be removed eventually. |
| {panel:title=|borderStyle=solid|borderColor=#eeeeee|borderWidth=1px|titleBGColor=#ffffff|bgColor=#ffffff} !BBDN:Iconography^CSS_48.png|align=center,title=CSS! {center} |
| |
| h4. {color:#999999}Anatomy of a theme{color} {center} |
... |
| List of stylesheets (as of Blackboard Learn™, Release 9.1): |
| ||Stylesheet||Purpose|| || Stylesheet || Purpose || |
| |*{{theme.css}}*|Imports | {{{*}theme.css{*}}} | Imports all other stylesheets in the theme folder (except for {{theme_rtl.css}}) | |
| |----|----| | ---- | ---- | |
| |*{{theme_defaults.css}}*|Resets | {{{*}theme_defaults.css{*}}} | Resets browser defaults and sets theme default styles. | |
| |*{{layout.css}}*|Controls | {{{*}layout.css{*}}} | Controls UI layout. | |
| |----|----| | ---- | ---- | |
| |*{{utilities.css}}*|Provides | {{{*}utilities.css{*}}} | Provides often-used, component-independent styles. | |
| |----|----| | ---- | ---- | |
| |*{{controls.css}}*|Contains | {{{*}controls.css{*}}} | Contains styles for all kinds of controls. | |
| |----|----| | ---- | ---- | |
| |*{{page_components.css}}*|Contains | {{{*}page_components.css{*}}} | Contains styles for various page components which are uwidely used throughout the application. | |
| |*{{tabs.css}}*|Styles | {{{*}tabs.css{*}}} | Styles for all kinds of tabs. | |
| |*{{palettes.css}}*|Contains | {{{*}palettes.css{*}}} | Contains styles for side menu palettes. | |
| |*{{modules.css}}*|Provides | {{{*}modules.css{*}}} | Provides styles for portal page modules. | |
| |*{{lists.css}}*|Contains | {{{*}lists.css{*}}} | Contains styles for content area display lists. | |
| |*{{inventory_tables.css}}*|Contains | {{{*}inventory_tables.css{*}}} | Contains styles for inventory tables throughout the application. | |
| |*{{dynamic_elements.css}}*|Styles | {{{*}dynamic_elements.css{*}}} | Styles for dynamically appearing components. | |
| |----|----| | ---- | ---- | |
| |*{{login.css}}*|Login | {{{*}login.css{*}}} | Login page styles. | |
| |*{{data_collection.css}}*|Styles | {{{*}data_collection.css{*}}} | Styles for data collection page and components specific to that page. | |
| |*{{calendar.css}}*|Calendar | {{{*}calendar.css{*}}} | Calendar tool page. | |
| |*{{blogs.css}}*| | {{{*}blogs.css{*}}} | Blog, journal, and wiki tool styles. | |
| |*{{gradebook.css}}*|Portion | {{{*}gradebook.css{*}}} | Portion of styles used in gradebook (the rest is in {{Bb/LS/mainline/base/docs/ui/styles/ngui/gradebook2.css}}) | |
| |*{{reports.css}}*| | {{{*}reports.css{*}}} | Styles used in reports. | |
| |*{{assessments.css}}*| | {{{*}assessments.css{*}}} | Assessments tool styles. | |
| |*{{discussion_board.css}}*|Discussion | {{{*}discussion_board.css{*}}} | Discussion board styles. | |
| |*{{wizard.css}}*|Course | {{{*}wizard.css{*}}} | Course creation wizard styles. | |
| |*{{outcomes.css}}*|Outcomes | {{{*}outcomes.css{*}}} | Outcomes tool styles (the rest is in {{Bb/LS/mainline/base/docs/ui/styles/ngui/style_caliper_homepage.css}} and {{style_caliper_leftnav.css}}) | |
| |----|----| | ---- | ---- | |
| |*{{temporary.css}}*| | {{{*}temporary.css{*}}} | Contains new styles specific to features being introduced in a new release. Once cleaned up, styles from this stylesheet are moved to their permanent locations in the files listed above. | |
| {panel} |
| {panel:title=|borderStyle=solid|borderColor=#eeeeee|borderWidth=1px|titleBGColor=#ffffff|bgColor=#ffffff} |
... |
| {center} |
| |
| h4. {color:#999999}Color Palettes{color} {center} |
| A color palette consists of a single stylesheet containing mostly color information. Color palettes are designed for use with the default themes. When applied, colors in the color palette stylesheet will override values defined in the theme. |
| {note:icon=true|title=Custom Themes and Color Palettes} |
... |
| {note} |
| Color palettes are located in *{{Bb/LS/mainline/base/docs/colorpalettes}}* {{{*}Bb/LS/mainline/base/docs/colorpalettes{*}}} directory. |
| {panel} |
... |
| h2. {color:#666666}Resource Files{color} |
| {table:cellpadding=5}{tr}{td:valign=top} !BBDN:Iconography^PSD_32.png|title=Photoshop Template! {td}{td:valign=middle}[Download a Photoshop template to get you started.|http://www.edugarage.com/download/attachments/49840451/Template.psd.zip]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^PSD_32.png|title=Photoshop Template! {td}{td:valign=middle}[Download a Photoshop template for Content Area to get you started.|http://www.edugarage.com/download/attachments/49840451/Template+Content.psd.zip]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^CSS_32.png|title=CSS Code Samples! {td}{td:valign=middle}[Download Custom Login Page and Theme HOWTO|http://www.edugarage.com/download/attachments/49840451/Custom_Themes.docx]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^PDF_32.png|title=JWU Case Study! {td}{td:valign=middle}Download JWU Case Study and see how you can highly customize Blackboard Learn.{td}{tr}{table} |
| h2. {color:#666666}Themes Showcase{color} |
| Share with us what you have done\! |
| |
| {table:cellpadding=5}{tr}{td:valign=top} !BBDN:Iconography^Show_32.png|title=Theme Showcase! {td}{td:valign=middle}[NG Playground: Green|Theme Showcase NG Playground Green]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^Show_32.png|title=Theme Showcase! {td}{td:valign=middle}[NG Playground: Yellow|Theme Showcase NG Playground Yellow]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^Show_32.png|title=Theme Showcase! {td}{td:valign=middle}[Virtual School|Theme Showcase Virtual Schools]{td}{tr} |
| {td}{tr} |
| {tr}{td:valign=top} !BBDN:Iconography^Show_32.png|title=Theme Showcase! {td}{td:valign=middle}[ProEd Theme|Theme Showcase PM Demo Theme]{td}{tr}{table} |
| {td}{tr}{table} |
| {column} {section} |
... |