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

Description Default Blue Theme Red Theme Comments
Name

Page
Background #fbfcfd #efe6cc
Color

Some
background
body Page images may
Background need to be
images/background.png images/red/background.png
Image (can be repeated
repeated) horizontally,
vertically or
both.

Main Content border-top-color: #568dd0 border-top-color: #9b3031

#lotusMain, Area
.lotusMain (central page Left side panel background Left side panel background
area) image (light blue blend) image (grey blend)

Default Link
a:link, a:visited
color

a.lotusAction, a.lotusAction:
visited Action Links
(more actions
.lotusActions a, . etc.)
lotusActions a:visited

.lotusVCard a:link, .
lotusVCard a:visited, .
lotusVCard a:hover, . #105cb6 #9f060d
lotusVCard a:focus, a: Popup person
active card link color
(V Card)
.lotusVCard .
lotusPersonActions .
lotusInlinelist li
.dijitCalendarYearLabel .
dijitCalendarPreviousYear, .
dijitCalendarYearLabel, .
dijitCalendarNextYear

Mouse Over
a:hover, a:focus, a:active Default Link
color

a.lotusAction:hover, a.
lotusAction:focus, a.
lotusAction:active, .
lotusActions a:hover, .
Action Links
lotusActions a:focus, .
mouse over
lotusActions a:active, .
(more actions #05386b #6f0207
lotusTags a.lotusAction:
etc.)
hover, .lotusTags a.
lotusAction:focus, .
lotusTags a.lotusAction:
active

a.lotusMyLink:hover, a. Change
lotusMyLink:focus, . color and
My Links
lotusMyLinks a:hover, . border
lotusMyLinks a:focus bottom color

a.lotusPerson, a. Person Name

lotusPerson:visited Link color

.lotusTags a:link, . #578cca #a7853c

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

.lotusTags a:hover, .
lotusTags a:focus, .
lotusTags a:active, a. Tag links and Change
lotusTag:hover, a.lotusTag: underline color and
#05386b #ba9a55
focus, a.lotusTag:active, a. mouse over border
lotusPerson:hover, a. color bottom color
lotusPerson:focus, a.
lotusPerson:active

Change
.lotusView details view background-image: url(images/ background-image: url(images/
buttons views.gif); red/views.gif);

Change
.lotusActionMenu li. color and
lotusMenuSeparator Action menu border top
#b3cae9 #9b3031
separator color

.dijitMenuSeparatorTop

Dividers
between links in
#lotusBanner ul li, .
the top right border-left-color: #639ade border-left-color: #ac9e69
lotusBanner ul li
(name | help |
login)
#lotusBanner ul.lotusLinks
li.lotusSelected a, . Background box
lotusBanner ul.lotusLinks li. color on
lotusSelected a selected
background-color: #649de1 background-color: #cfb275
main
.dijitMenu navigation
links
ul.lotusActionMenu

Button
.lotusButton a, .lotusButton background Default is a Green button: Black button:
a:visited image (1px wide background-image: url( images/ background-image: url( images/
image tiled) buttonBkgd.png) red/buttonBkgd.png)

span.lotusBtnAction
Button
border-color: #86b75e border-color: #666666
.lotusButton border color

span.lotusBtnAction a,
span.lotusBtnAction a:
visited border-color: #9cda43 border-color: #858585
2nd Button
background-image: url(images/ background-image: url(images/
input.lotusBtn border color
btnActionBkgd.png) red/btnActionBkgd.png)
.lotusButton a, .lotusButton
a:visited

span.lotusBtnSpecial a,
span.lotusBtnSpecial a:
visited Special
Button
input.lotusBtnSpecial background background-image: url(images/ background-image: url(images/
image (1px wide btnSpecialBkgd.png) red/btnSpecialBkgd.png)
input.lotusFormButton image tiled)

.lotusSearchButton

Forms
.lotusFormTable, .
Background #F0F4F7 #f7f5f0
lotusFormTable td
color

Bottom of
.lotusFormTable . Forms
#E2EBF1 #eae7d9
lotusFormFooter Background
color

background-color: #eefee1 background-color: #e2e2e2

.lotusMenu, .portlet-menu
background-image: url(images/ background-image: url(images/
menuTop.gif) red/menuTop.gif)
Left side
Navigation background-image: url(images/ background-image: url(images/
.lotusMenu .lotusInner
panel menuMiddle.gif) red/menuMiddle.gif)

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

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

