Changing Quickr Theme Colors

Changing the Color Scheme of a Lotus Quickr Theme It is recommended you have knowledge of CSS (Cascading Style Sheets) HTML and image creation/editing techniques before editing or creating a style sheet. The default (blue) theme is controlled by the css file "defaultTheme.css" located here: /qphtml/skins/common/themes/ nls/lang/defaultTheme.css and by the Quickr 8.1 standard theme's css file "Quickr81.css" located here: /qphtml/skins/quickr81/nls/ lang/defaultTheme.css Note: replace lang with the appropriate language code, e.g., "en". IMPORTANT: Please make a backup copy of the original "Quickr81.css" before making any changes to it on the server. Editing "defaultTheme.css" is not recommended. The following table lists the common "lotus" classes and shows their default colors and images, and the colors and images used in the sample "Red" theme included with the article "Customizing themes in IBM Lotus Quickr services for IBM Lotus Domino V8.1". NOTE: Not all the classes shown below are currently used by Lotus Quickr. HTML / CSS Class Name

body

Description

Default Blue Theme

Red Theme

Page Background Color

#fbfcfd

#efe6cc

Page Background Image (can be repeated)

#lotusMain, .lotusMain

Main Content Area (central page area)

a:link, a:visited

Default Link color

a.lotusAction, a.lotusAction: visited .lotusActions a, . lotusActions a:visited .lotusVCard a:link, . lotusVCard a:visited, . lotusVCard a:hover, . lotusVCard a:focus, a: active .lotusVCard . lotusPersonActions . lotusInlinelist li

images/background.png

images/red/background.png

border-top-color: #568dd0

border-top-color: #9b3031

Left side panel background image (light blue blend)

Left side panel background image (grey blend)

#105cb6

#9f060d

Action Links (more actions etc.)

Popup person card link color (V Card)

Comments

Some background images may need to be repeated horizontally, vertically or both.

.dijitCalendarYearLabel . dijitCalendarPreviousYear, . dijitCalendarYearLabel, . dijitCalendarNextYear a:hover, a:focus, a:active

Mouse Over Default Link color

a.lotusAction:hover, a. lotusAction:focus, a. lotusAction:active, . lotusActions a:hover, . lotusActions a:focus, . lotusActions a:active, . lotusTags a.lotusAction: hover, .lotusTags a. lotusAction:focus, . lotusTags a.lotusAction: active

Action Links mouse over (more actions etc.)

a.lotusMyLink:hover, a. lotusMyLink:focus, . lotusMyLinks a:hover, . lotusMyLinks a:focus

My Links

a.lotusPerson, a. lotusPerson:visited

Person Name Link color

.lotusTags a:link, . lotusTags a:visited, a. lotusTag:link, a.lotusTag: visited

Tag link color

.lotusTags a:hover, . lotusTags a:focus, . lotusTags a:active, a. lotusTag:hover, a.lotusTag: focus, a.lotusTag:active, a. lotusPerson:hover, a. lotusPerson:focus, a. lotusPerson:active

Tag links and underline mouse over color

.lotusView

Change details view buttons

.lotusActionMenu li. lotusMenuSeparator

#05386b

#6f0207

Change color and border bottom color

#578cca

#a7853c

#05386b

#ba9a55

background-image: url(images/ views.gif);

background-image: url(images/ red/views.gif);

Action menu separator

#b3cae9

#9b3031

Dividers between links in the top right (name | help | login)

border-left-color: #639ade

border-left-color: #ac9e69

.dijitMenuSeparatorTop

#lotusBanner ul li, . lotusBanner ul li

Change color and border bottom color

Change color and border top color

#lotusBanner ul.lotusLinks li.lotusSelected a, . lotusBanner ul.lotusLinks li. lotusSelected a .dijitMenu ul.lotusActionMenu

.lotusButton a, .lotusButton a:visited

span.lotusBtnAction .lotusButton span.lotusBtnAction a, span.lotusBtnAction a: visited input.lotusBtn

Background box color on selected main navigation links

background-color: #649de1

background-color: #cfb275

Default is a Green button: background-image: url( images/ buttonBkgd.png)

Black button: background-image: url( images/ red/buttonBkgd.png)

Button border color

border-color: #86b75e

border-color: #666666

2nd Button border color

border-color: #9cda43 background-image: url(images/ btnActionBkgd.png)

border-color: #858585 background-image: url(images/ red/btnActionBkgd.png)

background-image: url(images/ btnSpecialBkgd.png)

background-image: url(images/ red/btnSpecialBkgd.png)

Button background image (1px wide image tiled)