.lotusMenu .
lotusMenuSection
 Selected Left
.lotusMenu li.lotusSelected background-color: #73be59 background-color: #b69f5e
Navigation Link
a, .lotusMenu li. border-color: #73be59 border-color: #b69f5e
background box
lotusSelected a:visited, .
color
lotusMenu li.lotusSelected
a:active, .portlet-menu li.
lotusSelected a, .portlet-
menu li.lotusSelected a:
visited, .portlet-menu li.
lotusSelected a:active

Search
.lotusSearch .
button border-color :#2f76b9 border-color: #663333
lotusSearchButton
border color

.lotusSearch .lotusText
Search field
border-color: #5581b7 border-color: #663333
.lotusSearch .dijitTextBox border color

.lotusSort a.lotusMoreSorts:
hover, .lotusSort a. Selected Sort
lotusMoreSorts:focus, . links
background-color: #649de1 background-color: #b69f5e
lotusSort a.lotusMoreSorts: background box
active, .lotusSort . color
lotusSelected

Alt rows in
tables (every
.lotusTable .lotusAltRow td background-color: #f8f8f8 background-color: #e5e5e5
second row has
a bg color)

Announcements
.lotusInfoTable h2 Panel Header color: #73BE59 color: #ac9e69
(Title)

Left side of
Tabs background-image: url(images/ background-image: url(images/
.lotusTabs li, .portlet-tab li
background leftTabContent.gif) red/leftTabContent.gif)
image

.lotusTabs a, .lotusTabs a: Tabs

background-image: url(images/ background-image:url (images/
visited, .portlet-tab a, . background
rightTabContent.gif) red/rightTabContent.gif)
portlet-tab:visited image

Main Title
Bar (contains border-bottom-color: border-bottom-color:
#lotusTitleBar, . title, tabs, #6794cb #9b3031
lotusTitleBar search) background-image: url(images/ background-image: url(images/
background titlebarMid.png) red/titlebarMid.png)
image

#lotusTitleBar . Main Title

lotusRightCorner, . Bar Right side background-image: url(images/ background-image: url(images/
lotusTitleBar . background titlebarRight.png) red/titlebarRight.png)
lotusRightCorner image