.lotusButton a, .lotusButton a:visited span.lotusBtnSpecial a, span.lotusBtnSpecial a: visited input.lotusBtnSpecial input.lotusFormButton

Special Button background image (1px wide image tiled)

.lotusSearchButton .lotusFormTable, . lotusFormTable td

Forms Background color

#F0F4F7

#f7f5f0

.lotusFormTable . lotusFormFooter

Bottom of Forms Background color

#E2EBF1

#eae7d9

background-color: #eefee1

background-color: #e2e2e2

background-image: url(images/ menuTop.gif)

background-image: url(images/ red/menuTop.gif)

background-image: url(images/ menuMiddle.gif)

background-image: url(images/ red/menuMiddle.gif)

background-image: url(images/ menuBottom.gif)

background-image: url(images/ red/menuBottom.gif)

.lotusMenu, .portlet-menu

.lotusMenu .lotusInner

.lotusMenu . lotusBottomCorner .lotusMenu h3.selected, . portlet-menu h3.selected .lotusMenu . lotusMenuSection

Left side Navigation panel

Selected Left Navigation Link background box color

background-color: #73be59 border-color: #73be59

background-color: #b69f5e border-color: #b69f5e

Search button border color

border-color :#2f76b9

border-color: #663333

Search field border color

border-color: #5581b7

border-color: #663333

.lotusSort a.lotusMoreSorts: hover, .lotusSort a. lotusMoreSorts:focus, . lotusSort a.lotusMoreSorts: active, .lotusSort . lotusSelected

Selected Sort links background box color

background-color: #649de1

background-color: #b69f5e

.lotusTable .lotusAltRow td

Alt rows in tables (every second row has a bg color)

background-color: #f8f8f8

background-color: #e5e5e5

.lotusInfoTable h2

Announcements Panel Header (Title)

color: #73BE59

color: #ac9e69

.lotusTabs li, .portlet-tab li

Left side of Tabs background image

background-image: url(images/ leftTabContent.gif)

background-image: url(images/ red/leftTabContent.gif)

.lotusTabs a, .lotusTabs a: visited, .portlet-tab a, . portlet-tab:visited

Tabs background image

background-image: url(images/ rightTabContent.gif)

background-image:url (images/ red/rightTabContent.gif)

#lotusTitleBar, . lotusTitleBar

Main Title Bar (contains title, tabs, search) background image

border-bottom-color: #6794cb background-image: url(images/ titlebarMid.png)

border-bottom-color: #9b3031 background-image: url(images/ red/titlebarMid.png)

#lotusTitleBar . lotusRightCorner, . lotusTitleBar . lotusRightCorner

Main Title Bar Right side background image

background-image: url(images/ titlebarRight.png)

background-image: url(images/ red/titlebarRight.png)

#lotusTitleBar .lotusInner, . lotusTitleBar .lotusInner

Main Title Bar background image (with waves)

background-image: url(images/ titlebarLeft.png)

background-image: url(images/ red/titlebarLeft.png)

.lotusMenu li.lotusSelected a, .lotusMenu li. lotusSelected a:visited, . lotusMenu li.lotusSelected a:active, .portlet-menu li. lotusSelected a, .portletmenu li.lotusSelected a: visited, .portlet-menu li. lotusSelected a:active .lotusSearch . lotusSearchButton .lotusSearch .lotusText .lotusSearch .dijitTextBox

#lotusTitleBar .lotusTabs li, .lotusTitleBar .lotusTabs li

Unhighlighted Tab left side background image

.lotusTitleBar .lotusTabs a, .lotusTitleBar .lotusTabs a:visited

Unhighlighted background-image: url(images/ rightTab.gif) Tab right side background image border-bottom-color: #6794cb

#lotusTitleBar .lotusTabs li. lotusSelected, . lotusTitleBar .lotusTabs li. lotusSelected

Highlighted Tab left side background image

background-image: url(images/ leftTabSelected.gif)

background-image: url(images/ red/leftTabSelected.gif)

#lotusTitleBar .lotusTabs li. lotusSelected a, #lotusTitleBar .lotusTabs li. lotusSelected a:visited, . lotusTitleBar .lotusTabs li. lotusSelected a, . lotusTitleBar .lotusTabs li. lotusSelected a:visited

Highlighted Tab right side background image

background-image: url(images/ rightTabSelected.gif)

background-image: url(images/ red/rightTabSelected.gif)

.lotusTabs li. lotusSelected, .portlet-tab li. lotusSelected

background-image: url(images/ leftTabContentSelected.gif)

background-image: url(images/ red/leftTabContentSelected.gif)

.lotusTabs li.lotusSelected a, .lotusTabs li. lotusSelected a:visited, . portlet-tab li.lotusSelected a, .portlet-tab li. lotusSelected a:visited

background-image: url(images/ rightTabContentSelected.gif)

background-image: url(images/ red/rightTabContentSelected.gif)

background-image: url(images/ leftTab.gif)

background-image: url(images/ red/leftTab.gif)

border-bottom-color: #6794cb

border-bottom-color: #9b3031 background-image: url(images/ red/rightTab.gif) border-bottom-color: #9b3031

.lotusVCard . lotusPersonActions . lotusInlinelist li

Persons Profile card popup left border color

border-left-color: #105cb6

border-left-color: #6f0207

.lotusWidget

Homepage Widgets border color

border-color: #e7eef6

border-color: #eae7d9

.lotusWidget h2

Homepage Widgets Background color

background-color: #e7eef6

background-color: #eae7d9

.lotusDashboard #lotusMain

Homepage right side column background image

background: url(images/ colBkgd160.gif)

background: url(images/red/ colBkgd160.gif)

.lotusWidgetButtons li

Homepage Widget buttons background image (in right side column)

background-image: url(images/ widgetButtonBkgd.gif)

background-image: url(images/ red/widgetButtonBkgd.gif)

border-color: #d8e0ed

border-color: #d5ceb4

span.lotusBtn a, span. lotusBtn a:visited

More Actions Button text color

color: #0084ff

color: #9f060d

Search buttons border

border-color: #10395f

border-color: #6f0207

#lotusColLeft .lotusSection h2, .lotusColLeft . lotusSection h2

Side panel Headings with twisties

color: #39577a

color: #333333

.lotusArrow

Side panel Headings Twisties image. Used in a sprite

background-image: url(images/ arrows.gif)

background-image: url(images/ red/arrows.gif)

border-color: #2f76b9

border-color: #9f060d

border-color: #6cacf1

border-color: #9f060d

span.lotusBtn a:active



"No User Photo" images need to be changed to suit your theme

.lotusSearch . lotusSearchButton:hover, . lotusSearch . lotusSearchButton:focus .lotusAllTagsPopup . lotusClose:hover, . lotusAllTagsPopup . lotusClose:focus .dijitDialogCloseIcon: hover, .dijitDialogCloseIcon: focus .lotusAdd:hover, .lotusAdd: focus input.lotusFormButton: hover, input. lotusFormButton:focus .lotusBtnSpecial:hover, . lotusBtnSpecial:focus

span.lotusBtnSpecial input.lotusBtnSpecial .lotusAdd input.lotusFormButton .lotusAllTagsPopup . lotusClose

Special Button

.dijitDialogCloseIcon span.lotusBtnSpecial a, span.lotusBtnSpecial a: visited .lotusActionMenu a:hover

.dijitMenuItemHover ul.lotusList li.lotusSelected

Selected Tag background color

background-color: #cfecff

Left panel dividing lines

border-bottom-color: #c9d8e9

background-color: #d5ceb4

*html ul.lotusList li. lotusSelected a .lotusVCard . lotusActionMenu a:hover #lotusColLeft . lotusSection, .lotusColLeft . lotusSection a.lotusF1, a.lotusF1:visited

color: #8bbce8

color: #d0bca2

a.lotusF2, a.lotusF2:visited

Tags

color: #649cd8

color: #bba481

a.lotusF3, a.lotusF3:visited

Tag cloud in left panel

color: #4477bb

color: #9d8862

color: #2b588e

color: #756344

color: #1c3052

color: #443c29

color: #1f70c9

color: #756344

background-color: #f4f7fc

background-color: #f7f5f0

border-color: #c4d8f2

border-color: #eae7d9

a.lotusF4, a.lotusF4:visited a.lotusF5, a.lotusF5:visited .lotusAbout #lotusContent h2, .lotusAbout . lotusContent h2

Title in page contents

.lotusFilters a

Closable Filter Tags

.lotusFilters a .lotusClose

X on closable Filter Tags

color: #c4d8f2

color: #d5ceb4

.lotusFilters a:hover . lotusClose

X on hover closable Filter Tags

color: #9eaac5

color:#9d8862

Error page Title

color: #274a71

color: #443c29

Place bar background blend image

background-image: url(images/ placeBar.png)

background-image: url(images/ red/placeBar.png)

background-color: #e6f1ff

border-color: #f7f5f0

border-color: #c4d8f2

color: #d5ceb4

.lotusError h1 .lotusLogin h1, .lotusLogin h2 #lotusPlaceBar, . lotusPlaceBar .lotusVCard .lotusAppLinks td .RichTextEditable . dijitToolbar .lotusCommentBody .lotusCommentOwner . lotusCommentBody

Comment bubble

Last updated: 18 September 2008.