Main Title
Bar
#lotusTitleBar .lotusInner, . background-image: url(images/ background-image: url(images/
background
lotusTitleBar .lotusInner titlebarLeft.png) red/titlebarLeft.png)
image (with
waves)
 Unhighlighted background-image: url(images/ background-image: url(images/
#lotusTitleBar .lotusTabs red/leftTab.gif)
Tab left side leftTab.gif)
li, .lotusTitleBar .lotusTabs
background
li
image border-bottom-color: #6794cb border-bottom-color: #9b3031

Unhighlighted background-image: url(images/ background-image: url(images/

.lotusTitleBar .lotusTabs red/rightTab.gif)
Tab right side rightTab.gif)
a, .lotusTitleBar .lotusTabs
background
a:visited
image border-bottom-color: #6794cb border-bottom-color: #9b3031

#lotusTitleBar .lotusTabs li. Highlighted

lotusSelected, . Tab left side background-image: url(images/ background-image: url(images/
lotusTitleBar .lotusTabs li. background leftTabSelected.gif) red/leftTabSelected.gif)
lotusSelected image

#lotusTitleBar .lotusTabs li.

lotusSelected a,
#lotusTitleBar .lotusTabs li. Highlighted
lotusSelected a:visited, . Tab right side background-image: url(images/ background-image: url(images/
lotusTitleBar .lotusTabs li. background rightTabSelected.gif) red/rightTabSelected.gif)
lotusSelected a, . image
lotusTitleBar .lotusTabs li.
lotusSelected a:visited

.lotusTabs li.
background-image: url(images/ background-image: url(images/
lotusSelected, .portlet-tab li.
leftTabContentSelected.gif) red/leftTabContentSelected.gif)
lotusSelected

.lotusTabs li.lotusSelected
a, .lotusTabs li.
lotusSelected a:visited, . background-image: url(images/ background-image: url(images/
portlet-tab li.lotusSelected rightTabContentSelected.gif) red/rightTabContentSelected.gif)
a, .portlet-tab li.
lotusSelected a:visited

Persons
.lotusVCard .
Profile card
lotusPersonActions . border-left-color: #105cb6 border-left-color: #6f0207
popup left
lotusInlinelist li
border color

Homepage
.lotusWidget Widgets border-color: #e7eef6 border-color: #eae7d9
border color

Homepage
Widgets
.lotusWidget h2 background-color: #e7eef6 background-color: #eae7d9
Background
color

Homepage
right side
.lotusDashboard background: url(images/ background: url(images/red/
column
#lotusMain colBkgd160.gif) colBkgd160.gif)
background
image

Homepage
Widget background-image: url(images/ background-image: url(images/
buttons widgetButtonBkgd.gif) red/widgetButtonBkgd.gif)
.lotusWidgetButtons li
background
image (in right border-color: #d8e0ed border-color: #d5ceb4
side column)
span.lotusBtn a, span.
lotusBtn a:visited More Actions
color: #0084ff color: #9f060d
Button text color
span.lotusBtn a:active

"No User
Photo" images
<img src="../images/
need to be
thumbNoPhoto.gif" alt="" />
changed to suit
your theme

.lotusSearch .
lotusSearchButton:hover, .
lotusSearch .
lotusSearchButton:focus

.lotusAllTagsPopup .
lotusClose:hover, .
lotusAllTagsPopup .
lotusClose:focus

.dijitDialogCloseIcon:
Search
hover, .dijitDialogCloseIcon: border-color: #10395f border-color: #6f0207
buttons border
focus

.lotusAdd:hover, .lotusAdd:
focus

input.lotusFormButton:
hover, input.
lotusFormButton:focus

.lotusBtnSpecial:hover, .
lotusBtnSpecial:focus

#lotusColLeft .lotusSection Side panel

h2, .lotusColLeft . Headings with color: #39577a color: #333333
lotusSection h2 twisties

Side panel
Headings
.lotusArrow Twisties
image. Used in background-image: url(images/ background-image: url(images/
a sprite arrows.gif) red/arrows.gif)

span.lotusBtnSpecial

input.lotusBtnSpecial

.lotusAdd

input.lotusFormButton border-color: #2f76b9 border-color: #9f060d

.lotusAllTagsPopup . Special Button

lotusClose

.dijitDialogCloseIcon

span.lotusBtnSpecial a,
span.lotusBtnSpecial a: border-color: #6cacf1 border-color: #9f060d
visited

.lotusActionMenu a:hover
 .dijitMenuItemHover Selected Tag
background background-color: #cfecff
ul.lotusList li.lotusSelected
color
background-color: #d5ceb4
*html ul.lotusList li.
lotusSelected a

.lotusVCard .
lotusActionMenu a:hover

#lotusColLeft .
Left panel
lotusSection, .lotusColLeft . border-bottom-color: #c9d8e9
dividing lines
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 color: #4477bb color: #9d8862

Tag cloud in
a.lotusF4, a.lotusF4:visited left panel color: #2b588e color: #756344

a.lotusF5, a.lotusF5:visited color: #1c3052 color: #443c29

.lotusAbout #lotusContent
Title in page
h2, .lotusAbout . color: #1f70c9 color: #756344
contents
lotusContent h2

background-color: #f4f7fc background-color: #f7f5f0

Closable Filter
.lotusFilters a
Tags border-color: #c4d8f2 border-color: #eae7d9

X on closable
.lotusFilters a .lotusClose color: #c4d8f2 color: #d5ceb4
Filter Tags

X on hover -
.lotusFilters a:hover .
closable Filter color: #9eaac5 color:#9d8862
lotusClose
Tags

.lotusError h1

.lotusLogin h1, .lotusLogin Error page Title color: #274a71 color: #443c29
h2

#lotusPlaceBar, .
lotusPlaceBar
Place bar
.lotusVCard .lotusAppLinks background-image: url(images/ background-image: url(images/
background
td placeBar.png) red/placeBar.png)
blend image
.RichTextEditable .
dijitToolbar

.lotusCommentBody background-color: #e6f1ff border-color: #f7f5f0

Comment
.lotusCommentOwner . bubble border-color: #c4d8f2 color: #d5ceb4
lotusCommentBody

Last updated: 18 September 2008.