Difference: PatternSkinColorSettings (1 vs. 6)

Revision 62011-07-17 - TWikiContributor

 

Color scheme settings for PatternSkin

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.

AttachContentPlugin is not installed.

Usage

Step 1

Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/theme-colors.css

Step 2

Edit this topic, and change the color variables as you like.

Step 3

Save the topic. This will generate an attachment to topic PatternSkin.

Info For more help on customizing styles, see PatternSkinCustomization.

Color variables

On this page:

Logical groupings

Text

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff

GRAYED_TEXT_COLOR

  • Set GRAYED_TEXT_COLOR = #777

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #630000

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #777

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #777

Links

LINK_TEXT_NORMAL Link normal text

  • Set LINK_TEXT_NORMAL = #4571d0

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =

LINK_TEXT_NORMAL_VISITED Link normal text visited

  • Set LINK_TEXT_NORMAL_VISITED = #666

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

  • Set LINK_TEXT_ACTION_BUTTON = #be000a

LINK_TEXT_HOVER Link hover text

  • Set LINK_TEXT_HOVER = #fff

LINK_BACKGROUND_HOVER Link background hover

  • Set LINK_BACKGROUND_HOVER = #ce000f

SIDE_BAR_LINK_TEXT Side bar link text

  • Set SIDE_BAR_LINK_TEXT = #444

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

  • Set DISABLED_TEXT = #aaa

DISABLED_BACKGROUND Disabled background

  • Set DISABLED_BACKGROUND = #fafaf8

BUTTON_BORDERS_DISABLED Disabled button borders

  • Set BUTTON_BORDERS_DISABLED = #fff #ccc #ccc #fff

'New'

NEW_TEXT New text (green)

  • Set NEW_TEXT = #049804

NEW_BACKGROUND New background (light green)

  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00

Buttons

BUTTON_TEXT Button text color (dark gray)

  • Set BUTTON_TEXT = #000

BUTTON_BORDERS Button borders

  • Set BUTTON_BORDERS = #fff #888 #888 #fff

BUTTON_BACKGROUND Button background

  • Set BUTTON_BACKGROUND = #e2e3e3

BUTTON_CANCEL_BACKGROUND Cancel button background

  • Set BUTTON_CANCEL_BACKGROUND = #f2d5d0

SUBMIT_BUTTON_BACKGROUND Submit button background

  • Set SUBMIT_BUTTON_BACKGROUND = #06c

SUBMIT_BUTTON_BORDER_TEXT Submit button text color

  • Set SUBMIT_BUTTON_BORDER_TEXT = #fff

SELECT_BORDER Select border

  • Set SELECT_BORDER = #888

Background colors

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

  • Set SIDE_BAR_BACKGROUND = #f6f6f6

NEUTRAL_BACKGROUND

  • Set NEUTRAL_BACKGROUND = #fdfaf1

TOP_BAR_BACKGROUND Top bar background

  • Set TOP_BAR_BACKGROUND = #fefcf7

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #f6f6f6

TOPIC_ACTION_BACKGROUND Topic action row

  • Set TOPIC_ACTION_BACKGROUND = #f6f6f6

HEADER_BACKGROUND h2, h3

  • Set HEADER_BACKGROUND = #f6f6f6

DIFF_HEADER_BACKGROUND Diff header (dark gray)

  • Set DIFF_HEADER_BACKGROUND = #ccc

NOTIFICATION_BACKGROUND Info, broadcast message and notifications

  • Set NOTIFICATION_BACKGROUND = #ffe67b

INFO_BACKGROUND

  • Set INFO_BACKGROUND = #ffe67b

Border colors

NEUTRAL_BORDER Info (light gray)

  • Set NEUTRAL_BORDER = #ddd

SEPARATOR_BORDER

  • Set SEPARATOR_BORDER = #e2e2e2

MINOR_SEPARATOR_BORDER Header H3..H6 bottom

  • Set MINOR_SEPARATOR_BORDER = #e2e2e2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #dadada

IMAGE_BORDER Image border

  • Set IMAGE_BORDER = #eee

FORM_STEP_BORDER Form step border

  • Set FORM_STEP_BORDER = #e2e2e2

NOTIFICATION_BORDER Broadcast message

  • Set NOTIFICATION_BORDER = #ffdf4c

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
  • Set TABLE_DATA_ODD_BACKGROUND = #f0f6fb
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc

TABLE_BORDER Table border, sup (light neutral tone)

  • Set TABLE_BORDER = #e2e2e2

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #cfcfcf

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #fbfbfb

FORMFIELD_ACTIVE Active form field

  • Set FORMFIELD_ACTIVE = #ffffe0

FORM_HEADER_TEXT Header text on form background

  • Set FORM_HEADER_TEXT = #036 

<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing! 

%STARTATTACH{"theme-colors.css" web="%SYSTEMWEB%" topic="PatternSkin"}%
/* PatternSkin colors */
/* Generated by AttachContentPlugin from %WEB%.%TOPIC% */

/* LAYOUT ELEMENTS */

#patternTopBar {
   border-color:%SEPARATOR_BORDER%;
   background-color:%TOP_BAR_BACKGROUND%;
}
#patternMain { /* don't set a background here; use patternOuter */ }
#patternOuter {
   background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternLeftBar,
#patternWrapper {
   background-color:%SIDE_BAR_BACKGROUND%;
}
#patternBottomBar {
   border-color:%SEPARATOR_BORDER%;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
   color:%GRAYED_OUT_TEXT%;
}
#patternBottomBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* GENERAL HTML ELEMENTS */

html body {
   background-color:%MAIN_BACKGROUND_COLOR%;
   color:%MAIN_TEXT_COLOR%;
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
   background-color:transparent;
}
hr {
   color:%SEPARATOR_BORDER%;
   background-color:%SEPARATOR_BORDER%;
}
pre, code, tt {
   color:%CODE_TEXT%;
}
blockquote {
   background-color:%ACTIVE_FORM_BACKGROUND%;
   border-color:%ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %NEUTRAL_BORDER%;

}
blockquote h2 {
   background:none;
}
h1, h2, h3, h4, h5, h6 {
   color:%HEADER_TEXT%;
}
h2 {
   background-color:%HEADER_BACKGROUND%;
   border-color:%MINOR_SEPARATOR_BORDER%;
}
h3, h4, h5, h6 {
   border-color:%MINOR_SEPARATOR_BORDER%;
}
/* to override old Render.pm coded font color style */
.twikiNewLink font {
   color:inherit;
}
.twikiNewLink a:link sup,
.twikiNewLink a:visited sup {
   color:%MUTED_TEXT%;
   border-color:%NEUTRAL_BORDER%;
}
.twikiNewLink a:hover sup {
   background-color:%LINK_BACKGROUND_HOVER%;
   color:%LINK_TEXT_HOVER%;
   border-color:%LINK_BACKGROUND_HOVER%;
}
.twikiNewLink {
   border-color:%NEUTRAL_BORDER%;
}
:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
   color:%LINK_TEXT_NORMAL%;
   background-color:transparent;
}
:link:hover,
:visited:hover {
   color:%LINK_TEXT_HOVER%;
   background-color:%LINK_BACKGROUND_HOVER%;
   background-image:none;
}
:link:hover img,
:visited:hover img {
   background-color:transparent;
}
.patternTopic a:visited {
   color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternTopic a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternMainContents h1 a:link, #patternMainContents h1 a:visited,
#patternMainContents h2 a:link, #patternMainContents h2 a:visited,
#patternMainContents h3 a:link, #patternMainContents h3 a:visited,
#patternMainContents h4 a:link, #patternMainContents h4 a:visited,
#patternMainContents h5 a:link, #patternMainContents h5 a:visited,
#patternMainContents h6 a:link, #patternMainContents h6 a:visited {
   color:%HEADER_TEXT%;
}
#patternMainContents h1 a:hover,
#patternMainContents h2 a:hover,
#patternMainContents h3 a:hover,
#patternMainContents h4 a:hover,
#patternMainContents h5 a:hover,
#patternMainContents h6 a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternTopic .twikiUnvisited a:visited {
   color:%LINK_TEXT_NORMAL%;
}
.patternTopic .twikiUnvisited a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* Form elements */

textarea,
input,
select {
   border-color:%FORM_INPUT_BORDER%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit,
.twikiButton {
   border-color:%BUTTON_BORDERS%;
}
.twikiSubmit {
   color:%SUBMIT_BUTTON_BORDER_TEXT%;
   background-color:%SUBMIT_BUTTON_BACKGROUND%;
}
.twikiButton {
   color:%BUTTON_TEXT%;
   background-color:%BUTTON_BACKGROUND%;
}
.twikiButtonCancel {
   color:%BUTTON_TEXT%;
   background-color:%BUTTON_CANCEL_BACKGROUND%;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:active {
   border-color:%BUTTON_BORDERS_DISABLED%;
   color:%DISABLED_TEXT%;
   background-color:%ACTIVE_FORM_BACKGROUND%;
}
.twikiTextarea,
.twikiInputField,
.twikiInputFieldDisabled,
.twikiInputFieldReadOnly,
.twikiSelect {
   border-color:%INPUT_FIELD_BORDERS%;
}
.twikiTextarea,
.twikiInputField,
.twikiSelect {
   color:%MAIN_TEXT_COLOR%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputField:active,
.twikiInputField:focus,
.twikiInputFieldFocus {
   background-color:%FORMFIELD_ACTIVE%;
}

.twikiTextareaRawView {
   color:%GENERAL_TEXT%;
}
.twikiInputFieldDisabled {
   color:%DISABLED_TEXT%;
   background-color:%DISABLED_BACKGROUND%;
}
.twikiInputFieldReadOnly {
   color:%GRAYED_TEXT_COLOR%;
}
.twikiSelect {
   border-color:%INPUT_FIELD_BORDERS%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputFieldDisabled,
.twikiSelectDisabled {
   color:%DISABLED_TEXT%;
   border-color:%INPUT_FIELD_BORDERS%;
   background-color:%DISABLED_BACKGROUND%;
}
.twikiInputFieldBeforeFocus {
   color:%MUTED_TEXT%;
}

/*   -----------------------------------------------------------
   Plugin elements
   -----------------------------------------------------------   */

/* TablePlugin */
.twikiTable,
.twikiTable td,
.twikiTable th {
   border-color:%TABLE_BORDER%;
}
.twikiTable th a:link,
.twikiTable th a:visited,
.twikiTable th a font {
   color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
}

/* TwistyContrib */
.twistyPlaceholder {
   color:%GRAYED_OUT_TEXT%;
}
a:hover.twistyTrigger {
   color:%LINK_TEXT_HOVER%;
}

/* TipsContrib */
.tipsOfTheDay {
}

/* RevCommentPlugin */
.revComment .patternTopicAction {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
}

/*   -----------------------------------------------------------
   TWiki styles
   -----------------------------------------------------------   */

.twikiGrayText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:link,
.twikiGrayText a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:hover {
   color:%LINK_TEXT_HOVER%;
}

table.twikiFormTable th.twikiFormTableHRow,
table.twikiFormTable td.twikiFormTableRow {
   color:%MUTED_TEXT%;
}
.twikiEditForm {
   color:%MAIN_TEXT_COLOR%;
}
.twikiEditForm .twikiFormTable,
.twikiEditForm .twikiFormTable th,
.twikiEditForm .twikiFormTable td {
   border-color:%TABLE_BORDER%;
}
/* use a different table background color mix: no odd/even rows, no white background */
.twikiEditForm .twikiFormTable td  {
   background-color:%TABLE_DATA_MIX_BACKGROUND%;
}
.twikiEditForm .twikiFormTable th {
   background-color:%TABLE_DATA_ODD_BACKGROUND%;
}
.patternContent .twikiAttachments,
.patternContent .twikiForm {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%TABLE_BORDER%;
}
.twikiAttachments table,
table.twikiFormTable {
   border-color:%TABLE_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments table {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments td, 
.twikiAttachments th {
   border-color:%TABLE_BORDER%;
}
.twikiAttachments .twikiTable th font,
table.twikiFormTable th.twikiFormTableHRow font {
   color:%LINK_TEXT_NORMAL%;
}

.twikiFormSteps {
   background-color:%ACTIVE_FORM_BACKGROUND%;
   border-color:%FORM_STEP_BORDER%;
}
.twikiFormStep {
   border-color:%FORM_STEP_BORDER%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
   color:%FORM_HEADER_TEXT%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
   background-color:transparent;
}
.twikiActionFormStepSign {
   color:%FORM_HEADER_TEXT%;
}
.twikiToc .twikiTocTitle {
   color:%MUTED_TEXT%;
}
.twikiBroadcastMessage {
   background-color:%NOTIFICATION_BACKGROUND%;
}
.twikiNotification {
   background-color:%NOTIFICATION_BACKGROUND%;
}
#twikiLogin .patternLoginNotification {
   background-color:%MAIN_BACKGROUND_COLOR%;
   border-color:%ALERT_BORDER%;
}
.twikiHelp {
   background-color:%INFO_BACKGROUND%;
}
.twikiHelp {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
.twikiBroadcastMessage b,
.twikiBroadcastMessage strong {
   color:%ALERT_TEXT%;
}
.twikiAlert,
.twikiAlert code {
   color:%ALERT_TEXT%;
}
.twikiEmulatedLink {
   color:%LINK_TEXT_NORMAL%;
}
.twikiPageForm table {
   border-color:%TABLE_BORDER%;
   background:%MAIN_BACKGROUND_COLOR%;
}
.twikiPageForm hr {
   border-color:%FORM_BORDER%;
   background-color:%FORM_BORDER%;
   color:%FORM_BORDER%;
}
.twikiAccessKey {
   color:inherit;
   border-color:%GRAYED_OUT_TEXT%;
}
a:link .twikiAccessKey,
a:visited .twikiAccessKey {
   color:inherit;
}
a:hover .twikiAccessKey {
   color:inherit;
}
.twikiImage img {
   border-color:%IMAGE_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
#patternTopBar .twikiImage img {
   background-color:transparent;
}
.twikiImage a:hover img {
   border-color:%LINK_BACKGROUND_HOVER%;
}

/*   -----------------------------------------------------------
   Pattern skin specific elements
   -----------------------------------------------------------   */
#patternPage {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.patternHomePath a:link,
.patternHomePath a:visited {
   border-color:%NEUTRAL_BORDER%;
   color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternTop a:hover {
   border:none;
   color:%LINK_TEXT_HOVER%;
}
.patternHomePath .patternRevInfo,
.patternHomePath .patternRevInfo a:link,
.patternHomePath .patternRevInfo a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.patternHomePath .patternRevInfo a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* Left bar */
#patternLeftBarContents {
   color:%GENERAL_TEXT%;
}
#patternLeftBarContents hr {
   color:%FORM_STEP_BORDER%;
   background-color:%FORM_STEP_BORDER%;
}
#patternLeftBarContents a:link,
#patternLeftBarContents a:visited {
   color:%SIDE_BAR_LINK_TEXT%;
}
#patternLeftBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents .patternLeftBarPersonal,
#patternLeftBarContents .patternWebIndicator {
   border-color:#dadada;
}
#patternLeftBarContents b,
#patternLeftBarContents strong {
   color:%HEADER_TEXT%;
}

.patternTopicActions {
   border-color:%TABLE_BORDER%;
   background-color:%TOPIC_ACTION_BACKGROUND%;
   color:%MUTED_TEXT%;
}
.patternTopicAction {
   border-color:%TABLE_BORDER%;
}
.patternTopicAction s,
.patternTopicAction strike {
   color:%DISABLED_TEXT%;
}
.patternTopicAction .twikiSeparator {
   color:%SEPARATOR_BORDER%;
}
.patternActionButtons a:link,
.patternActionButtons a:visited {
   color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternActionButtons a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternTopicAction .twikiAccessKey {
   color:%LINK_TEXT_ACTION_BUTTON%;
   border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternTopicAction a:hover .twikiAccessKey {
   color:%LINK_TEXT_HOVER%;
}
.patternTopicAction label {
   color:%GENERAL_TEXT%;
}
.patternHelpCol {
   color:%GRAYED_OUT_TEXT%;
}
.patternSigLine {
   color:%MUTED_TEXT%;
}
.patternToolBar a:link .twikiAccessKey,
.patternToolBar a:visited .twikiAccessKey {
   color:inherit;
   border-color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternToolBar a:hover .twikiAccessKey {
   background-color:transparent;
   color:inherit;
   border-color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternSaveHelp {
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* WebSearch, WebSearchAdvanced */
table#twikiSearchTable {
   border-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable th,
table#twikiSearchTable td {
   background-color:%GENERAL_BACKGROUND%;
   border-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable hr {
   border-color:%FORM_STEP_BORDER%;
   background-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable th {
   color:%MAIN_TEXT_COLOR%;
}

/*   -----------------------------------------------------------
   Search results
   styles and overridden styles used in search.pattern.tmpl
   -----------------------------------------------------------   */

h3.patternSearchResultsHeader,
h4.patternSearchResultsHeader {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
h4.patternSearchResultsHeader {
   color:%MAIN_TEXT_COLOR%;
}
.patternNoViewPage h4.patternSearchResultsHeader {
   color:%HEADER_TEXT%;
}
.patternSearchResult .twikiBottomRow {
   border-color:%MINOR_SEPARATOR_BORDER%;
}
.patternSearchResult .twikiAlert {
   color:%ALERT_TEXT%;
}
.patternSearchResult .twikiSummary .twikiAlert {
   color:%ALERT_TEXT_MUTED%;
}
.patternSearchResult .twikiNew {
   background-color:%NEW_BACKGROUND%;
   border-color:%NEW_TEXT%;
   color:%NEW_TEXT%;
}
.patternViewPage .patternSearchResultsBegin {
   border-color:%TABLE_BORDER%;
}

/* Search results in book view format */

.patternBookView .twikiTopRow {
   background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
   color:%MUTED_TEXT%;
}
.patternBookView .twikiBottomRow {
   border-color:%TABLE_BORDER%;
}
.patternBookView .patternSearchResultCount {
   color:%GRAYED_OUT_TEXT%;
}

/* edit.pattern.tmpl */

/* preview.pattern.tmpl */

.twikiPreviewArea {
   border-color:%ALERT_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* rdiff.pattern.tmpl */

.patternDiff {
   border-color:%TABLE_HEADER_BACKGROUND%;
}
#patternMainContents .patternDiff h4.patternSearchResultsHeader {
   background-color:%TABLE_HEADER_BACKGROUND%;
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
#patternMainContents .patternDiff h4.patternSearchResultsHeader a:link,
#patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited {
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
tr.twikiDiffDebug td {
   border-color:%TABLE_BORDER%;
}
.patternDiffPage .twikiDiffTable th {
   background-color:%DIFF_HEADER_BACKGROUND%;
}
/* Changed */
.twikiDiffChangedHeader,
tr.twikiDiffDebug .twikiDiffChangedText,
tr.twikiDiffDebug .twikiDiffChangedText {
   background:#9f9; /* green - do not change */
}
/* Deleted */
.twikiDiffDeletedHeader,
tr.twikiDiffDebug .twikiDiffDeletedMarker,
tr.twikiDiffDebug .twikiDiffDeletedText {
   background-color:#f99; /* red - do not change */
}
/* Added */
.twikiDiffAddedHeader,
tr.twikiDiffDebug .twikiDiffAddedMarker,
tr.twikiDiffDebug .twikiDiffAddedText {
   background-color:#ccf; /* violet - do not change */
}
/* Unchanged */
tr.twikiDiffDebug .twikiDiffUnchangedText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiDiffUnchangedTextContents { }
.twikiDiffLineNumberHeader {
   background-color:%DIFF_HEADER_BACKGROUND%;
}


/* IMAGES */
/* image positions are set here as well as these are dependent on the image */

h2,
.patternTopicAction {
   background-image:url(bg_action_gradient.gif);
   background-repeat:repeat-x;
}
.twikiToc li {
   background-image:url(bullet-toc.gif);
   background-repeat:no-repeat;
   background-position:0 .4em;
}
#patternOuter,
#patternTopBar {
   /* gradient yellow of left bar and main */
   background-image:url(bg_outer_gradient.gif);
   background-repeat:repeat-x;
}
.patternPrintPage #patternOuter {
   background:#fff; /* white - do not change */
}
.twikiPageForm table,
table#twikiSearchTable td.twikiFirstRow {
   background-image:url(form_gradient.gif);
   background-repeat:repeat-x;
   background-color:#f5f5f5;
}
.twikiSubmit,
.twikiSubmitDisabled {
   background-image:url(bg_submit_gradient.gif);
   background-repeat:repeat-x;
}
.twikiSubmit,
a.twikiSubmit:link,
a.twikiSubmit:visited {
   background-position:0px 0px;
   background-color:#06c;
   border-color:#abcdf0 #0048b8 #0048b8 #abcdf0;
   color:#fff;
}
.twikiSubmit:hover,
a.twikiSubmit:hover {
   background-position:0px -80px;
   background-color:#0047b7;
   border-color:#98bce9 #0031a4 #0031a4 #98bce9;
   color:#fff;
}
.twikiSubmit:active,
a.twikiSubmit:active {
   background-position:0px -160px;
   background-color:#73ace6;
   border-color:#0031a4 #98bce9 #98bce9 #0031a4;
   color:#fff;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:hover,
.twikiSubmitDisabled:active {
   background-position:0px -240px;
   background-color:#d9e8f7;
   border-color:#f5f9fd #ccc #ccc #f5f9fd;
   color:#ccc;
}
.twikiButton,
a.twikiButton:link,
a.twikiButton:visited {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px 0px;
   border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
   background-color:#dbd9cf;
   color:#333;
}
.twikiChangeFormButtonHolder .twikiButton {
   background-color:#fff;
   background-image:none;
   color:#06c;
}
.twikiChangeFormButtonHolder .twikiButton:hover,
.twikiChangeFormButtonHolder .twikiButton:active {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
}
.twikiButton:hover,
.twikiChangeFormButtonHolder .twikiButton:hover,
a.twikiButton:hover {
   background-position:0px -80px;
   border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
   background-color:#c2bfae;
   color:#222;
}
.twikiButton:active,
.twikiChangeFormButtonHolder .twikiButton:active,
a.twikiButton:active {
   background-position:0px -160px;
   border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
   background-color:#e8e5d7;
   color:#222;
}
.twikiButtonDisabled,
.twikiButtonDisabled:hover,
.twikiButtonDisabled:active {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px -240px;
   border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
   background-color:#edece6;
   color:#bbb;
}
.twikiButtonCancel {
   background-image:url(bg_buttoncancel_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px 0px;
   border-color:#f3ddd7 #b5706a #b5706a #f3ddd7;
   background-color:#cc867f;
   color:#333;
}
.twikiButtonCancel:hover {
   background-position:0px -80px;
   border-color:#eacac1 #9f564f #9f564f #eacac1;
   background-color:#b26259;
   color:#222;
}
.twikiButtonCancel:active {
   background-position:0px -160px;
   border-color:#9f564f #eacac1 #eacac1 #9f564f;
   background-color:#e5bdb1;
   color:#222;
}
.patternToolBar span a:link,
.patternToolBar span a:visited,
.patternToolBar span s,
.patternToolBar span strike {
   background-image:url(bg_button_small_gradient.gif);
   background-repeat:repeat-x;
}
.patternToolBar span a:link,
.patternToolBar span a:visited {
   background-position:0px 0px;
   border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
   background-color:#dbd9cf;
   color:#333;
}
.patternToolBar span a:hover {
   background-position:0px -80px;
   border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
   background-color:#c2bfae;
   color:#222;
}
.patternToolBar span a:active {
   background-position:0px -160px;
   border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
   background-color:#e8e5d7;
   color:#222;
}
.patternToolBar span s,
.patternToolBar span strike {
   background-position:0px -240px;
   border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
   background-color:#edece6;
   color:#bbb;
}
.patternTextareaButton {
   border-color:#fffefd #b8b6ad #b8b6ad #fffefd;
   overflow:hidden;
}
.patternButtonFontSelector {
   background-image:url(button_font_selector.gif);
   width:33px;
   height:16px;
}
.patternButtonFontSelectorProportional {
   background-position:0 0;
}
.patternButtonFontSelectorMonospace {
   background-position:0 -16px;
}
.patternButtonEnlarge,
.patternButtonShrink {
   background-image:url(button_arrow.gif);
   width:16px;
   height:16px;
}
.patternButtonEnlarge {
   background-position:0 0;
}
.patternButtonEnlarge:hover {
   background-position:0 -42px;
}
.patternButtonEnlarge:active {
   background-position:0 -84px;
}
.patternButtonShrink {
   background-position:16px 0;
}
.patternButtonShrink:hover {
   background-position:16px -42px;
}
.patternButtonShrink:active {
   background-position:16px -84px;
}
.twikiBroadcastMessage,
.twikiNotification {
   background-image:url(background_alert.gif);
   background-repeat:repeat-x;
}

/* common settings */
.patternLeftBarPersonal li,
li.patternLogOut,
li.patternLogIn {
   padding-left:13px;
   background-position:0 .4em;
   background-repeat:no-repeat;
}
.patternLeftBarPersonal li {
   background-image:url(bullet-personal_sidebar.gif);
}
.patternLeftBarPersonal li.patternLogOut {
   background-image:url(bullet-lock.gif);
}
.patternLeftBarPersonal li.patternLogIn {
   background-image:url(bullet-lock.gif);
}
%ENDATTACH%

Revision 52011-05-04 - TWikiContributor

 

Color scheme settings for PatternSkin

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.

AttachContentPlugin is not installed.

Usage

Step 1

Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/theme-colors.css

Step 2

Edit this topic, and change the color variables as you like.

Step 3

Save the topic. This will generate an attachment to topic PatternSkin.

Info For more help on customizing styles, see PatternSkinCustomization.

Color variables

On this page:

Logical groupings

Text

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff

GRAYED_TEXT_COLOR

  • Set GRAYED_TEXT_COLOR = #777

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #630000

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #777

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #777

Links

LINK_TEXT_NORMAL Link normal text

  • Set LINK_TEXT_NORMAL = #4571d0

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =

LINK_TEXT_NORMAL_VISITED Link normal text visited

  • Set LINK_TEXT_NORMAL_VISITED = #666

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

  • Set LINK_TEXT_ACTION_BUTTON = #be000a

LINK_TEXT_HOVER Link hover text

  • Set LINK_TEXT_HOVER = #fff

LINK_BACKGROUND_HOVER Link background hover

  • Set LINK_BACKGROUND_HOVER = #ce000f

SIDE_BAR_LINK_TEXT Side bar link text

  • Set SIDE_BAR_LINK_TEXT = #444

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

  • Set DISABLED_TEXT = #aaa

DISABLED_BACKGROUND Disabled background

  • Set DISABLED_BACKGROUND = #fafaf8

BUTTON_BORDERS_DISABLED Disabled button borders

  • Set BUTTON_BORDERS_DISABLED = #fff #ccc #ccc #fff

'New'

NEW_TEXT New text (green)

  • Set NEW_TEXT = #049804

NEW_BACKGROUND New background (light green)

  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00

Buttons

BUTTON_TEXT Button text color (dark gray)

  • Set BUTTON_TEXT = #000

BUTTON_BORDERS Button borders

  • Set BUTTON_BORDERS = #fff #888 #888 #fff

BUTTON_BACKGROUND Button background

  • Set BUTTON_BACKGROUND = #e2e3e3

BUTTON_CANCEL_BACKGROUND Cancel button background

  • Set BUTTON_CANCEL_BACKGROUND = #f2d5d0

SUBMIT_BUTTON_BACKGROUND Submit button background

  • Set SUBMIT_BUTTON_BACKGROUND = #06c

SUBMIT_BUTTON_BORDER_TEXT Submit button text color

  • Set SUBMIT_BUTTON_BORDER_TEXT = #fff

SELECT_BORDER Select border

  • Set SELECT_BORDER = #888

Background colors

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

  • Set SIDE_BAR_BACKGROUND = #f6f6f6

NEUTRAL_BACKGROUND

  • Set NEUTRAL_BACKGROUND = #fdfaf1

TOP_BAR_BACKGROUND Top bar background

  • Set TOP_BAR_BACKGROUND = #fefcf7

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #f6f6f6

TOPIC_ACTION_BACKGROUND Topic action row

  • Set TOPIC_ACTION_BACKGROUND = #f6f6f6

HEADER_BACKGROUND h2, h3

  • Set HEADER_BACKGROUND = #f6f6f6

DIFF_HEADER_BACKGROUND Diff header (dark gray)

  • Set DIFF_HEADER_BACKGROUND = #ccc

NOTIFICATION_BACKGROUND Info, broadcast message and notifications

  • Set NOTIFICATION_BACKGROUND = #ffe67b

INFO_BACKGROUND

  • Set INFO_BACKGROUND = #ffe67b

Border colors

NEUTRAL_BORDER Info (light gray)

  • Set NEUTRAL_BORDER = #ddd

SEPARATOR_BORDER

  • Set SEPARATOR_BORDER = #e2e2e2

MINOR_SEPARATOR_BORDER Header H3..H6 bottom

  • Set MINOR_SEPARATOR_BORDER = #e2e2e2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #dadada

IMAGE_BORDER Image border

  • Set IMAGE_BORDER = #eee

FORM_STEP_BORDER Form step border

  • Set FORM_STEP_BORDER = #e2e2e2

NOTIFICATION_BORDER Broadcast message

  • Set NOTIFICATION_BORDER = #ffdf4c

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
  • Set TABLE_DATA_ODD_BACKGROUND = #f0f6fb
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc

TABLE_BORDER Table border, sup (light neutral tone)

  • Set TABLE_BORDER = #e2e2e2

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #cfcfcf

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #fbfbfb

FORMFIELD_ACTIVE Active form field

  • Set FORMFIELD_ACTIVE = #ffffe0

FORM_HEADER_TEXT Header text on form background

  • Set FORM_HEADER_TEXT = #036 

<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing! 

%STARTATTACH{"theme-colors.css" web="%SYSTEMWEB%" topic="PatternSkin"}%
/* PatternSkin colors */
/* Generated by AttachContentPlugin from %WEB%.%TOPIC% */

/* LAYOUT ELEMENTS */

#patternTopBar {
   border-color:%SEPARATOR_BORDER%;
   background-color:%TOP_BAR_BACKGROUND%;
}
#patternMain { /* don't set a background here; use patternOuter */ }
#patternOuter {
   background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternLeftBar,
#patternWrapper {
   background-color:%SIDE_BAR_BACKGROUND%;
}
#patternBottomBar {
   border-color:%SEPARATOR_BORDER%;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
   color:%GRAYED_OUT_TEXT%;
}
#patternBottomBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* GENERAL HTML ELEMENTS */

html body {
   background-color:%MAIN_BACKGROUND_COLOR%;
   color:%MAIN_TEXT_COLOR%;
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
   background-color:transparent;
}
hr {
   color:%SEPARATOR_BORDER%;
   background-color:%SEPARATOR_BORDER%;
}
pre, code, tt {
   color:%CODE_TEXT%;
}
blockquote {
   background-color:%ACTIVE_FORM_BACKGROUND%;
   border-color:%ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %NEUTRAL_BORDER%;

}
blockquote h2 {
   background:none;
}
h1, h2, h3, h4, h5, h6 {
   color:%HEADER_TEXT%;
}
h2 {
   background-color:%HEADER_BACKGROUND%;
   border-color:%MINOR_SEPARATOR_BORDER%;
}
h3, h4, h5, h6 {
   border-color:%MINOR_SEPARATOR_BORDER%;
}
/* to override old Render.pm coded font color style */
.twikiNewLink font {
   color:inherit;
}
.twikiNewLink a:link sup,
.twikiNewLink a:visited sup {
   color:%MUTED_TEXT%;
   border-color:%NEUTRAL_BORDER%;
}
.twikiNewLink a:hover sup {
   background-color:%LINK_BACKGROUND_HOVER%;
   color:%LINK_TEXT_HOVER%;
   border-color:%LINK_BACKGROUND_HOVER%;
}
.twikiNewLink {
   border-color:%NEUTRAL_BORDER%;
}
:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
   color:%LINK_TEXT_NORMAL%;
   background-color:transparent;
}
:link:hover,
:visited:hover {
   color:%LINK_TEXT_HOVER%;
   background-color:%LINK_BACKGROUND_HOVER%;
   background-image:none;
}
:link:hover img,
:visited:hover img {
   background-color:transparent;
}
.patternTopic a:visited {
   color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternTopic a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternMainContents h1 a:link, #patternMainContents h1 a:visited,
#patternMainContents h2 a:link, #patternMainContents h2 a:visited,
#patternMainContents h3 a:link, #patternMainContents h3 a:visited,
#patternMainContents h4 a:link, #patternMainContents h4 a:visited,
#patternMainContents h5 a:link, #patternMainContents h5 a:visited,
#patternMainContents h6 a:link, #patternMainContents h6 a:visited {
   color:%HEADER_TEXT%;
}
#patternMainContents h1 a:hover,
#patternMainContents h2 a:hover,
#patternMainContents h3 a:hover,
#patternMainContents h4 a:hover,
#patternMainContents h5 a:hover,
#patternMainContents h6 a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternTopic .twikiUnvisited a:visited {
   color:%LINK_TEXT_NORMAL%;
}
.patternTopic .twikiUnvisited a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* Form elements */

textarea,
input,
select {
   border-color:%FORM_INPUT_BORDER%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit,
.twikiButton {
   border-color:%BUTTON_BORDERS%;
}
.twikiSubmit {
   color:%SUBMIT_BUTTON_BORDER_TEXT%;
   background-color:%SUBMIT_BUTTON_BACKGROUND%;
}
.twikiButton {
   color:%BUTTON_TEXT%;
   background-color:%BUTTON_BACKGROUND%;
}
.twikiButtonCancel {
   color:%BUTTON_TEXT%;
   background-color:%BUTTON_CANCEL_BACKGROUND%;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:active {
   border-color:%BUTTON_BORDERS_DISABLED%;
   color:%DISABLED_TEXT%;
   background-color:%ACTIVE_FORM_BACKGROUND%;
}
.twikiTextarea,
.twikiInputField,
.twikiInputFieldDisabled,
.twikiInputFieldReadOnly,
.twikiSelect {
   border-color:%INPUT_FIELD_BORDERS%;
}
.twikiTextarea,
.twikiInputField,
.twikiSelect {
   color:%MAIN_TEXT_COLOR%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputField:active,
.twikiInputField:focus,
.twikiInputFieldFocus {
   background-color:%FORMFIELD_ACTIVE%;
}

.twikiTextareaRawView {
   color:%GENERAL_TEXT%;
}
.twikiInputFieldDisabled {
   color:%DISABLED_TEXT%;
   background-color:%DISABLED_BACKGROUND%;
}
.twikiInputFieldReadOnly {
   color:%GRAYED_TEXT_COLOR%;
}
.twikiSelect {
   border-color:%INPUT_FIELD_BORDERS%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputFieldDisabled,
.twikiSelectDisabled {
   color:%DISABLED_TEXT%;
   border-color:%INPUT_FIELD_BORDERS%;
   background-color:%DISABLED_BACKGROUND%;
}
.twikiInputFieldBeforeFocus {
   color:%MUTED_TEXT%;
}

/*   -----------------------------------------------------------
   Plugin elements
   -----------------------------------------------------------   */

/* TablePlugin */
.twikiTable,
.twikiTable td,
.twikiTable th {
   border-color:%TABLE_BORDER%;
}
.twikiTable th a:link,
.twikiTable th a:visited,
.twikiTable th a font {
   color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
}

/* TwistyContrib */
.twistyPlaceholder {
   color:%GRAYED_OUT_TEXT%;
}
a:hover.twistyTrigger {
   color:%LINK_TEXT_HOVER%;
}

/* TipsContrib */
.tipsOfTheDay {
}

/* RevCommentPlugin */
.revComment .patternTopicAction {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
}

/*   -----------------------------------------------------------
   TWiki styles
   -----------------------------------------------------------   */

.twikiGrayText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:link,
.twikiGrayText a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:hover {
   color:%LINK_TEXT_HOVER%;
}

table.twikiFormTable th.twikiFormTableHRow,
table.twikiFormTable td.twikiFormTableRow {
   color:%MUTED_TEXT%;
}
.twikiEditForm {
   color:%MAIN_TEXT_COLOR%;
}
.twikiEditForm .twikiFormTable,
.twikiEditForm .twikiFormTable th,
.twikiEditForm .twikiFormTable td {
   border-color:%TABLE_BORDER%;
}
/* use a different table background color mix: no odd/even rows, no white background */
.twikiEditForm .twikiFormTable td  {
   background-color:%TABLE_DATA_MIX_BACKGROUND%;
}
.twikiEditForm .twikiFormTable th {
   background-color:%TABLE_DATA_ODD_BACKGROUND%;
}
.patternContent .twikiAttachments,
.patternContent .twikiForm {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%TABLE_BORDER%;
}
.twikiAttachments table,
table.twikiFormTable {
   border-color:%TABLE_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments table {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments td, 
.twikiAttachments th {
   border-color:%TABLE_BORDER%;
}
.twikiAttachments .twikiTable th font,
table.twikiFormTable th.twikiFormTableHRow font {
   color:%LINK_TEXT_NORMAL%;
}

.twikiFormSteps {
   background-color:%ACTIVE_FORM_BACKGROUND%;
   border-color:%FORM_STEP_BORDER%;
}
.twikiFormStep {
   border-color:%FORM_STEP_BORDER%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
   color:%FORM_HEADER_TEXT%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
   background-color:transparent;
}
.twikiActionFormStepSign {
   color:%FORM_HEADER_TEXT%;
}
.twikiToc .twikiTocTitle {
   color:%MUTED_TEXT%;
}
.twikiBroadcastMessage {
   background-color:%NOTIFICATION_BACKGROUND%;
}
.twikiNotification {
   background-color:%NOTIFICATION_BACKGROUND%;
}
#twikiLogin .patternLoginNotification {
   background-color:%MAIN_BACKGROUND_COLOR%;
   border-color:%ALERT_BORDER%;
}
.twikiHelp {
   background-color:%INFO_BACKGROUND%;
}
.twikiHelp {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
.twikiBroadcastMessage b,
.twikiBroadcastMessage strong {
   color:%ALERT_TEXT%;
}
.twikiAlert,
.twikiAlert code {
   color:%ALERT_TEXT%;
}
.twikiEmulatedLink {
   color:%LINK_TEXT_NORMAL%;
}
.twikiPageForm table {
   border-color:%TABLE_BORDER%;
   background:%MAIN_BACKGROUND_COLOR%;
}
.twikiPageForm hr {
   border-color:%FORM_BORDER%;
   background-color:%FORM_BORDER%;
   color:%FORM_BORDER%;
}
.twikiAccessKey {
   color:inherit;
   border-color:%GRAYED_OUT_TEXT%;
}
a:link .twikiAccessKey,
a:visited .twikiAccessKey {
   color:inherit;
}
a:hover .twikiAccessKey {
   color:inherit;
}
.twikiImage img {
   border-color:%IMAGE_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
#patternTopBar .twikiImage img {
   background-color:transparent;
}
.twikiImage a:hover img {
   border-color:%LINK_BACKGROUND_HOVER%;
}

/*   -----------------------------------------------------------
   Pattern skin specific elements
   -----------------------------------------------------------   */
#patternPage {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.patternHomePath a:link,
.patternHomePath a:visited {
   border-color:%NEUTRAL_BORDER%;
   color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternTop a:hover {
   border:none;
   color:%LINK_TEXT_HOVER%;
}
.patternHomePath .patternRevInfo,
.patternHomePath .patternRevInfo a:link,
.patternHomePath .patternRevInfo a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.patternHomePath .patternRevInfo a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* Left bar */
#patternLeftBarContents {
   color:%GENERAL_TEXT%;
}
#patternLeftBarContents hr {
   color:%FORM_STEP_BORDER%;
   background-color:%FORM_STEP_BORDER%;
}
#patternLeftBarContents a:link,
#patternLeftBarContents a:visited {
   color:%SIDE_BAR_LINK_TEXT%;
}
#patternLeftBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents .patternLeftBarPersonal,
#patternLeftBarContents .patternWebIndicator {
   border-color:#dadada;
}
#patternLeftBarContents b,
#patternLeftBarContents strong {
   color:%HEADER_TEXT%;
}

.patternTopicActions {
   border-color:%TABLE_BORDER%;
   background-color:%TOPIC_ACTION_BACKGROUND%;
   color:%MUTED_TEXT%;
}
.patternTopicAction {
   border-color:%TABLE_BORDER%;
}
.patternTopicAction s,
.patternTopicAction strike {
   color:%DISABLED_TEXT%;
}
.patternTopicAction .twikiSeparator {
   color:%SEPARATOR_BORDER%;
}
.patternActionButtons a:link,
.patternActionButtons a:visited {
   color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternActionButtons a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternTopicAction .twikiAccessKey {
   color:%LINK_TEXT_ACTION_BUTTON%;
   border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternTopicAction a:hover .twikiAccessKey {
   color:%LINK_TEXT_HOVER%;
}
.patternTopicAction label {
   color:%GENERAL_TEXT%;
}
.patternHelpCol {
   color:%GRAYED_OUT_TEXT%;
}
.patternSigLine {
   color:%MUTED_TEXT%;
}
.patternToolBar a:link .twikiAccessKey,
.patternToolBar a:visited .twikiAccessKey {
   color:inherit;
   border-color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternToolBar a:hover .twikiAccessKey {
   background-color:transparent;
   color:inherit;
   border-color:%LINK_TEXT_NORMAL_VISITED%;
}
.patternSaveHelp {
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* WebSearch, WebSearchAdvanced */
table#twikiSearchTable {
   border-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable th,
table#twikiSearchTable td {
   background-color:%GENERAL_BACKGROUND%;
   border-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable hr {
   border-color:%FORM_STEP_BORDER%;
   background-color:%FORM_STEP_BORDER%;
}
table#twikiSearchTable th {
   color:%MAIN_TEXT_COLOR%;
}

/*   -----------------------------------------------------------
   Search results
   styles and overridden styles used in search.pattern.tmpl
   -----------------------------------------------------------   */

h3.patternSearchResultsHeader,
h4.patternSearchResultsHeader {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
h4.patternSearchResultsHeader {
   color:%MAIN_TEXT_COLOR%;
}
.patternNoViewPage h4.patternSearchResultsHeader {
   color:%HEADER_TEXT%;
}
.patternSearchResult .twikiBottomRow {
   border-color:%MINOR_SEPARATOR_BORDER%;
}
.patternSearchResult .twikiAlert {
   color:%ALERT_TEXT%;
}
.patternSearchResult .twikiSummary .twikiAlert {
   color:%ALERT_TEXT_MUTED%;
}
.patternSearchResult .twikiNew {
   background-color:%NEW_BACKGROUND%;
   border-color:%NEW_TEXT%;
   color:%NEW_TEXT%;
}
.patternViewPage .patternSearchResultsBegin {
   border-color:%TABLE_BORDER%;
}

/* Search results in book view format */

.patternBookView .twikiTopRow {
   background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
   color:%MUTED_TEXT%;
}
.patternBookView .twikiBottomRow {
   border-color:%TABLE_BORDER%;
}
.patternBookView .patternSearchResultCount {
   color:%GRAYED_OUT_TEXT%;
}

/* edit.pattern.tmpl */

/* preview.pattern.tmpl */

.twikiPreviewArea {
   border-color:%ALERT_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* rdiff.pattern.tmpl */

.patternDiff {
   border-color:%TABLE_HEADER_BACKGROUND%;
}
#patternMainContents .patternDiff h4.patternSearchResultsHeader {
   background-color:%TABLE_HEADER_BACKGROUND%;
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
#patternMainContents .patternDiff h4.patternSearchResultsHeader a:link,
#patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited {
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
tr.twikiDiffDebug td {
   border-color:%TABLE_BORDER%;
}
.patternDiffPage .twikiDiffTable th {
   background-color:%DIFF_HEADER_BACKGROUND%;
}
/* Changed */
.twikiDiffChangedHeader,
tr.twikiDiffDebug .twikiDiffChangedText,
tr.twikiDiffDebug .twikiDiffChangedText {
   background:#9f9; /* green - do not change */
}
/* Deleted */
.twikiDiffDeletedHeader,
tr.twikiDiffDebug .twikiDiffDeletedMarker,
tr.twikiDiffDebug .twikiDiffDeletedText {
   background-color:#f99; /* red - do not change */
}
/* Added */
.twikiDiffAddedHeader,
tr.twikiDiffDebug .twikiDiffAddedMarker,
tr.twikiDiffDebug .twikiDiffAddedText {
   background-color:#ccf; /* violet - do not change */
}
/* Unchanged */
tr.twikiDiffDebug .twikiDiffUnchangedText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiDiffUnchangedTextContents { }
.twikiDiffLineNumberHeader {
   background-color:%DIFF_HEADER_BACKGROUND%;
}


/* IMAGES */
/* image positions are set here as well as these are dependent on the image */

h2,
.patternTopicAction {
   background-image:url(bg_action_gradient.gif);
   background-repeat:repeat-x;
}
.twikiToc li {
   background-image:url(bullet-toc.gif);
   background-repeat:no-repeat;
   background-position:0 .4em;
}
#patternOuter,
#patternTopBar {
   /* gradient yellow of left bar and main */
   background-image:url(bg_outer_gradient.gif);
   background-repeat:repeat-x;
}
.patternPrintPage #patternOuter {
   background:#fff; /* white - do not change */
}
.twikiPageForm table,
table#twikiSearchTable td.twikiFirstRow {
   background-image:url(form_gradient.gif);
   background-repeat:repeat-x;
   background-color:#f5f5f5;
}
.twikiSubmit,
.twikiSubmitDisabled {
   background-image:url(bg_submit_gradient.gif);
   background-repeat:repeat-x;
}
.twikiSubmit,
a.twikiSubmit:link,
a.twikiSubmit:visited {
   background-position:0px 0px;
   background-color:#06c;
   border-color:#abcdf0 #0048b8 #0048b8 #abcdf0;
   color:#fff;
}
.twikiSubmit:hover,
a.twikiSubmit:hover {
   background-position:0px -80px;
   background-color:#0047b7;
   border-color:#98bce9 #0031a4 #0031a4 #98bce9;
   color:#fff;
}
.twikiSubmit:active,
a.twikiSubmit:active {
   background-position:0px -160px;
   background-color:#73ace6;
   border-color:#0031a4 #98bce9 #98bce9 #0031a4;
   color:#fff;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:hover,
.twikiSubmitDisabled:active {
   background-position:0px -240px;
   background-color:#d9e8f7;
   border-color:#f5f9fd #ccc #ccc #f5f9fd;
   color:#ccc;
}
.twikiButton,
a.twikiButton:link,
a.twikiButton:visited {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px 0px;
   border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
   background-color:#dbd9cf;
   color:#333;
}
.twikiChangeFormButtonHolder .twikiButton {
   background-color:#fff;
   background-image:none;
   color:#06c;
}
.twikiChangeFormButtonHolder .twikiButton:hover,
.twikiChangeFormButtonHolder .twikiButton:active {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
}
.twikiButton:hover,
.twikiChangeFormButtonHolder .twikiButton:hover,
a.twikiButton:hover {
   background-position:0px -80px;
   border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
   background-color:#c2bfae;
   color:#222;
}
.twikiButton:active,
.twikiChangeFormButtonHolder .twikiButton:active,
a.twikiButton:active {
   background-position:0px -160px;
   border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
   background-color:#e8e5d7;
   color:#222;
}
.twikiButtonDisabled,
.twikiButtonDisabled:hover,
.twikiButtonDisabled:active {
   background-image:url(bg_button_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px -240px;
   border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
   background-color:#edece6;
   color:#bbb;
}
.twikiButtonCancel {
   background-image:url(bg_buttoncancel_gradient.gif);
   background-repeat:repeat-x;
   background-position:0px 0px;
   border-color:#f3ddd7 #b5706a #b5706a #f3ddd7;
   background-color:#cc867f;
   color:#333;
}
.twikiButtonCancel:hover {
   background-position:0px -80px;
   border-color:#eacac1 #9f564f #9f564f #eacac1;
   background-color:#b26259;
   color:#222;
}
.twikiButtonCancel:active {
   background-position:0px -160px;
   border-color:#9f564f #eacac1 #eacac1 #9f564f;
   background-color:#e5bdb1;
   color:#222;
}
.patternToolBar span a:link,
.patternToolBar span a:visited,
.patternToolBar span s,
.patternToolBar span strike {
   background-image:url(bg_button_small_gradient.gif);
   background-repeat:repeat-x;
}
.patternToolBar span a:link,
.patternToolBar span a:visited {
   background-position:0px 0px;
   border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
   background-color:#dbd9cf;
   color:#333;
}
.patternToolBar span a:hover {
   background-position:0px -80px;
   border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
   background-color:#c2bfae;
   color:#222;
}
.patternToolBar span a:active {
   background-position:0px -160px;
   border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
   background-color:#e8e5d7;
   color:#222;
}
.patternToolBar span s,
.patternToolBar span strike {
   background-position:0px -240px;
   border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
   background-color:#edece6;
   color:#bbb;
}
.patternTextareaButton {
   border-color:#fffefd #b8b6ad #b8b6ad #fffefd;
   overflow:hidden;
}
.patternButtonFontSelector {
   background-image:url(button_font_selector.gif);
   width:33px;
   height:16px;
}
.patternButtonFontSelectorProportional {
   background-position:0 0;
}
.patternButtonFontSelectorMonospace {
   background-position:0 -16px;
}
.patternButtonEnlarge,
.patternButtonShrink {
   background-image:url(button_arrow.gif);
   width:16px;
   height:16px;
}
.patternButtonEnlarge {
   background-position:0 0;
}
.patternButtonEnlarge:hover {
   background-position:0 -42px;
}
.patternButtonEnlarge:active {
   background-position:0 -84px;
}
.patternButtonShrink {
   background-position:16px 0;
}
.patternButtonShrink:hover {
   background-position:16px -42px;
}
.patternButtonShrink:active {
   background-position:16px -84px;
}
.twikiBroadcastMessage,
.twikiNotification {
   background-image:url(background_alert.gif);
   background-repeat:repeat-x;
}

/* common settings */
.patternLeftBarPersonal li,
li.patternLogOut,
li.patternLogIn {
   padding-left:13px;
   background-position:0 .4em;
   background-repeat:no-repeat;
}
.patternLeftBarPersonal li {
   background-image:url(bullet-personal_sidebar.gif);
}
.patternLeftBarPersonal li.patternLogOut {
   background-image:url(bullet-lock.gif);
}
.patternLeftBarPersonal li.patternLogIn {
   background-image:url(bullet-lock.gif);
}
%ENDATTACH%

Revision 42007-09-23 - TWikiContributor

Changed:
<
<

Color scheme settings for PatternSkin

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.
>
>

Color scheme settings for PatternSkin

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.
  AttachContentPlugin is not installed.

Usage

Step 1

Changed:
<
<		Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/theme-colors.css
>
>		Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put:
Added:
>
>
  • Set USERCOLORSURL = /internal/TWiki/PatternSkin/theme-colors.css
 

Step 2

Edit this topic, and change the color variables as you like.

Step 3

Changed:
<
<		Save the topic. This will generate an attachment to topic PatternSkin.
>
>		Save the topic. This will generate an attachment to topic PatternSkin.
 

Info For more help on customizing styles, see PatternSkinCustomization.

Color variables

On this page:

Logical groupings

Text

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff

GRAYED_TEXT_COLOR

  • Set GRAYED_TEXT_COLOR = #777

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #630000

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #777

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #777

Links

LINK_TEXT_NORMAL Link normal text

  • Set LINK_TEXT_NORMAL = #4571d0

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =

LINK_TEXT_NORMAL_VISITED Link normal text visited

  • Set LINK_TEXT_NORMAL_VISITED = #666

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

  • Set LINK_TEXT_ACTION_BUTTON = #be000a

LINK_TEXT_HOVER Link hover text

  • Set LINK_TEXT_HOVER = #fff

LINK_BACKGROUND_HOVER Link background hover

  • Set LINK_BACKGROUND_HOVER = #ce000f

SIDE_BAR_LINK_TEXT Side bar link text

  • Set SIDE_BAR_LINK_TEXT = #444

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

  • Set DISABLED_TEXT = #aaa

DISABLED_BACKGROUND Disabled background

  • Set DISABLED_BACKGROUND = #fafaf8

BUTTON_BORDERS_DISABLED Disabled button borders

  • Set BUTTON_BORDERS_DISABLED = #fff #ccc #ccc #fff

'New'

NEW_TEXT New text (green)

  • Set NEW_TEXT = #049804

NEW_BACKGROUND New background (light green)

  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00

Buttons

BUTTON_TEXT Button text color (dark gray)

  • Set BUTTON_TEXT = #000

BUTTON_BORDERS Button borders

  • Set BUTTON_BORDERS = #fff #888 #888 #fff

BUTTON_BACKGROUND Button background

  • Set BUTTON_BACKGROUND = #e2e3e3

BUTTON_CANCEL_BACKGROUND Cancel button background

  • Set BUTTON_CANCEL_BACKGROUND = #f2d5d0

SUBMIT_BUTTON_BACKGROUND Submit button background

  • Set SUBMIT_BUTTON_BACKGROUND = #06c

SUBMIT_BUTTON_BORDER_TEXT Submit button text color

  • Set SUBMIT_BUTTON_BORDER_TEXT = #fff

SELECT_BORDER Select border

  • Set SELECT_BORDER = #888

Background colors

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

  • Set SIDE_BAR_BACKGROUND = #f6f6f6

NEUTRAL_BACKGROUND

  • Set NEUTRAL_BACKGROUND = #fdfaf1

TOP_BAR_BACKGROUND Top bar background

  • Set TOP_BAR_BACKGROUND = #fefcf7

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #f6f6f6

TOPIC_ACTION_BACKGROUND Topic action row

  • Set TOPIC_ACTION_BACKGROUND = #f6f6f6

HEADER_BACKGROUND h2, h3

  • Set HEADER_BACKGROUND = #f6f6f6

DIFF_HEADER_BACKGROUND Diff header (dark gray)

  • Set DIFF_HEADER_BACKGROUND = #ccc

NOTIFICATION_BACKGROUND Info, broadcast message and notifications

  • Set NOTIFICATION_BACKGROUND = #ffe67b

INFO_BACKGROUND

  • Set INFO_BACKGROUND = #ffe67b

Border colors

NEUTRAL_BORDER Info (light gray)

  • Set NEUTRAL_BORDER = #ddd

SEPARATOR_BORDER

  • Set SEPARATOR_BORDER = #e2e2e2

MINOR_SEPARATOR_BORDER Header H3..H6 bottom

  • Set MINOR_SEPARATOR_BORDER = #e2e2e2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #dadada

IMAGE_BORDER Image border

  • Set IMAGE_BORDER = #eee

FORM_STEP_BORDER Form step border

  • Set FORM_STEP_BORDER = #e2e2e2

NOTIFICATION_BORDER Broadcast message

  • Set NOTIFICATION_BORDER = #ffdf4c

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
  • Set TABLE_DATA_ODD_BACKGROUND = #f0f6fb
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc

TABLE_BORDER Table border, sup (light neutral tone)

  • Set TABLE_BORDER = #e2e2e2

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #cfcfcf

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #fbfbfb

FORMFIELD_ACTIVE Active form field

  • Set FORMFIELD_ACTIVE = #ffffe0

FORM_HEADER_TEXT Header text on form background

  • Set FORM_HEADER_TEXT = #036 

<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing!

Changed:
<
<		%STARTATTACH{"theme-colors.css" web="TWiki" topic="PatternSkin"}%
>
>		%STARTATTACH{"theme-colors.css" web="TWiki" topic="PatternSkin"}%
 /* PatternSkin colors */ /* Generated by AttachContentPlugin from PatternSkinColorSettings */

/* LAYOUT ELEMENTS */

#patternTopBar { border-color:#e2e2e2; background-color:#fefcf7; } #patternMain { /* don't set a background here; use patternOuter */ } #patternOuter { background-color:#fff; /* Sets background of center col */ border-color:#dadada; } #patternLeftBar, #patternWrapper { background-color:#f6f6f6; } #patternBottomBar { border-color:#e2e2e2; } #patternBottomBarContents, #patternBottomBarContents a:link, #patternBottomBarContents a:visited { color:#777; } #patternBottomBarContents a:hover { color:#fff; }

/* GENERAL HTML ELEMENTS */

html body { background-color:#fff; color:#000; } /* be kind to netscape 4 that doesn't understand inheritance */ body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 { background-color:transparent; } hr { color:#e2e2e2; background-color:#e2e2e2; } pre, code, tt { color:#7A4707; } blockquote { background-color:#fbfbfb; border-color:#fbfbfb #fbfbfb #fbfbfb #ddd;

} blockquote h2 { background:none; } h1, h2, h3, h4, h5, h6 { color:#630000; } h2 { background-color:#f6f6f6; border-color:#e2e2e2; } h3, h4, h5, h6 { border-color:#e2e2e2; } /* to override old Render.pm coded font color style */ .twikiNewLink font { color:inherit; } .twikiNewLink a:link sup, .twikiNewLink a:visited sup { color:#777; border-color:#ddd; } .twikiNewLink a:hover sup { background-color:#ce000f; color:#fff; border-color:#ce000f; } .twikiNewLink { border-color:#ddd; } :link:focus, :visited:focus, :link, :visited, :link:active, :visited:active { color:#4571d0; background-color:transparent; } :link:hover, :visited:hover { color:#fff; background-color:#ce000f; background-image:none; } :link:hover img, :visited:hover img { background-color:transparent; } .patternTopic a:visited { color:#666; } .patternTopic a:hover { color:#fff; } #patternMainContents h1 a:link, #patternMainContents h1 a:visited, #patternMainContents h2 a:link, #patternMainContents h2 a:visited, #patternMainContents h3 a:link, #patternMainContents h3 a:visited, #patternMainContents h4 a:link, #patternMainContents h4 a:visited, #patternMainContents h5 a:link, #patternMainContents h5 a:visited, #patternMainContents h6 a:link, #patternMainContents h6 a:visited { color:#630000; } #patternMainContents h1 a:hover, #patternMainContents h2 a:hover, #patternMainContents h3 a:hover, #patternMainContents h4 a:hover, #patternMainContents h5 a:hover, #patternMainContents h6 a:hover { color:#fff; } .patternTopic .twikiUnvisited a:visited { color:#4571d0; } .patternTopic .twikiUnvisited a:hover { color:#fff; }

/* Form elements */

textarea, input, select { border-color:#aaa; color:#000; background-color:#fff; } .twikiSubmit, .twikiButton { border-color:#fff #888 #888 #fff; } .twikiSubmit { color:#fff; background-color:#06c; } .twikiButton { color:#000; background-color:#e2e3e3; } .twikiButtonCancel { color:#000; background-color:#f2d5d0; } .twikiSubmitDisabled, .twikiSubmitDisabled:active { border-color:#fff #ccc #ccc #fff; color:#aaa; background-color:#fbfbfb; } .twikiTextarea, .twikiInputField, .twikiInputFieldDisabled, .twikiInputFieldReadOnly, .twikiSelect { border-color:#bbb #f2f2f2 #f2f2f2 #bbb; } .twikiTextarea, .twikiInputField, .twikiSelect { color:#000; background-color:#fff; } .twikiInputField:active, .twikiInputField:focus, .twikiInputFieldFocus { background-color:#ffffe0; }

.twikiTextareaRawView { color:#000; } .twikiInputFieldDisabled { color:#aaa; background-color:#fafaf8; } .twikiInputFieldReadOnly { color:#777; } .twikiSelect { border-color:#bbb #f2f2f2 #f2f2f2 #bbb; color:#000; background-color:#fff; } .twikiInputFieldDisabled, .twikiSelectDisabled { color:#aaa; border-color:#bbb #f2f2f2 #f2f2f2 #bbb; background-color:#fafaf8; } .twikiInputFieldBeforeFocus { color:#777; }

/* ----------------------------------------------------------- Plugin elements ----------------------------------------------------------- */

/* TablePlugin */ .twikiTable, .twikiTable td, .twikiTable th { border-color:#e2e2e2; } .twikiTable th a:link, .twikiTable th a:visited, .twikiTable th a font { color:#fff; }

/* TwistyContrib */ .twistyPlaceholder { color:#777; } a:hover.twistyTrigger { color:#fff; }

/* TipsContrib */ .tipsOfTheDay { }

/* RevCommentPlugin */ .revComment .patternTopicAction { background-color:#f6f6f6; }

/* ----------------------------------------------------------- TWiki styles ----------------------------------------------------------- */

.twikiGrayText { color:#777; } .twikiGrayText a:link, .twikiGrayText a:visited { color:#777; } .twikiGrayText a:hover { color:#fff; }

table.twikiFormTable th.twikiFormTableHRow, table.twikiFormTable td.twikiFormTableRow { color:#777; } .twikiEditForm { color:#000; } .twikiEditForm .twikiFormTable, .twikiEditForm .twikiFormTable th, .twikiEditForm .twikiFormTable td { border-color:#e2e2e2; } /* use a different table background color mix: no odd/even rows, no white background */ .twikiEditForm .twikiFormTable td { background-color:#f7fafc; } .twikiEditForm .twikiFormTable th { background-color:#f0f6fb; } .patternContent .twikiAttachments, .patternContent .twikiForm { background-color:#f6f6f6; border-color:#e2e2e2; } .twikiAttachments table, table.twikiFormTable { border-color:#e2e2e2; background-color:#fff; } .twikiAttachments table { background-color:#fff; } .twikiAttachments td, .twikiAttachments th { border-color:#e2e2e2; } .twikiAttachments .twikiTable th font, table.twikiFormTable th.twikiFormTableHRow font { color:#4571d0; }

.twikiFormSteps { background-color:#fbfbfb; border-color:#e2e2e2; } .twikiFormStep { border-color:#e2e2e2; } .twikiFormStep h3, .twikiFormStep h4 { color:#036; } .twikiFormStep h3, .twikiFormStep h4 { background-color:transparent; } .twikiActionFormStepSign { color:#036; } .twikiToc .twikiTocTitle { color:#777; } .twikiBroadcastMessage { background-color:#ffe67b; } .twikiNotification { background-color:#ffe67b; } #twikiLogin .patternLoginNotification { background-color:#fff; border-color:#f00; } .twikiHelp { background-color:#ffe67b; } .twikiHelp { background-color:#f6f6f6; border-color:#e2e2e2; } .twikiBroadcastMessage b, .twikiBroadcastMessage strong { color:#f00; } .twikiAlert, .twikiAlert code { color:#f00; } .twikiEmulatedLink { color:#4571d0; } .twikiPageForm table { border-color:#e2e2e2; background:#fff; } .twikiPageForm hr { border-color:#cfcfcf; background-color:#cfcfcf; color:#cfcfcf; } .twikiAccessKey { color:inherit; border-color:#777; } a:link .twikiAccessKey, a:visited .twikiAccessKey { color:inherit; } a:hover .twikiAccessKey { color:inherit; } .twikiImage img { border-color:#eee; background-color:#fff; } #patternTopBar .twikiImage img { background-color:transparent; } .twikiImage a:hover img { border-color:#ce000f; }

/* ----------------------------------------------------------- Pattern skin specific elements ----------------------------------------------------------- */ #patternPage { background-color:#fff; } .patternHomePath a:link, .patternHomePath a:visited { border-color:#ddd; color:#666; } .patternTop a:hover { border:none; color:#fff; } .patternHomePath .patternRevInfo, .patternHomePath .patternRevInfo a:link, .patternHomePath .patternRevInfo a:visited { color:#777; } .patternHomePath .patternRevInfo a:hover { color:#fff; }

/* Left bar */ #patternLeftBarContents { color:#000; } #patternLeftBarContents hr { color:#e2e2e2; background-color:#e2e2e2; } #patternLeftBarContents a:link, #patternLeftBarContents a:visited { color:#444; } #patternLeftBarContents a:hover { color:#fff; } #patternLeftBarContents .patternLeftBarPersonal, #patternLeftBarContents .patternWebIndicator { border-color:#dadada; } #patternLeftBarContents b, #patternLeftBarContents strong { color:#630000; }

.patternTopicActions { border-color:#e2e2e2; background-color:#f6f6f6; color:#777; } .patternTopicAction { border-color:#e2e2e2; } .patternTopicAction s, .patternTopicAction strike { color:#aaa; } .patternTopicAction .twikiSeparator { color:#e2e2e2; } .patternActionButtons a:link, .patternActionButtons a:visited { color:#be000a; } .patternActionButtons a:hover { color:#fff; } .patternTopicAction .twikiAccessKey { color:#be000a; border-color:#be000a; } .patternTopicAction a:hover .twikiAccessKey { color:#fff; } .patternTopicAction label { color:#000; } .patternHelpCol { color:#777; } .patternSigLine { color:#777; } .patternToolBar a:link .twikiAccessKey, .patternToolBar a:visited .twikiAccessKey { color:inherit; border-color:#666; } .patternToolBar a:hover .twikiAccessKey { background-color:transparent; color:inherit; border-color:#666; } .patternSaveHelp { background-color:#fff; }

/* WebSearch, WebSearchAdvanced */ table#twikiSearchTable { border-color:#e2e2e2; } table#twikiSearchTable th, table#twikiSearchTable td { background-color:#fff; border-color:#e2e2e2; } table#twikiSearchTable hr { border-color:#e2e2e2; background-color:#e2e2e2; } table#twikiSearchTable th { color:#000; }

/* ----------------------------------------------------------- Search results styles and overridden styles used in search.pattern.tmpl ----------------------------------------------------------- */

h3.patternSearchResultsHeader, h4.patternSearchResultsHeader { background-color:#f6f6f6; border-color:#e2e2e2; } h4.patternSearchResultsHeader { color:#000; } .patternNoViewPage h4.patternSearchResultsHeader { color:#630000; } .patternSearchResult .twikiBottomRow { border-color:#e2e2e2; } .patternSearchResult .twikiAlert { color:#f00; } .patternSearchResult .twikiSummary .twikiAlert { color:#900; } .patternSearchResult .twikiNew { background-color:#ECFADC; border-color:#049804; color:#049804; } .patternViewPage .patternSearchResultsBegin { border-color:#e2e2e2; }

/* Search results in book view format */

.patternBookView .twikiTopRow { background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */ color:#777; } .patternBookView .twikiBottomRow { border-color:#e2e2e2; } .patternBookView .patternSearchResultCount { color:#777; }

/* edit.pattern.tmpl */

/* preview.pattern.tmpl */

.twikiPreviewArea { border-color:#f00; background-color:#fff; }

/* rdiff.pattern.tmpl */

.patternDiff { border-color:#6b7f93; } #patternMainContents .patternDiff h4.patternSearchResultsHeader { background-color:#6b7f93; color:#fff; } #patternMainContents .patternDiff h4.patternSearchResultsHeader a:link, #patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited { color:#fff; } tr.twikiDiffDebug td { border-color:#e2e2e2; } .patternDiffPage .twikiDiffTable th { background-color:#ccc; } /* Changed */ .twikiDiffChangedHeader, tr.twikiDiffDebug .twikiDiffChangedText, tr.twikiDiffDebug .twikiDiffChangedText { background:#9f9; /* green - do not change */ } /* Deleted */ .twikiDiffDeletedHeader, tr.twikiDiffDebug .twikiDiffDeletedMarker, tr.twikiDiffDebug .twikiDiffDeletedText { background-color:#f99; /* red - do not change */ } /* Added */ .twikiDiffAddedHeader, tr.twikiDiffDebug .twikiDiffAddedMarker, tr.twikiDiffDebug .twikiDiffAddedText { background-color:#ccf; /* violet - do not change */ } /* Unchanged */ tr.twikiDiffDebug .twikiDiffUnchangedText { color:#777; } .twikiDiffUnchangedTextContents { } .twikiDiffLineNumberHeader { background-color:#ccc; }

/* IMAGES */ /* image positions are set here as well as these are dependent on the image */

h2, .patternTopicAction { background-image:url(bg_action_gradient.gif); background-repeat:repeat-x; } .twikiToc li { background-image:url(bullet-toc.gif); background-repeat:no-repeat; background-position:0 .4em; } #patternOuter, #patternTopBar { /* gradient yellow of left bar and main */ background-image:url(bg_outer_gradient.gif); background-repeat:repeat-x; } .patternPrintPage #patternOuter { background:#fff; /* white - do not change */ } .twikiPageForm table, table#twikiSearchTable td.twikiFirstRow { background-image:url(form_gradient.gif); background-repeat:repeat-x; background-color:#f5f5f5; } .twikiSubmit, .twikiSubmitDisabled { background-image:url(bg_submit_gradient.gif); background-repeat:repeat-x; } .twikiSubmit, a.twikiSubmit:link, a.twikiSubmit:visited { background-position:0px 0px; background-color:#06c; border-color:#abcdf0 #0048b8 #0048b8 #abcdf0; color:#fff; } .twikiSubmit:hover, a.twikiSubmit:hover { background-position:0px -80px; background-color:#0047b7; border-color:#98bce9 #0031a4 #0031a4 #98bce9; color:#fff; } .twikiSubmit:active, a.twikiSubmit:active { background-position:0px -160px; background-color:#73ace6; border-color:#0031a4 #98bce9 #98bce9 #0031a4; color:#fff; } .twikiSubmitDisabled, .twikiSubmitDisabled:hover, .twikiSubmitDisabled:active { background-position:0px -240px; background-color:#d9e8f7; border-color:#f5f9fd #ccc #ccc #f5f9fd; color:#ccc; } .twikiButton, a.twikiButton:link, a.twikiButton:visited { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333; } .twikiChangeFormButtonHolder .twikiButton { background-color:#fff; background-image:none; color:#06c; } .twikiChangeFormButtonHolder .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; } .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:hover, a.twikiButton:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .twikiButton:active, .twikiChangeFormButtonHolder .twikiButton:active, a.twikiButton:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .twikiButtonDisabled, .twikiButtonDisabled:hover, .twikiButtonDisabled:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .twikiButtonCancel { background-image:url(bg_buttoncancel_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f3ddd7 #b5706a #b5706a #f3ddd7; background-color:#cc867f; color:#333; } .twikiButtonCancel:hover { background-position:0px -80px; border-color:#eacac1 #9f564f #9f564f #eacac1; background-color:#b26259; color:#222; } .twikiButtonCancel:active { background-position:0px -160px; border-color:#9f564f #eacac1 #eacac1 #9f564f; background-color:#e5bdb1; color:#222; } .patternToolBar span a:link, .patternToolBar span a:visited, .patternToolBar span s, .patternToolBar span strike { background-image:url(bg_button_small_gradient.gif); background-repeat:repeat-x; } .patternToolBar span a:link, .patternToolBar span a:visited { background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333; } .patternToolBar span a:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .patternToolBar span a:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .patternToolBar span s, .patternToolBar span strike { background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .patternTextareaButton { border-color:#fffefd #b8b6ad #b8b6ad #fffefd; overflow:hidden; } .patternButtonFontSelector { background-image:url(button_font_selector.gif); width:33px; height:16px; } .patternButtonFontSelectorProportional { background-position:0 0; } .patternButtonFontSelectorMonospace { background-position:0 -16px; } .patternButtonEnlarge, .patternButtonShrink { background-image:url(button_arrow.gif); width:16px; height:16px; } .patternButtonEnlarge { background-position:0 0; } .patternButtonEnlarge:hover { background-position:0 -42px; } .patternButtonEnlarge:active { background-position:0 -84px; } .patternButtonShrink { background-position:16px 0; } .patternButtonShrink:hover { background-position:16px -42px; } .patternButtonShrink:active { background-position:16px -84px; } .twikiBroadcastMessage, .twikiNotification { background-image:url(background_alert.gif); background-repeat:repeat-x; }

/* common settings */ .patternLeftBarPersonal li, li.patternLogOut, li.patternLogIn { padding-left:13px; background-position:0 .4em; background-repeat:no-repeat; } .patternLeftBarPersonal li { background-image:url(bullet-personal_sidebar.gif); } .patternLeftBarPersonal li.patternLogOut { background-image:url(bullet-lock.gif); } .patternLeftBarPersonal li.patternLogIn { background-image:url(bullet-lock.gif); } %ENDATTACH%

Revision 32007-09-23 - TWikiContributor

 

Color scheme settings for PatternSkin

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.

AttachContentPlugin is not installed.

Usage

Step 1

Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/theme-colors.css

Step 2

Edit this topic, and change the color variables as you like.

Step 3

Save the topic. This will generate an attachment to topic PatternSkin.

Info For more help on customizing styles, see PatternSkinCustomization.

Color variables

On this page:

Logical groupings

Text

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff

GRAYED_TEXT_COLOR

  • Set GRAYED_TEXT_COLOR = #777

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #630000

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #777

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #777

Links

LINK_TEXT_NORMAL Link normal text

  • Set LINK_TEXT_NORMAL = #4571d0

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =

LINK_TEXT_NORMAL_VISITED Link normal text visited

  • Set LINK_TEXT_NORMAL_VISITED = #666

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

  • Set LINK_TEXT_ACTION_BUTTON = #be000a

LINK_TEXT_HOVER Link hover text

  • Set LINK_TEXT_HOVER = #fff

LINK_BACKGROUND_HOVER Link background hover

  • Set LINK_BACKGROUND_HOVER = #ce000f

SIDE_BAR_LINK_TEXT Side bar link text

  • Set SIDE_BAR_LINK_TEXT = #444

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

  • Set DISABLED_TEXT = #aaa

DISABLED_BACKGROUND Disabled background

  • Set DISABLED_BACKGROUND = #fafaf8

BUTTON_BORDERS_DISABLED Disabled button borders

  • Set BUTTON_BORDERS_DISABLED = #fff #ccc #ccc #fff

'New'

NEW_TEXT New text (green)

  • Set NEW_TEXT = #049804

NEW_BACKGROUND New background (light green)

  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00

Buttons

BUTTON_TEXT Button text color (dark gray)

  • Set BUTTON_TEXT = #000

BUTTON_BORDERS Button borders

  • Set BUTTON_BORDERS = #fff #888 #888 #fff

BUTTON_BACKGROUND Button background

  • Set BUTTON_BACKGROUND = #e2e3e3

BUTTON_CANCEL_BACKGROUND Cancel button background

  • Set BUTTON_CANCEL_BACKGROUND = #f2d5d0

SUBMIT_BUTTON_BACKGROUND Submit button background

  • Set SUBMIT_BUTTON_BACKGROUND = #06c

SUBMIT_BUTTON_BORDER_TEXT Submit button text color

  • Set SUBMIT_BUTTON_BORDER_TEXT = #fff

SELECT_BORDER Select border

  • Set SELECT_BORDER = #888

Background colors

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

  • Set SIDE_BAR_BACKGROUND = #f6f6f6

NEUTRAL_BACKGROUND

  • Set NEUTRAL_BACKGROUND = #fdfaf1

TOP_BAR_BACKGROUND Top bar background

  • Set TOP_BAR_BACKGROUND = #fefcf7

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #f6f6f6

TOPIC_ACTION_BACKGROUND Topic action row

  • Set TOPIC_ACTION_BACKGROUND = #f6f6f6

HEADER_BACKGROUND h2, h3

  • Set HEADER_BACKGROUND = #f6f6f6

DIFF_HEADER_BACKGROUND Diff header (dark gray)

  • Set DIFF_HEADER_BACKGROUND = #ccc

NOTIFICATION_BACKGROUND Info, broadcast message and notifications

  • Set NOTIFICATION_BACKGROUND = #ffe67b

INFO_BACKGROUND

  • Set INFO_BACKGROUND = #ffe67b

Border colors

NEUTRAL_BORDER Info (light gray)

  • Set NEUTRAL_BORDER = #ddd

SEPARATOR_BORDER

  • Set SEPARATOR_BORDER = #e2e2e2

MINOR_SEPARATOR_BORDER Header H3..H6 bottom

  • Set MINOR_SEPARATOR_BORDER = #e2e2e2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #dadada

IMAGE_BORDER Image border

  • Set IMAGE_BORDER = #eee

FORM_STEP_BORDER Form step border

  • Set FORM_STEP_BORDER = #e2e2e2

NOTIFICATION_BORDER Broadcast message

  • Set NOTIFICATION_BORDER = #ffdf4c

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
  • Set TABLE_DATA_ODD_BACKGROUND = #f0f6fb
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc

TABLE_BORDER Table border, sup (light neutral tone)

  • Set TABLE_BORDER = #e2e2e2

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #cfcfcf

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #fbfbfb

FORMFIELD_ACTIVE Active form field

  • Set FORMFIELD_ACTIVE = #ffffe0

FORM_HEADER_TEXT Header text on form background

  • Set FORM_HEADER_TEXT = #036 

<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing! 

%STARTATTACH{"theme-colors.css" web="%TWIKIWEB%" topic="PatternSkin"}%
/* PatternSkin colors */
/* Generated by AttachContentPlugin from %WEB%.%TOPIC% */

/* LAYOUT ELEMENTS */

#patternTopBar {
   border-color:%SEPARATOR_BORDER%;
   background-color:%TOP_BAR_BACKGROUND%;
}
#patternMain { /* don't set a background here; use patternOuter */ }
#patternOuter {
   background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternLeftBar,
#patternWrapper {
   background-color:%SIDE_BAR_BACKGROUND%;
}
#patternBottomBar {
   border-color:%SEPARATOR_BORDER%;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
   color:%GRAYED_OUT_TEXT%;
}
#patternBottomBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* GENERAL HTML ELEMENTS */

html body {
   background-color:%MAIN_BACKGROUND_COLOR%;
   color:%MAIN_TEXT_COLOR%;
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
   background-color:transparent;
}
hr {
   color:%SEPARATOR_BORDER%;
   background-color:%SEPARATOR_BORDER%;
}
pre, code, tt {
   color:%CODE_TEXT%;
}
blockquote {
   background-color:%ACTIVE_FORM_BACKGROUND%;
Changed:
<
<		 border-color:#ddd;
>
>		 border-color:#fbfbfb #fbfbfb #fbfbfb #ddd;
Added:
>
>
 } blockquote h2 { background:none; } h1, h2, h3, h4, h5, h6 { color:#630000; } h2 { background-color:#f6f6f6; border-color:#e2e2e2; } h3, h4, h5, h6 { border-color:#e2e2e2; } /* to override old Render.pm coded font color style */ .twikiNewLink font { color:inherit; } .twikiNewLink a:link sup, .twikiNewLink a:visited sup { color:#777; border-color:#ddd; } .twikiNewLink a:hover sup { background-color:#ce000f; color:#fff; border-color:#ce000f; } .twikiNewLink { border-color:#ddd; } :link:focus, :visited:focus, :link, :visited, :link:active, :visited:active { color:#4571d0; background-color:transparent; } :link:hover, :visited:hover { color:#fff; background-color:#ce000f; background-image:none; } :link:hover img, :visited:hover img { background-color:transparent; } .patternTopic a:visited { color:#666; } .patternTopic a:hover { color:#fff; } #patternMainContents h1 a:link, #patternMainContents h1 a:visited, #patternMainContents h2 a:link, #patternMainContents h2 a:visited, #patternMainContents h3 a:link, #patternMainContents h3 a:visited, #patternMainContents h4 a:link, #patternMainContents h4 a:visited, #patternMainContents h5 a:link, #patternMainContents h5 a:visited, #patternMainContents h6 a:link, #patternMainContents h6 a:visited { color:#630000; } #patternMainContents h1 a:hover, #patternMainContents h2 a:hover, #patternMainContents h3 a:hover, #patternMainContents h4 a:hover, #patternMainContents h5 a:hover, #patternMainContents h6 a:hover { color:#fff; } .patternTopic .twikiUnvisited a:visited { color:#4571d0; } .patternTopic .twikiUnvisited a:hover { color:#fff; }

/* Form elements */

textarea, input, select { border-color:#aaa; color:#000; background-color:#fff; } .twikiSubmit, .twikiButton { border-color:#fff #888 #888 #fff; } .twikiSubmit { color:#fff; background-color:#06c; } .twikiButton { color:#000; background-color:#e2e3e3; } .twikiButtonCancel { color:#000; background-color:#f2d5d0; } .twikiSubmitDisabled, .twikiSubmitDisabled:active { border-color:#fff #ccc #ccc #fff; color:#aaa; background-color:#fbfbfb; } .twikiTextarea, .twikiInputField, .twikiInputFieldDisabled, .twikiInputFieldReadOnly, .twikiSelect { border-color:#bbb #f2f2f2 #f2f2f2 #bbb; } .twikiTextarea, .twikiInputField, .twikiSelect { color:#000; background-color:#fff; } .twikiInputField:active, .twikiInputField:focus, .twikiInputFieldFocus { background-color:#ffffe0; }

.twikiTextareaRawView { color:#000; } .twikiInputFieldDisabled { color:#aaa; background-color:#fafaf8; } .twikiInputFieldReadOnly { color:#777; } .twikiSelect { border-color:#bbb #f2f2f2 #f2f2f2 #bbb; color:#000; background-color:#fff; } .twikiInputFieldDisabled, .twikiSelectDisabled { color:#aaa; border-color:#bbb #f2f2f2 #f2f2f2 #bbb; background-color:#fafaf8; } .twikiInputFieldBeforeFocus { color:#777; }

/* ----------------------------------------------------------- Plugin elements ----------------------------------------------------------- */

/* TablePlugin */ .twikiTable, .twikiTable td, .twikiTable th { border-color:#e2e2e2; } .twikiTable th a:link, .twikiTable th a:visited, .twikiTable th a font { color:#fff; }

/* TwistyContrib */ .twistyPlaceholder { color:#777; } a:hover.twistyTrigger { color:#fff; }

/* TipsContrib */ .tipsOfTheDay { }

/* RevCommentPlugin */ .revComment .patternTopicAction { background-color:#f6f6f6; }

/* ----------------------------------------------------------- TWiki styles ----------------------------------------------------------- */

.twikiGrayText { color:#777; } .twikiGrayText a:link, .twikiGrayText a:visited { color:#777; } .twikiGrayText a:hover { color:#fff; }

table.twikiFormTable th.twikiFormTableHRow, table.twikiFormTable td.twikiFormTableRow { color:#777; } .twikiEditForm { color:#000; } .twikiEditForm .twikiFormTable, .twikiEditForm .twikiFormTable th, .twikiEditForm .twikiFormTable td { border-color:#e2e2e2; } /* use a different table background color mix: no odd/even rows, no white background */ .twikiEditForm .twikiFormTable td { background-color:#f7fafc; } .twikiEditForm .twikiFormTable th { background-color:#f0f6fb; } .patternContent .twikiAttachments, .patternContent .twikiForm { background-color:#f6f6f6; border-color:#e2e2e2; } .twikiAttachments table, table.twikiFormTable { border-color:#e2e2e2; background-color:#fff; } .twikiAttachments table { background-color:#fff; } .twikiAttachments td, .twikiAttachments th { border-color:#e2e2e2; } .twikiAttachments .twikiTable th font, table.twikiFormTable th.twikiFormTableHRow font { color:#4571d0; }

.twikiFormSteps { background-color:#fbfbfb; border-color:#e2e2e2; } .twikiFormStep { border-color:#e2e2e2; } .twikiFormStep h3, .twikiFormStep h4 { color:#036; } .twikiFormStep h3, .twikiFormStep h4 { background-color:transparent; } .twikiActionFormStepSign { color:#036; } .twikiToc .twikiTocTitle { color:#777; } .twikiBroadcastMessage { background-color:#ffe67b; } .twikiNotification { background-color:#ffe67b; } #twikiLogin .patternLoginNotification { background-color:#fff; border-color:#f00; } .twikiHelp { background-color:#ffe67b; } .twikiHelp { background-color:#f6f6f6; border-color:#e2e2e2; } .twikiBroadcastMessage b, .twikiBroadcastMessage strong { color:#f00; } .twikiAlert, .twikiAlert code { color:#f00; } .twikiEmulatedLink { color:#4571d0; } .twikiPageForm table { border-color:#e2e2e2; background:#fff; } .twikiPageForm hr { border-color:#cfcfcf; background-color:#cfcfcf; color:#cfcfcf; } .twikiAccessKey { color:inherit; border-color:#777; } a:link .twikiAccessKey, a:visited .twikiAccessKey { color:inherit; } a:hover .twikiAccessKey { color:inherit; } .twikiImage img { border-color:#eee; background-color:#fff; } #patternTopBar .twikiImage img { background-color:transparent; } .twikiImage a:hover img { border-color:#ce000f; }

/* ----------------------------------------------------------- Pattern skin specific elements ----------------------------------------------------------- */ #patternPage { background-color:#fff; } .patternHomePath a:link, .patternHomePath a:visited { border-color:#ddd; color:#666; } .patternTop a:hover { border:none; color:#fff; } .patternHomePath .patternRevInfo, .patternHomePath .patternRevInfo a:link, .patternHomePath .patternRevInfo a:visited { color:#777; } .patternHomePath .patternRevInfo a:hover { color:#fff; }

/* Left bar */ #patternLeftBarContents { color:#000; } #patternLeftBarContents hr { color:#e2e2e2; background-color:#e2e2e2; } #patternLeftBarContents a:link, #patternLeftBarContents a:visited { color:#444; } #patternLeftBarContents a:hover { color:#fff; } #patternLeftBarContents .patternLeftBarPersonal, #patternLeftBarContents .patternWebIndicator { border-color:#dadada; } #patternLeftBarContents b, #patternLeftBarContents strong { color:#630000; }

.patternTopicActions { border-color:#e2e2e2; background-color:#f6f6f6; color:#777; } .patternTopicAction { border-color:#e2e2e2; } .patternTopicAction s, .patternTopicAction strike { color:#aaa; } .patternTopicAction .twikiSeparator { color:#e2e2e2; } .patternActionButtons a:link, .patternActionButtons a:visited { color:#be000a; } .patternActionButtons a:hover { color:#fff; } .patternTopicAction .twikiAccessKey { color:#be000a; border-color:#be000a; } .patternTopicAction a:hover .twikiAccessKey { color:#fff; } .patternTopicAction label { color:#000; } .patternHelpCol { color:#777; } .patternSigLine { color:#777;

Deleted:
<
<		 background-color:#f6f6f6; border-color:#e2e2e2;
 } .patternToolBar a:link .twikiAccessKey, .patternToolBar a:visited .twikiAccessKey { color:inherit; border-color:#666; } .patternToolBar a:hover .twikiAccessKey { background-color:transparent; color:inherit; border-color:#666; } .patternSaveHelp { background-color:#fff; }

/* WebSearch, WebSearchAdvanced */ table#twikiSearchTable { border-color:#e2e2e2; } table#twikiSearchTable th, table#twikiSearchTable td { background-color:#fff; border-color:#e2e2e2; } table#twikiSearchTable hr { border-color:#e2e2e2; background-color:#e2e2e2; } table#twikiSearchTable th { color:#000; }

/* ----------------------------------------------------------- Search results styles and overridden styles used in search.pattern.tmpl ----------------------------------------------------------- */

h3.patternSearchResultsHeader, h4.patternSearchResultsHeader { background-color:#f6f6f6; border-color:#e2e2e2; } h4.patternSearchResultsHeader { color:#000; } .patternNoViewPage h4.patternSearchResultsHeader { color:#630000; } .patternSearchResult .twikiBottomRow { border-color:#e2e2e2; } .patternSearchResult .twikiAlert { color:#f00; } .patternSearchResult .twikiSummary .twikiAlert { color:#900; } .patternSearchResult .twikiNew { background-color:#ECFADC; border-color:#049804; color:#049804; } .patternViewPage .patternSearchResultsBegin { border-color:#e2e2e2; }

/* Search results in book view format */

.patternBookView .twikiTopRow { background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */ color:#777; } .patternBookView .twikiBottomRow { border-color:#e2e2e2; } .patternBookView .patternSearchResultCount { color:#777; }

/* edit.pattern.tmpl */

/* preview.pattern.tmpl */

.twikiPreviewArea { border-color:#f00; background-color:#fff; }

/* rdiff.pattern.tmpl */

.patternDiff { border-color:#6b7f93; } #patternMainContents .patternDiff h4.patternSearchResultsHeader { background-color:#6b7f93; color:#fff; } #patternMainContents .patternDiff h4.patternSearchResultsHeader a:link, #patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited { color:#fff; } tr.twikiDiffDebug td { border-color:#e2e2e2; } .patternDiffPage .twikiDiffTable th { background-color:#ccc; } /* Changed */ .twikiDiffChangedHeader, tr.twikiDiffDebug .twikiDiffChangedText, tr.twikiDiffDebug .twikiDiffChangedText { background:#9f9; /* green - do not change */ } /* Deleted */ .twikiDiffDeletedHeader, tr.twikiDiffDebug .twikiDiffDeletedMarker, tr.twikiDiffDebug .twikiDiffDeletedText { background-color:#f99; /* red - do not change */ } /* Added */ .twikiDiffAddedHeader, tr.twikiDiffDebug .twikiDiffAddedMarker, tr.twikiDiffDebug .twikiDiffAddedText { background-color:#ccf; /* violet - do not change */ } /* Unchanged */ tr.twikiDiffDebug .twikiDiffUnchangedText { color:#777; } .twikiDiffUnchangedTextContents { } .twikiDiffLineNumberHeader { background-color:#ccc; }

/* IMAGES */ /* image positions are set here as well as these are dependent on the image */

h2, .patternTopicAction { background-image:url(bg_action_gradient.gif); background-repeat:repeat-x; } .twikiToc li { background-image:url(bullet-toc.gif); background-repeat:no-repeat; background-position:0 .4em; } #patternOuter, #patternTopBar { /* gradient yellow of left bar and main */ background-image:url(bg_outer_gradient.gif); background-repeat:repeat-x; } .patternPrintPage #patternOuter { background:#fff; /* white - do not change */ } .twikiPageForm table, table#twikiSearchTable td.twikiFirstRow { background-image:url(form_gradient.gif); background-repeat:repeat-x; background-color:#f5f5f5; } .twikiSubmit, .twikiSubmitDisabled { background-image:url(bg_submit_gradient.gif); background-repeat:repeat-x; } .twikiSubmit, a.twikiSubmit:link, a.twikiSubmit:visited { background-position:0px 0px; background-color:#06c; border-color:#abcdf0 #0048b8 #0048b8 #abcdf0; color:#fff; } .twikiSubmit:hover, a.twikiSubmit:hover { background-position:0px -80px; background-color:#0047b7; border-color:#98bce9 #0031a4 #0031a4 #98bce9; color:#fff; } .twikiSubmit:active, a.twikiSubmit:active { background-position:0px -160px; background-color:#73ace6; border-color:#0031a4 #98bce9 #98bce9 #0031a4; color:#fff; } .twikiSubmitDisabled, .twikiSubmitDisabled:hover, .twikiSubmitDisabled:active { background-position:0px -240px; background-color:#d9e8f7; border-color:#f5f9fd #ccc #ccc #f5f9fd; color:#ccc; } .twikiButton, a.twikiButton:link, a.twikiButton:visited { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333; } .twikiChangeFormButtonHolder .twikiButton { background-color:#fff; background-image:none; color:#06c; } .twikiChangeFormButtonHolder .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; } .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:hover, a.twikiButton:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .twikiButton:active, .twikiChangeFormButtonHolder .twikiButton:active, a.twikiButton:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .twikiButtonDisabled, .twikiButtonDisabled:hover, .twikiButtonDisabled:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .twikiButtonCancel { background-image:url(bg_buttoncancel_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f3ddd7 #b5706a #b5706a #f3ddd7; background-color:#cc867f; color:#333; } .twikiButtonCancel:hover { background-position:0px -80px; border-color:#eacac1 #9f564f #9f564f #eacac1; background-color:#b26259; color:#222; } .twikiButtonCancel:active { background-position:0px -160px; border-color:#9f564f #eacac1 #eacac1 #9f564f; background-color:#e5bdb1; color:#222; } .patternToolBar span a:link, .patternToolBar span a:visited, .patternToolBar span s, .patternToolBar span strike { background-image:url(bg_button_small_gradient.gif); background-repeat:repeat-x; } .patternToolBar span a:link, .patternToolBar span a:visited { background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333; } .patternToolBar span a:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .patternToolBar span a:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .patternToolBar span s, .patternToolBar span strike { background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .patternTextareaButton { border-color:#fffefd #b8b6ad #b8b6ad #fffefd; overflow:hidden; } .patternButtonFontSelector { background-image:url(button_font_selector.gif); width:33px; height:16px; } .patternButtonFontSelectorProportional { background-position:0 0; } .patternButtonFontSelectorMonospace { background-position:0 -16px; } .patternButtonEnlarge, .patternButtonShrink { background-image:url(button_arrow.gif); width:16px; height:16px; } .patternButtonEnlarge { background-position:0 0; } .patternButtonEnlarge:hover { background-position:0 -42px; } .patternButtonEnlarge:active { background-position:0 -84px; } .patternButtonShrink { background-position:16px 0; } .patternButtonShrink:hover { background-position:16px -42px; } .patternButtonShrink:active { background-position:16px -84px; } .twikiBroadcastMessage, .twikiNotification { background-image:url(background_alert.gif); background-repeat:repeat-x; }

/* common settings */ .patternLeftBarPersonal li, li.patternLogOut, li.patternLogIn { padding-left:13px; background-position:0 .4em; background-repeat:no-repeat; } .patternLeftBarPersonal li { background-image:url(bullet-personal_sidebar.gif); } .patternLeftBarPersonal li.patternLogOut { background-image:url(bullet-lock.gif); } .patternLeftBarPersonal li.patternLogIn { background-image:url(bullet-lock.gif); } %ENDATTACH%

Revision 22007-09-23 - TWikiContributor

Changed:
<
<

Color scheme settings for PatternSkin

>
>

Color scheme settings for PatternSkin

Deleted:
<
<		Appearance: text colors, background colors, border colors.
 Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.
Added:
>
>		AttachContentPlugin is not installed.
 

Usage

Step 1

Changed:
<
<		Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%MAINWEB%/TWikiPreferences/theme-colors.css
>
>		Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/theme-colors.css
Deleted:
<
<
 

Step 2

Changed:
<
<		Edit this topic, and change the color variables as you like.
>
>		Edit this topic, and change the color variables as you like.
 
Changed:
<
<

Color variables

>
>

Step 3

Added:
>
>		Save the topic. This will generate an attachment to topic PatternSkin.

Info For more help on customizing styles, see PatternSkinCustomization.

Color variables

 
On this page:

Logical groupings

Changed:
<
<

Text on background

>
>

Text

 

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff
Changed:
<
<
>
>

GRAYED_TEXT_COLOR

Added:
>
>
  • Set GRAYED_TEXT_COLOR = #777

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #630000

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #777

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #777
 

Links

LINK_TEXT_NORMAL Link normal text

Changed:
<
<
  • Set LINK_TEXT_NORMAL = #06c
>
>
  • Set LINK_TEXT_NORMAL = #4571d0
 

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =
Added:
>
>

LINK_TEXT_NORMAL_VISITED Link normal text visited

  • Set LINK_TEXT_NORMAL_VISITED = #666
 

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

Changed:
<
<
  • Set LINK_TEXT_ACTION_BUTTON = #D6000F
>
>
  • Set LINK_TEXT_ACTION_BUTTON = #be000a
 

LINK_TEXT_HOVER Link hover text

Changed:
<
<
  • Set LINK_TEXT_HOVER = #FBF7E8
>
>
  • Set LINK_TEXT_HOVER = #fff
 

LINK_BACKGROUND_HOVER Link background hover

Changed:
<
<
  • Set LINK_BACKGROUND_HOVER = #D6000F
>
>
  • Set LINK_BACKGROUND_HOVER = #ce000f
 

SIDE_BAR_LINK_TEXT Side bar link text

Changed:
<
<
  • Set SIDE_BAR_LINK_TEXT = #666

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

>
>
  • Set SIDE_BAR_LINK_TEXT = #444
Deleted:
<
<
  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

 

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

Changed:
<
<
  • Set DISABLED_TEXT = #ccc
>
>
  • Set DISABLED_TEXT = #aaa
 

DISABLED_BACKGROUND Disabled background

Changed:
<
<
  • Set DISABLED_BACKGROUND = #f5f5f5
>
>
  • Set DISABLED_BACKGROUND = #fafaf8
Added:
>
>

BUTTON_BORDERS_DISABLED Disabled button borders

  • Set BUTTON_BORDERS_DISABLED = #fff #ccc #ccc #fff
 

'New'

Changed:
<
<

NEW_TEXT New text (green)

>
>

NEW_TEXT New text (green)

 
  • Set NEW_TEXT = #049804
Changed:
<
<

NEW_BACKGROUND New background (light green)

>
>

NEW_BACKGROUND New background (light green)

 
  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00
Changed:
<
<
>
>
 

Buttons

BUTTON_TEXT Button text color (dark gray)

Changed:
<
<
  • Set BUTTON_TEXT = #333
>
>
  • Set BUTTON_TEXT = #000
 

BUTTON_BORDERS Button borders

Changed:
<
<
  • Set BUTTON_BORDERS = #ddd #aaa #aaa #ddd

BUTTON_BORDERS_ACTIVE Button borders (active)

  • Set BUTTON_BORDERS_ACTIVE = #999 #ccc #ccc #999

SUBMIT_BUTTON_BACKGROUND Submit button background (dark yellow)

  • Set SUBMIT_BUTTON_BACKGROUND = #FED764

SUBMIT_BUTTON_BORDER Submit button border (blue)

  • Set SUBMIT_BUTTON_BORDER = #88B6CF
>
>
  • Set BUTTON_BORDERS = #fff #888 #888 #fff

BUTTON_BACKGROUND Button background

  • Set BUTTON_BACKGROUND = #e2e3e3

BUTTON_CANCEL_BACKGROUND Cancel button background

  • Set BUTTON_CANCEL_BACKGROUND = #f2d5d0

SUBMIT_BUTTON_BACKGROUND Submit button background

  • Set SUBMIT_BUTTON_BACKGROUND = #06c
Added:
>
>

SUBMIT_BUTTON_BORDER_TEXT Submit button text color

  • Set SUBMIT_BUTTON_BORDER_TEXT = #fff

SELECT_BORDER Select border

  • Set SELECT_BORDER = #888
 
Deleted:
<
<

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #aaa #ddd #ddd #aaa

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #ccc

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #f8fbfc

FORMFIELD_ACTIVE Active form field (not implemented yet)

  • Set FORMFIELD_ACTIVE = #ffc

Color groupings

Text colors

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #a00

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #666

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #8E9195

STRONG_TEXT Dark text, header (dark gray)

  • Set STRONG_TEXT = #333

SEPARATOR Seperator in topic action bar

  • Set SEPARATOR = #aaa

 

Background colors

Changed:
<
<

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

>
>

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

 
  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

Changed:
<
<
  • Set SIDE_BAR_BACKGROUND = #f7fafc

SIDE_BAR_PERSONAL_BACKGROUND Side bar personal background

  • Set SIDE_BAR_PERSONAL_BACKGROUND = #e6eff5;

INFO_BACKGROUND Info (very light blue) (placeholder for background image)

  • Set INFO_BACKGROUND = #f8fbfc

TOPIC_ACTION_BACKGROUND Topic action row (light yellow)

  • Set TOPIC_ACTION_BACKGROUND = #FCF8EC

HEADER_BACKGROUND H1, H2, etc header (light yellow)

  • Set HEADER_BACKGROUND = #FDFAF3

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form (light yellow)

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #FEFCF6

DIFF_HEADER_BACKGROUND Diff header (dark gray) (same as GRAYED_OUT_TEXT)

>
>
  • Set SIDE_BAR_BACKGROUND = #f6f6f6

NEUTRAL_BACKGROUND

  • Set NEUTRAL_BACKGROUND = #fdfaf1

TOP_BAR_BACKGROUND Top bar background

  • Set TOP_BAR_BACKGROUND = #fefcf7

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #f6f6f6

TOPIC_ACTION_BACKGROUND Topic action row

  • Set TOPIC_ACTION_BACKGROUND = #f6f6f6

HEADER_BACKGROUND h2, h3

  • Set HEADER_BACKGROUND = #f6f6f6

DIFF_HEADER_BACKGROUND Diff header (dark gray)

 
  • Set DIFF_HEADER_BACKGROUND = #ccc
Added:
>
>

NOTIFICATION_BACKGROUND Info, broadcast message and notifications

  • Set NOTIFICATION_BACKGROUND = #ffe67b

INFO_BACKGROUND

  • Set INFO_BACKGROUND = #ffe67b
 
Added:
>
>

Border colors

NEUTRAL_BORDER Info (light gray)

  • Set NEUTRAL_BORDER = #ddd

SEPARATOR_BORDER

  • Set SEPARATOR_BORDER = #e2e2e2

MINOR_SEPARATOR_BORDER Header H3..H6 bottom

  • Set MINOR_SEPARATOR_BORDER = #e2e2e2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #dadada

IMAGE_BORDER Image border

  • Set IMAGE_BORDER = #eee

FORM_STEP_BORDER Form step border

  • Set FORM_STEP_BORDER = #e2e2e2

NOTIFICATION_BORDER Broadcast message

  • Set NOTIFICATION_BORDER = #ffdf4c
 

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
Changed:
<
<
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
>
>
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
 
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
Changed:
<
<
  • Set TABLE_DATA_ODD_BACKGROUND = #edf4f9
>
>
  • Set TABLE_DATA_ODD_BACKGROUND = #f0f6fb
 
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc
Deleted:
<
<

Border colors

INFO_BORDER Info (light blue)

  • Set INFO_BORDER = #D5E6F3

SEPARATOR_BORDER HR line, bottom of h2, attachment table, form (brown)

  • Set SEPARATOR_BORDER = #E2DCC8

MINOR_SEPARATOR_BORDER Header H3..H6 bottom (75% of SEPARATOR_BORDER)

  • Set MINOR_SEPARATOR_BORDER = #E9E4D2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #ccc
 

TABLE_BORDER Table border, sup (light neutral tone)

Changed:
<
<
  • Set TABLE_BORDER = #ccc

TABLE_BORDER_LIGHT Table border light

  • Set TABLE_BORDER_LIGHT = #e2e7eb

>
>
  • Set TABLE_BORDER = #e2e2e2

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

Added:
>
>
  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #cfcfcf

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #fbfbfb

FORMFIELD_ACTIVE Active form field

  • Set FORMFIELD_ACTIVE = #ffffe0

FORM_HEADER_TEXT Header text on form background

  • Set FORM_HEADER_TEXT = #036
 
<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing!

Changed:
<
<
>
>
 
Changed:
<
<		%STARTATTACH{"theme-colors.css"}%
>
>		%STARTATTACH{"theme-colors.css" web="TWiki" topic="PatternSkin"}%
 /* PatternSkin colors */
Changed:
<
<		/* Generated by AttachContentPlugin from PatternSkinColorSettings */
>
>		/* Generated by AttachContentPlugin from PatternSkinColorSettings */
  /* LAYOUT ELEMENTS */

#patternTopBar {

Changed:
<
<		 background-color:#fff; border-color:#dadada;
>
>		 border-color:#e2e2e2; background-color:#fefcf7;
 } #patternMain { /* don't set a background here; use patternOuter */ } #patternOuter {
Changed:
<
<		 background-color:#fff; /* Sets background of center col */ border-color:#dadada;
>
>		 background-color:#fff; /* Sets background of center col */ border-color:#dadada;
 }
Changed:
<
<		#patternLeftBar, #patternLeftBarContents { /* don't set a background here; use patternWrapper */ }
>
>		#patternLeftBar,
 #patternWrapper {
Changed:
<
<		 background-color:#f6f6f6;
>
>		 background-color:#f6f6f6;
 } #patternBottomBar {
Changed:
<
<		 background-color:#fff;
>
>		 border-color:#e2e2e2;
Deleted:
<
<		 border-color:#dadada;
 } #patternBottomBarContents, #patternBottomBarContents a:link, #patternBottomBarContents a:visited {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 } #patternBottomBarContents a:hover {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }

/* GENERAL HTML ELEMENTS */

html body {

Changed:
<
<		 background-color:#fff; color:#000;
>
>		 background-color:#fff; color:#000;
 } /* be kind to netscape 4 that doesn't understand inheritance */ body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
Changed:
<
<		 background-color:transparent;
>
>		 background-color:transparent;
 } hr {
Changed:
<
<		 color:#dadada; background-color:#dadada;
>
>		 color:#e2e2e2; background-color:#e2e2e2;
 } pre, code, tt {
Changed:
<
<		 color:#7A4707;
>
>		 color:#7A4707;
 } blockquote {
Changed:
<
<		 border-color:%INFO_BORDER%; background-color:#fbfbfb;
>
>		 background-color:#fbfbfb; border-color:#ddd;
 }
Added:
>
>		blockquote h2 { background:none; }
 h1, h2, h3, h4, h5, h6 {
Changed:
<
<		 color:#630000;
>
>		 color:#630000;
 }
Deleted:
<
<		h1 a:link, h1 a:visited { color:#630000; } h1 a:hover { color:#fff; }
 h2 {
Changed:
<
<		 background-color:#f6f6f6; border-color:#e2e2e2;
>
>		 background-color:#f6f6f6; border-color:#e2e2e2;
 } h3, h4, h5, h6 {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 } /* to override old Render.pm coded font color style */ .twikiNewLink font {
Changed:
<
<		 color:inherit;
>
>		 color:inherit;
 } .twikiNewLink a:link sup, .twikiNewLink a:visited sup {
Changed:
<
<		 color:#777; border-color:#e2e2e2;
>
>		 color:#777; border-color:#ddd;
 } .twikiNewLink a:hover sup {
Changed:
<
<		 background-color:#ce000f; color:#fff; border-color:#ce000f;
>
>		 background-color:#ce000f; color:#fff; border-color:#ce000f;
 } .twikiNewLink {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#ddd;
 } :link:focus, :visited:focus, :link, :visited, :link:active, :visited:active {
Changed:
<
<		 color:#4571d0; background-color:transparent;
>
>		 color:#4571d0; background-color:transparent;
 } :link:hover, :visited:hover {
Changed:
<
<		 color:#fff; background-color:#ce000f;
>
>		 color:#fff; background-color:#ce000f;
Added:
>
>		 background-image:none;
 } :link:hover img, :visited:hover img {
Changed:
<
<		 background-color:transparent;
>
>		 background-color:transparent;
 }
Deleted:
<
<		/* fix for hover over transparent logo: */ #patternTopBar :link:hover img, #patternTopBar :visited:hover img { background:#fff; }
 .patternTopic a:visited {
Changed:
<
<		 color:#777;
>
>		 color:#666;
 } .patternTopic a:hover {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }
Added:
>
>		#patternMainContents h1 a:link, #patternMainContents h1 a:visited, #patternMainContents h2 a:link, #patternMainContents h2 a:visited, #patternMainContents h3 a:link, #patternMainContents h3 a:visited, #patternMainContents h4 a:link, #patternMainContents h4 a:visited, #patternMainContents h5 a:link, #patternMainContents h5 a:visited, #patternMainContents h6 a:link, #patternMainContents h6 a:visited { color:#630000; } #patternMainContents h1 a:hover, #patternMainContents h2 a:hover, #patternMainContents h3 a:hover, #patternMainContents h4 a:hover, #patternMainContents h5 a:hover, #patternMainContents h6 a:hover { color:#fff; } .patternTopic .twikiUnvisited a:visited { color:#4571d0; } .patternTopic .twikiUnvisited a:hover { color:#fff; }
  /* Form elements */

textarea, input, select {

Changed:
<
<		 border-color:#aaa; color:#000; background-color:#fff;
>
>		 border-color:#aaa; color:#000; background-color:#fff;
 } .twikiSubmit, .twikiButton {
Changed:
<
<		 border-color:#fff #888 #888 #fff;
>
>		 border-color:#fff #888 #888 #fff;
Deleted:
<
<		 color:#000; background-color:#fff;
 }
Changed:
<
<		.twikiSubmit:active, .twikiButton:active { border-color:%BUTTON_BORDERS_ACTIVE%;
>
>		.twikiSubmit { color:#fff; background-color:#06c;
Deleted:
<
<		 color:#000;
 }
Added:
>
>		.twikiButton { color:#000; background-color:#e2e3e3; } .twikiButtonCancel { color:#000; background-color:#f2d5d0; }
 .twikiSubmitDisabled, .twikiSubmitDisabled:active {
Changed:
<
<		 border-color:#e0e0e0; color:#aaa; background-color:#fafaf8;
>
>		 border-color:#fff #ccc #ccc #fff; color:#aaa; background-color:#fbfbfb;
 }
Added:
>
>		.twikiTextarea,
 .twikiInputField,
Added:
>
>		.twikiInputFieldDisabled, .twikiInputFieldReadOnly,
 .twikiSelect {
Changed:
<
<		 border-color:#bbb #f2f2f2 #f2f2f2 #bbb;
>
>		 border-color:#bbb #f2f2f2 #f2f2f2 #bbb;
Deleted:
<
<		 color:#000; background-color:#fff;
 }
Added:
>
>		.twikiTextarea, .twikiInputField, .twikiSelect { color:#000; background-color:#fff; } .twikiInputField:active, .twikiInputField:focus, .twikiInputFieldFocus { background-color:#ffffe0; }

.twikiTextareaRawView { color:#000; }

 .twikiInputFieldDisabled {
Changed:
<
<		 color:#777;
>
>		 color:#aaa;
Added:
>
>		 background-color:#fafaf8;
 }
Added:
>
>		.twikiInputFieldReadOnly { color:#777; } .twikiSelect { border-color:#bbb #f2f2f2 #f2f2f2 #bbb; color:#000; background-color:#fff; } .twikiInputFieldDisabled, .twikiSelectDisabled { color:#aaa; border-color:#bbb #f2f2f2 #f2f2f2 #bbb; background-color:#fafaf8; } .twikiInputFieldBeforeFocus { color:#777; }
 
Changed:
<
<		/* ----------------------------------------------------------- Plugin elements ----------------------------------------------------------- */
>
>		/* ----------------------------------------------------------- Plugin elements ----------------------------------------------------------- */
  /* TablePlugin */ .twikiTable,
Changed:
<
<		.twikiTable td {
>
>		.twikiTable td,
Deleted:
<
<		 border-color:#e2e2e2; }
 .twikiTable th {
Changed:
<
<		 border-color:#e2e2e2 #fff;
>
>		 border-color:#e2e2e2;
 } .twikiTable th a:link, .twikiTable th a:visited, .twikiTable th a font {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }

/* TwistyContrib */ .twistyPlaceholder {

Changed:
<
<		 color:#777;
>
>		 color:#777;
 } a:hover.twistyTrigger {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }

/* TipsContrib */ .tipsOfTheDay {

Deleted:
<
<		 background-color:#ffe67b;
 }
Deleted:
<
<		.patternTopic .tipsOfTheDayHeader { color:%STRONG_TEXT%; } /* TipsContrib - in left bar */ #patternLeftBar .tipsOfTheDay a:link, #patternLeftBar .tipsOfTheDay a:visited { color:#630000; } #patternLeftBar .tipsOfTheDay a:hover { color:#fff; }
  /* RevCommentPlugin */ .revComment .patternTopicAction {
Changed:
<
<		 background-color:#f6f6f6;
>
>		 background-color:#f6f6f6;
 }
Changed:
<
<		/* ----------------------------------------------------------- TWiki styles ----------------------------------------------------------- */
>
>		/* ----------------------------------------------------------- TWiki styles ----------------------------------------------------------- */
  .twikiGrayText {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 } .twikiGrayText a:link, .twikiGrayText a:visited {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 } .twikiGrayText a:hover {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }

table.twikiFormTable th.twikiFormTableHRow, table.twikiFormTable td.twikiFormTableRow {

Changed:
<
<		 color:#777;
>
>		 color:#777;
 } .twikiEditForm {
Changed:
<
<		 color:#000;
>
>		 color:#000;
 } .twikiEditForm .twikiFormTable, .twikiEditForm .twikiFormTable th, .twikiEditForm .twikiFormTable td {
Changed:
<
<		 border-color:%TABLE_BORDER_LIGHT%;
>
>		 border-color:#e2e2e2;
 } /* use a different table background color mix: no odd/even rows, no white background */ .twikiEditForm .twikiFormTable td {
Changed:
<
<		 background-color:#f7fafc;
>
>		 background-color:#f7fafc;
 } .twikiEditForm .twikiFormTable th {
Changed:
<
<		 background-color:#f0f6fb;
>
>		 background-color:#f0f6fb;
 } .patternContent .twikiAttachments, .patternContent .twikiForm {
Changed:
<
<		 background-color:#f6f6f6; border-color:#e2e2e2;
>
>		 background-color:#f6f6f6; border-color:#e2e2e2;
 } .twikiAttachments table, table.twikiFormTable {
Changed:
<
<		 border-color:#dadada; background-color:#fff;
>
>		 border-color:#e2e2e2; background-color:#fff;
 } .twikiAttachments table {
Changed:
<
<		 background-color:#fff;
>
>		 background-color:#fff;
 } .twikiAttachments td, .twikiAttachments th {
Changed:
<
<		 border-color:#dadada;
>
>		 border-color:#e2e2e2;
 } .twikiAttachments .twikiTable th font, table.twikiFormTable th.twikiFormTableHRow font {
Changed:
<
<		 color:#4571d0;
>
>		 color:#4571d0;
 }

.twikiFormSteps {

Changed:
<
<		 background-color:#fbfbfb; border-color:#e2e2e2;
>
>		 background-color:#fbfbfb; border-color:#e2e2e2;
 } .twikiFormStep {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 } .twikiFormStep h3, .twikiFormStep h4 {
Changed:
<
<		 background-color:transparent;
>
>		 color:#036;
 }
Added:
>
>		.twikiFormStep h3, .twikiFormStep h4 { background-color:transparent; } .twikiActionFormStepSign { color:#036; }
 .twikiToc .twikiTocTitle {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 } .twikiBroadcastMessage {
Changed:
<
<		 background-color:yellow;
>
>		 background-color:#ffe67b;
 }
Added:
>
>		.twikiNotification { background-color:#ffe67b; } #twikiLogin .patternLoginNotification { background-color:#fff; border-color:#f00; } .twikiHelp { background-color:#ffe67b; } .twikiHelp { background-color:#f6f6f6; border-color:#e2e2e2; }
 .twikiBroadcastMessage b, .twikiBroadcastMessage strong {
Changed:
<
<		 color:#f00;
>
>		 color:#f00;
 } .twikiAlert, .twikiAlert code {
Changed:
<
<		 color:#f00;
>
>		 color:#f00;
 } .twikiEmulatedLink {
Changed:
<
<		 color:#4571d0;
>
>		 color:#4571d0;
 } .twikiPageForm table {
Changed:
<
<		 border-color:#e2e2e2; background:#fff;
>
>		 border-color:#e2e2e2; background:#fff;
 } .twikiPageForm hr {
Changed:
<
<		 border-color:#cfcfcf; background-color:#cfcfcf; color:#cfcfcf;
>
>		 border-color:#cfcfcf; background-color:#cfcfcf; color:#cfcfcf;
 }
Deleted:
<
<		.twikiHelp { background-color:#ffe67b; border-color:%INFO_BORDER%; }
 .twikiAccessKey {
Changed:
<
<		 color:inherit; border-color:#777;
>
>		 color:inherit; border-color:#777;
 } a:link .twikiAccessKey,
Changed:
<
<		a:visited .twikiAccessKey,
>
>		a:visited .twikiAccessKey {
Added:
>
>		 color:inherit; }
 a:hover .twikiAccessKey {
Changed:
<
<		 color:inherit;
>
>		 color:inherit;
 }
Added:
>
>		.twikiImage img { border-color:#eee; background-color:#fff; } #patternTopBar .twikiImage img { background-color:transparent; } .twikiImage a:hover img { border-color:#ce000f; }
 
Changed:
<
<		 /* ----------------------------------------------------------- Pattern skin specific elements
>
>		/* ----------------------------------------------------------- Pattern skin specific elements ----------------------------------------------------------- */
Deleted:
<
<		 ----------------------------------------------------------- */
 #patternPage {
Changed:
<
<		 background-color:#fff;
>
>		 background-color:#fff;
 }
Changed:
<
<		/* Left bar */ #patternLeftBarContents { color:#777;
>
>		.patternHomePath a:link, .patternHomePath a:visited { border-color:#ddd;
Added:
>
>		 color:#666;
 }
Changed:
<
<		#patternLeftBarContents .patternWebIndicator { color:#000;
>
>		.patternTop a:hover { border:none;
Added:
>
>		 color:#fff;
 }
Changed:
<
<		#patternLeftBarContents .patternWebIndicator a:link, #patternLeftBarContents .patternWebIndicator a:visited { color:#000;
>
>		.patternHomePath .patternRevInfo, .patternHomePath .patternRevInfo a:link, .patternHomePath .patternRevInfo a:visited {
Added:
>
>		 color:#777;
 }
Changed:
<
<		#patternLeftBarContents .patternWebIndicator a:hover { color:#fff;
>
>		.patternHomePath .patternRevInfo a:hover { color:#fff;
 }
Added:
>
>		 /* Left bar */ #patternLeftBarContents { color:#000; }
 #patternLeftBarContents hr {
Changed:
<
<		 color:#e2e2e2; background-color:#e2e2e2;
>
>		 color:#e2e2e2; background-color:#e2e2e2;
 } #patternLeftBarContents a:link, #patternLeftBarContents a:visited {
Changed:
<
<		 color:#444;
>
>		 color:#444;
 } #patternLeftBarContents a:hover {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 }
Added:
>
>		#patternLeftBarContents .patternLeftBarPersonal, #patternLeftBarContents .patternWebIndicator { border-color:#dadada; }
 #patternLeftBarContents b, #patternLeftBarContents strong {
Changed:
<
<		 color:%STRONG_TEXT%;
>
>		 color:#630000;
 }
Changed:
<
<		#patternLeftBarContents .patternChangeLanguage {
>
>
Deleted:
<
<		 color:#777; } #patternLeftBarContents .patternLeftBarPersonal { background-color:%SIDE_BAR_PERSONAL_BACKGROUND% } #patternLeftBarContents .patternLeftBarPersonal a:link, #patternLeftBarContents .patternLeftBarPersonal a:visited, #patternLeftBarContents .twikiHierarchicalNavigation a:link, #patternLeftBarContents .twikiHierarchicalNavigation a:visited { color:#4571d0; } #patternLeftBarContents .patternLeftBarPersonal a:hover, #patternLeftBarContents .twikiHierarchicalNavigation a:hover { color:#fff; background-color:#ce000f; } #patternLeftBarContents .twikiHierarchicalNavigation { background:#fff; }
 .patternTopicActions {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
Added:
>
>		 background-color:#f6f6f6; color:#777;
 } .patternTopicAction {
Changed:
<
<		 color:#777;
>
>		 border-color:#e2e2e2;
Deleted:
<
<		 border-color:#e2e2e2; background-color:#f6f6f6;
 } .patternTopicAction s, .patternTopicAction strike {
Changed:
<
<		 color:#aaa;
>
>		 color:#aaa;
 } .patternTopicAction .twikiSeparator {
Changed:
<
<		 color:#e2e2e2;
>
>		 color:#e2e2e2;
 } .patternActionButtons a:link, .patternActionButtons a:visited {
Changed:
<
<		 color:#be000a;
>
>		 color:#be000a;
 } .patternActionButtons a:hover {
Changed:
<
<		 color:#fff;
>
>		 color:#fff;
 } .patternTopicAction .twikiAccessKey {
Changed:
<
<		 color:#be000a; border-color:#be000a;
>
>		 color:#be000a; border-color:#be000a;
 }
Added:
>
>		.patternTopicAction a:hover .twikiAccessKey { color:#fff; }
 .patternTopicAction label {
Changed:
<
<		 color:#000;
>
>		 color:#000;
 } .patternHelpCol {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 }
Changed:
<
<		.patternFormFieldDefaultColor { /* input fields default text color (no user input) */ color:#777;
>
>		.patternSigLine { color:#777; background-color:#f6f6f6;
Added:
>
>		 border-color:#e2e2e2;
 }
Deleted:
<
<		 .patternToolBar .patternButton s, .patternToolBar .patternButton strike, .patternToolBar .patternButton a:link, .patternToolBar .patternButton a:visited { border-color:#e2e2e2; background-color:#fff; } .patternToolBar .patternButton a:link, .patternToolBar .patternButton a:visited { color:#777; } .patternToolBar .patternButton s, .patternToolBar .patternButton strike { color:#aaa; border-color:#e0e0e0; } .patternToolBar .patternButton a:hover { background-color:#ce000f; color:#fff; border-color:#be000a; } .patternToolBar .patternButton img { background-color:transparent; } .patternToolBarBottom { border-color:#e2e2e2; }
 .patternToolBar a:link .twikiAccessKey, .patternToolBar a:visited .twikiAccessKey {
Changed:
<
<		 color:inherit; border-color:#777;
>
>		 color:inherit; border-color:#666;
 } .patternToolBar a:hover .twikiAccessKey {
Changed:
<
<		 background-color:transparent; color:inherit;
>
>		 background-color:transparent; color:inherit;
Added:
>
>		 border-color:#666;
 }
Deleted:
<
<		 .patternRevInfo, .patternRevInfo a:link, .patternRevInfo a:visited { color:#777; } .patternRevInfo a:hover { color:#fff; }

.patternMoved, .patternMoved a:link, .patternMoved a:visited { color:#777; } .patternMoved a:hover { color:#fff; }

 .patternSaveHelp {
Changed:
<
<		 background-color:#fff;
>
>		 background-color:#fff;
 }

/* WebSearch, WebSearchAdvanced */

Added:
>
>		table#twikiSearchTable { border-color:#e2e2e2; }
 table#twikiSearchTable th, table#twikiSearchTable td {
Changed:
<
<		 background-color:#fff; border-color:#e2e2e2;
>
>		 background-color:#fff; border-color:#e2e2e2;
Deleted:
<
<		} table#twikiSearchTable th { color:#000;
 }
Changed:
<
<		table#twikiSearchTable td.first { background-color:#f6f6f6;
>
>		table#twikiSearchTable hr { border-color:#e2e2e2;
Added:
>
>		 background-color:#e2e2e2;
 }
Added:
>
>		table#twikiSearchTable th { color:#000; }
 
Changed:
<
<		/* ----------------------------------------------------------- Search results styles and overridden styles used in search.pattern.tmpl ----------------------------------------------------------- */
>
>		/* ----------------------------------------------------------- Search results styles and overridden styles used in search.pattern.tmpl ----------------------------------------------------------- */
  h3.patternSearchResultsHeader, h4.patternSearchResultsHeader {
Changed:
<
<		 background-color:#f6f6f6; border-color:#dadada;
>
>		 background-color:#f6f6f6; border-color:#e2e2e2;
 } h4.patternSearchResultsHeader {
Changed:
<
<		 color:#000;
>
>		 color:#000;
 } .patternNoViewPage h4.patternSearchResultsHeader {
Changed:
<
<		 color:#630000;
>
>		 color:#630000;
 } .patternSearchResult .twikiBottomRow {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 } .patternSearchResult .twikiAlert {
Changed:
<
<		 color:#f00;
>
>		 color:#f00;
 } .patternSearchResult .twikiSummary .twikiAlert {
Changed:
<
<		 color:#900;
>
>		 color:#900;
 } .patternSearchResult .twikiNew {
Changed:
<
<		 background-color:#ECFADC; border-color:#049804; color:#049804;
>
>		 background-color:#ECFADC; border-color:#049804; color:#049804;
 } .patternViewPage .patternSearchResultsBegin {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 }

/* Search results in book view format */

.patternBookView .twikiTopRow {

Changed:
<
<		 background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */ color:#777;
>
>		 background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */ color:#777;
 } .patternBookView .twikiBottomRow {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 } .patternBookView .patternSearchResultCount {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 }
Deleted:
<
<		/* oopsmore.pattern.tmpl */

table.patternDiffOptions img { border-color:#dadada; }

 /* edit.pattern.tmpl */
Deleted:
<
<		.twikiChangeFormButton .twikiButton, .twikiChangeFormButtonHolder .twikiButton { /* looks like a link */ color:#4571d0; background:none; } .patternSig input { color:#777; background-color:#fff; }
 /* preview.pattern.tmpl */
Changed:
<
<		.patternPreviewArea { border-color:#f00; background-color:#fff;
>
>		.twikiPreviewArea { border-color:#f00; background-color:#fff;
 }

/* rdiff.pattern.tmpl */

.patternDiff {

Changed:
<
<		 border-color:#6b7f93;
>
>		 border-color:#6b7f93;
 }
Changed:
<
<		.patternDiff h4.patternSearchResultsHeader { background-color:#6b7f93; color:#fff;
>
>		#patternMainContents .patternDiff h4.patternSearchResultsHeader { background-color:#6b7f93; color:#fff;
 }
Changed:
<
<		.patternDiff h4.patternSearchResultsHeader a:link, .patternDiff h4.patternSearchResultsHeader a:visited { color:#fff;
>
>		#patternMainContents .patternDiff h4.patternSearchResultsHeader a:link, #patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited { color:#fff;
 } tr.twikiDiffDebug td {
Changed:
<
<		 border-color:#e2e2e2;
>
>		 border-color:#e2e2e2;
 } .patternDiffPage .twikiDiffTable th {
Changed:
<
<		 background-color:#ccc;
>
>		 background-color:#ccc;
 } /* Changed */ .twikiDiffChangedHeader, tr.twikiDiffDebug .twikiDiffChangedText, tr.twikiDiffDebug .twikiDiffChangedText {
Changed:
<
<		 background:#9f9; /* green - do not change */
>
>		 background:#9f9; /* green - do not change */
 } /* Deleted */ .twikiDiffDeletedHeader, tr.twikiDiffDebug .twikiDiffDeletedMarker, tr.twikiDiffDebug .twikiDiffDeletedText {
Changed:
<
<		 background-color:#f99; /* red - do not change */
>
>		 background-color:#f99; /* red - do not change */
 } /* Added */ .twikiDiffAddedHeader, tr.twikiDiffDebug .twikiDiffAddedMarker, tr.twikiDiffDebug .twikiDiffAddedText {
Changed:
<
<		 background-color:#ccf; /* violet - do not change */
>
>		 background-color:#ccf; /* violet - do not change */
 } /* Unchanged */ tr.twikiDiffDebug .twikiDiffUnchangedText {
Changed:
<
<		 color:#777;
>
>		 color:#777;
 } .twikiDiffUnchangedTextContents { } .twikiDiffLineNumberHeader {
Changed:
<
<		 background-color:#ccc;
>
>		 background-color:#ccc;
 }

/* IMAGES */ /* image positions are set here as well as these are dependent on the image */

Changed:
<
<		.twikiInputField { background-image:url(background_input.gif); background-repeat:repeat-x;
>
>		h2, .patternTopicAction { background-image:url(bg_action_gradient.gif);
Added:
>
>		 background-repeat:repeat-x;
 }
Changed:
<
<		.twikiInputFieldDisabled { background-image:none; border:none;
>
>		.twikiToc li { background-image:url(bullet-toc.gif); background-repeat:no-repeat;
Added:
>
>		 background-position:0 .4em;
 }
Changed:
<
<		.twikiButton { background-image:url(background_button.gif); background-repeat:repeat-x;
>
>		#patternOuter, #patternTopBar { /* gradient yellow of left bar and main */
Added:
>
>		 background-image:url(bg_outer_gradient.gif); background-repeat:repeat-x;
 }
Changed:
<
<		.patternToolBarButtons .patternButton a { /*
>
>		.patternPrintPage #patternOuter { background:#fff; /* white - do not change */
Deleted:
<
<		 background-image:url(background_button.gif); background-repeat:repeat-x; */
 }
Changed:
<
<		.twikiSubmit { background-image:url(background_submit.gif); background-repeat:repeat-x;
>
>		.twikiPageForm table, table#twikiSearchTable td.twikiFirstRow { background-image:url(form_gradient.gif);
Added:
>
>		 background-repeat:repeat-x; background-color:#f5f5f5;
 }
Added:
>
>		.twikiSubmit,
 .twikiSubmitDisabled {
Changed:
<
<		 background-image:none;
>
>		 background-image:url(bg_submit_gradient.gif);
Added:
>
>		 background-repeat:repeat-x;
 }
Changed:
<
<		.twikiToc li { background-image:url(bullet-child-black.gif); background-repeat:no-repeat; background-position:0 .35em;
>
>		.twikiSubmit, a.twikiSubmit:link, a.twikiSubmit:visited { background-position:0px 0px;
Added:
>
>		 background-color:#06c; border-color:#abcdf0 #0048b8 #0048b8 #abcdf0; color:#fff;
 }
Changed:
<
<		/*#patternLeftBarContents .patternLeftBarPersonal,*/ #twikiLogin, #patternLeftBarContents .tipsOfTheDayContents { background-image:url(gradient_blue.gif); background-repeat:repeat-x;
>
>		.twikiSubmit:hover, a.twikiSubmit:hover { background-position:0px -80px; background-color:#0047b7; border-color:#98bce9 #0031a4 #0031a4 #98bce9;
Added:
>
>		 color:#fff;
 }
Changed:
<
<		#patternOuter { /* gradient yellow of left bar and main */ background-image:url(gradient_yellow.gif); background-repeat:repeat-x;
>
>		.twikiSubmit:active, a.twikiSubmit:active { background-position:0px -160px; background-color:#73ace6;
Added:
>
>		 border-color:#0031a4 #98bce9 #98bce9 #0031a4; color:#fff;
 }
Changed:
<
<		.patternPrintPage #patternOuter { background:#fff; /* white - do not change */
>
>		.twikiSubmitDisabled, .twikiSubmitDisabled:hover,
Added:
>
>		.twikiSubmitDisabled:active { background-position:0px -240px; background-color:#d9e8f7; border-color:#f5f9fd #ccc #ccc #f5f9fd; color:#ccc;
 }
Changed:
<
<		.twikiPageForm table { background-image:url(form_gradient.gif); background-repeat:repeat-x;
>
>		.twikiButton, a.twikiButton:link, a.twikiButton:visited {
Added:
>
>		 background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333;
 }
Added:
>
>		.twikiChangeFormButtonHolder .twikiButton { background-color:#fff; background-image:none; color:#06c; } .twikiChangeFormButtonHolder .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; } .twikiButton:hover, .twikiChangeFormButtonHolder .twikiButton:hover, a.twikiButton:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .twikiButton:active, .twikiChangeFormButtonHolder .twikiButton:active, a.twikiButton:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .twikiButtonDisabled, .twikiButtonDisabled:hover, .twikiButtonDisabled:active { background-image:url(bg_button_gradient.gif); background-repeat:repeat-x; background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .twikiButtonCancel { background-image:url(bg_buttoncancel_gradient.gif); background-repeat:repeat-x; background-position:0px 0px; border-color:#f3ddd7 #b5706a #b5706a #f3ddd7; background-color:#cc867f; color:#333; } .twikiButtonCancel:hover { background-position:0px -80px; border-color:#eacac1 #9f564f #9f564f #eacac1; background-color:#b26259; color:#222; } .twikiButtonCancel:active { background-position:0px -160px; border-color:#9f564f #eacac1 #eacac1 #9f564f; background-color:#e5bdb1; color:#222; } .patternToolBar span a:link, .patternToolBar span a:visited, .patternToolBar span s, .patternToolBar span strike { background-image:url(bg_button_small_gradient.gif); background-repeat:repeat-x; } .patternToolBar span a:link, .patternToolBar span a:visited { background-position:0px 0px; border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec; background-color:#dbd9cf; color:#333; } .patternToolBar span a:hover { background-position:0px -80px; border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb; background-color:#c2bfae; color:#222; } .patternToolBar span a:active { background-position:0px -160px; border-color:#a3a092 #f4f2eb #f4f2eb #a3a092; background-color:#e8e5d7; color:#222; } .patternToolBar span s, .patternToolBar span strike { background-position:0px -240px; border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9; background-color:#edece6; color:#bbb; } .patternTextareaButton { border-color:#fffefd #b8b6ad #b8b6ad #fffefd; overflow:hidden; } .patternButtonFontSelector { background-image:url(button_font_selector.gif); width:33px; height:16px; } .patternButtonFontSelectorProportional { background-position:0 0; } .patternButtonFontSelectorMonospace { background-position:0 -16px; } .patternButtonEnlarge, .patternButtonShrink { background-image:url(button_arrow.gif); width:16px; height:16px; } .patternButtonEnlarge { background-position:0 0; } .patternButtonEnlarge:hover { background-position:0 -42px; } .patternButtonEnlarge:active { background-position:0 -84px; } .patternButtonShrink { background-position:16px 0; } .patternButtonShrink:hover { background-position:16px -42px; } .patternButtonShrink:active { background-position:16px -84px; } .twikiBroadcastMessage, .twikiNotification { background-image:url(background_alert.gif); background-repeat:repeat-x; }
 
Changed:
<
<
>
>		/* common settings */
Deleted:
<
<		/* commong settings */
 .patternLeftBarPersonal li,
Deleted:
<
<		.twikiHierarchicalNavigation .twikiChildTopics li, .twikiHierarchicalNavigation .twikiParentTopic li,
 li.patternLogOut, li.patternLogIn {
Changed:
<
<		 padding-left:13px; background-position:0 .25em; background-repeat:no-repeat;
>
>		 padding-left:13px; background-position:0 .4em; background-repeat:no-repeat;
 }
Changed:
<
<		.patternLeftBarPersonal li, .twikiHierarchicalNavigation .twikiChildTopics li {
>
>		.patternLeftBarPersonal li { background-image:url(bullet-personal_sidebar.gif);
Deleted:
<
<		 background-image:url(bullet-blue.gif);
 }
Deleted:
<
<		.twikiHierarchicalNavigation .twikiParentTopic li { background-image:url(bullet-parent.gif); }
 .patternLeftBarPersonal li.patternLogOut {
Changed:
<
<		 background-image:url(bullet-lock.gif);
>
>		 background-image:url(bullet-lock.gif);
 } .patternLeftBarPersonal li.patternLogIn {
Changed:
<
<		 background-image:url(bullet-lock.gif);
>
>		 background-image:url(bullet-lock.gif);
 } %ENDATTACH%
Deleted:
<
<
 

Revision 12006-10-21 - TWikiContributor

 

Color scheme settings for PatternSkin

Appearance: text colors, background colors, border colors.

Use this topic to change the color settings of PatternSkin. When this topic is saved, the attachment theme-colors.css will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.

Usage

Step 1

Let PatternSkin point to the custom-made colors style sheet. In Main.TWikiPreferences put: 
   * Set USERCOLORSURL = %PUBURLPATH%/%MAINWEB%/TWikiPreferences/theme-colors.css

Step 2

Edit this topic, and change the color variables as you like.

Color variables

On this page:

Logical groupings

Text on background

MAIN_TEXT_COLOR Main text color

  • Set MAIN_TEXT_COLOR = #000

MAIN_BACKGROUND_COLOR Main background color

  • Set MAIN_BACKGROUND_COLOR = #fff

LIGHT_ON_DARK_TEXT_COLOR Light on dark text color

  • Set LIGHT_ON_DARK_TEXT_COLOR = #fff

Links

LINK_TEXT_NORMAL Link normal text

  • Set LINK_TEXT_NORMAL = #06c

LINK_BACKGROUND_NORMAL Link normal background

  • Set LINK_BACKGROUND_NORMAL =

LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)

  • Set LINK_TEXT_ACTION_BUTTON = #D6000F

LINK_TEXT_HOVER Link hover text

  • Set LINK_TEXT_HOVER = #FBF7E8

LINK_BACKGROUND_HOVER Link background hover

  • Set LINK_BACKGROUND_HOVER = #D6000F

SIDE_BAR_LINK_TEXT Side bar link text

  • Set SIDE_BAR_LINK_TEXT = #666

LINK_TEXT_NORMAL_TABLE_HEADER Table header link text

  • Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff

LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border

  • Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb

LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text

  • Set LINK_TEXT_SORTED_TABLE_HEADER = #fff

LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text

  • Set LINK_TEXT_HOVER_TABLE_HEADER = #fff

LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header

  • Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999

Disabled

DISABLED_BORDER Disabled border

  • Set DISABLED_BORDER = #e0e0e0

DISABLED_TEXT Disabled text

  • Set DISABLED_TEXT = #ccc

DISABLED_BACKGROUND Disabled background

  • Set DISABLED_BACKGROUND = #f5f5f5

'New'

NEW_TEXT New text (green)

  • Set NEW_TEXT = #049804

NEW_BACKGROUND New background (light green)

  • Set NEW_BACKGROUND = #ECFADC

Alert

ALERT_TEXT Alert text (red)

  • Set ALERT_TEXT = #f00

ALERT_TEXT_MUTED Muted alert text (dark red)

  • Set ALERT_TEXT_MUTED = #900

ALERT_BORDER Alert border

  • Set ALERT_BORDER = #f00

Buttons

BUTTON_TEXT Button text color (dark gray)

  • Set BUTTON_TEXT = #333

BUTTON_BORDERS Button borders

  • Set BUTTON_BORDERS = #ddd #aaa #aaa #ddd

BUTTON_BORDERS_ACTIVE Button borders (active)

  • Set BUTTON_BORDERS_ACTIVE = #999 #ccc #ccc #999

SUBMIT_BUTTON_BACKGROUND Submit button background (dark yellow)

  • Set SUBMIT_BUTTON_BACKGROUND = #FED764

SUBMIT_BUTTON_BORDER Submit button border (blue)

  • Set SUBMIT_BUTTON_BORDER = #88B6CF

Forms

INPUT_FIELD_BORDERS Input field borders

  • Set INPUT_FIELD_BORDERS = #aaa #ddd #ddd #aaa

FORM_INPUT_BORDER Textarea, input and select (darker gray)

  • Set FORM_INPUT_BORDER = #aaa

FORM_BORDER Form (same as twikiTable border)

  • Set FORM_BORDER = #ccc

ACTIVE_FORM_BACKGROUND Edit form, form steps

  • Set ACTIVE_FORM_BACKGROUND = #f8fbfc

FORMFIELD_ACTIVE Active form field (not implemented yet)

  • Set FORMFIELD_ACTIVE = #ffc

Color groupings

Text colors

GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)

  • Set GENERAL_TEXT = #000

HEADER_TEXT Header text

  • Set HEADER_TEXT = #a00

CODE_TEXT Code text, left bar text and links

  • Set CODE_TEXT = #7A4707

MUTED_TEXT Muted text (dark gray)

  • Set MUTED_TEXT = #666

GRAYED_OUT_TEXT Grayed out text

  • Set GRAYED_OUT_TEXT = #8E9195

STRONG_TEXT Dark text, header (dark gray)

  • Set STRONG_TEXT = #333

SEPARATOR Seperator in topic action bar

  • Set SEPARATOR = #aaa

Background colors

GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)

  • Set GENERAL_BACKGROUND = #fff

SIDE_BAR_BACKGROUND Side bar background

  • Set SIDE_BAR_BACKGROUND = #f7fafc

SIDE_BAR_PERSONAL_BACKGROUND Side bar personal background

  • Set SIDE_BAR_PERSONAL_BACKGROUND = #e6eff5;

INFO_BACKGROUND Info (very light blue) (placeholder for background image)

  • Set INFO_BACKGROUND = #f8fbfc

TOPIC_ACTION_BACKGROUND Topic action row (light yellow)

  • Set TOPIC_ACTION_BACKGROUND = #FCF8EC

HEADER_BACKGROUND H1, H2, etc header (light yellow)

  • Set HEADER_BACKGROUND = #FDFAF3

ATTACHMENT_AND_FORM_BACKGROUND Attachment, form (light yellow)

  • Set ATTACHMENT_AND_FORM_BACKGROUND = #FEFCF6

DIFF_HEADER_BACKGROUND Diff header (dark gray) (same as GRAYED_OUT_TEXT)

  • Set DIFF_HEADER_BACKGROUND = #ccc

Table colors

TABLE_DATA_BACKGROUND Table data background
  • Set TABLE_DATA_BACKGROUND = #f0f6f9
TABLE_HEADER_BACKGROUND Table header background
  • Set TABLE_HEADER_BACKGROUND = #6b7f93
TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background
  • Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
  • Set TABLE_DATA_ODD_BACKGROUND = #edf4f9
TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
  • Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
  • Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
  • Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
  • Set TABLE_DATA_MIX_BACKGROUND = #f7fafc

Border colors

INFO_BORDER Info (light blue)

  • Set INFO_BORDER = #D5E6F3

SEPARATOR_BORDER HR line, bottom of h2, attachment table, form (brown)

  • Set SEPARATOR_BORDER = #E2DCC8

MINOR_SEPARATOR_BORDER Header H3..H6 bottom (75% of SEPARATOR_BORDER)

  • Set MINOR_SEPARATOR_BORDER = #E9E4D2

LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)

  • Set LAYOUT_ELEMENT_BORDER = #ccc

TABLE_BORDER Table border, sup (light neutral tone)

  • Set TABLE_BORDER = #ccc

TABLE_BORDER_LIGHT Table border light

  • Set TABLE_BORDER_LIGHT = #e2e7eb 

<-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing! 

%STARTATTACH{"theme-colors.css"}%
/* PatternSkin colors */
/* Generated by AttachContentPlugin from TWiki.PatternSkinColorSettings */

/* LAYOUT ELEMENTS */

#patternTopBar {
   background-color:%MAIN_BACKGROUND_COLOR%;
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternMain { /* don't set a background here; use patternOuter */ }
#patternOuter {
   background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternLeftBar, #patternLeftBarContents { /* don't set a background here; use patternWrapper */ }
#patternWrapper {
   background-color:%SIDE_BAR_BACKGROUND%;
}
#patternBottomBar {
   background-color:%MAIN_BACKGROUND_COLOR%;
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
   color:%GRAYED_OUT_TEXT%;
}
#patternBottomBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* GENERAL HTML ELEMENTS */

html body {
   background-color:%MAIN_BACKGROUND_COLOR%;
   color:%MAIN_TEXT_COLOR%;
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
   background-color:transparent;
}
hr {
   color:%LAYOUT_ELEMENT_BORDER%;
   background-color:%LAYOUT_ELEMENT_BORDER%;
}
pre, code, tt {
   color:%CODE_TEXT%;
}
blockquote {
   border-color:%INFO_BORDER%;
   background-color:%ACTIVE_FORM_BACKGROUND%;
}
h1, h2, h3, h4, h5, h6 {
   color:%HEADER_TEXT%;
}
h1 a:link,
h1 a:visited {
   color:%HEADER_TEXT%;
}
h1 a:hover {
   color:%LINK_TEXT_HOVER%;
}
h2 {
   background-color:%HEADER_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
h3, h4, h5, h6 {
   border-color:%MINOR_SEPARATOR_BORDER%;
}
/* to override old Render.pm coded font color style */
.twikiNewLink font {
   color:inherit;
}
.twikiNewLink a:link sup,
.twikiNewLink a:visited sup {
   color:%MUTED_TEXT%;
   border-color:%TABLE_BORDER%;
}
.twikiNewLink a:hover sup {
   background-color:%LINK_BACKGROUND_HOVER%;
   color:%LINK_TEXT_HOVER%;
   border-color:%LINK_BACKGROUND_HOVER%;
}
.twikiNewLink {
   border-color:%TABLE_BORDER%;
}
:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
   color:%LINK_TEXT_NORMAL%;
   background-color:transparent;
}
:link:hover,
:visited:hover {
   color:%LINK_TEXT_HOVER%;
   background-color:%LINK_BACKGROUND_HOVER%;
}
:link:hover img,
:visited:hover img {
   background-color:transparent;
}
/* fix for hover over transparent logo: */
#patternTopBar :link:hover img,
#patternTopBar :visited:hover img {
   background:%MAIN_BACKGROUND_COLOR%;
}
.patternTopic a:visited {
   color:%MUTED_TEXT%;
}
.patternTopic a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* Form elements */

textarea,
input,
select {
   border-color:%FORM_INPUT_BORDER%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit,
.twikiButton {
   border-color:%BUTTON_BORDERS%;
   color:%BUTTON_TEXT%;
   background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit:active,
.twikiButton:active {
   border-color:%BUTTON_BORDERS_ACTIVE%;
   color:%GENERAL_TEXT%;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:active {
   border-color:%DISABLED_BORDER%;
   color:%DISABLED_TEXT%;
   background-color:%DISABLED_BACKGROUND%;
}
.twikiInputField,
.twikiSelect {
   border-color:%INPUT_FIELD_BORDERS%;
   color:%MAIN_TEXT_COLOR%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputFieldDisabled {
   color:%MUTED_TEXT%;
}

/*   -----------------------------------------------------------
   Plugin elements
   -----------------------------------------------------------   */

/* TablePlugin */
.twikiTable,
.twikiTable td {
   border-color:%TABLE_BORDER%;
}
.twikiTable th {
   border-color:%TABLE_BORDER% %MAIN_BACKGROUND_COLOR%;
}
.twikiTable th a:link,
.twikiTable th a:visited,
.twikiTable th a font {
   color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
}

/* TwistyContrib */
.twistyPlaceholder {
   color:%GRAYED_OUT_TEXT%;
}
a:hover.twistyTrigger {
   color:%LINK_TEXT_HOVER%;
}

/* TipsContrib */
.tipsOfTheDay {
   background-color:%INFO_BACKGROUND%;
}
.patternTopic .tipsOfTheDayHeader {
   color:%STRONG_TEXT%;
}
/* TipsContrib - in left bar */
#patternLeftBar .tipsOfTheDay a:link,
#patternLeftBar .tipsOfTheDay a:visited {
   color:%HEADER_TEXT%;
}
#patternLeftBar .tipsOfTheDay a:hover {
   color:%LINK_TEXT_HOVER%;
}

/* RevCommentPlugin */
.revComment .patternTopicAction {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
}

/*   -----------------------------------------------------------
   TWiki styles
   -----------------------------------------------------------   */

.twikiGrayText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:link,
.twikiGrayText a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:hover {
   color:%LINK_TEXT_HOVER%;
}

table.twikiFormTable th.twikiFormTableHRow,
table.twikiFormTable td.twikiFormTableRow {
   color:%MUTED_TEXT%;
}
.twikiEditForm {
   color:%MAIN_TEXT_COLOR%;
}
.twikiEditForm .twikiFormTable,
.twikiEditForm .twikiFormTable th,
.twikiEditForm .twikiFormTable td {
   border-color:%TABLE_BORDER_LIGHT%;
}
/* use a different table background color mix: no odd/even rows, no white background */
.twikiEditForm .twikiFormTable td  {
   background-color:%TABLE_DATA_MIX_BACKGROUND%;
}
.twikiEditForm .twikiFormTable th {
   background-color:%TABLE_DATA_ODD_BACKGROUND%;
}
.patternContent .twikiAttachments,
.patternContent .twikiForm {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
.twikiAttachments table,
table.twikiFormTable {
   border-color:%LAYOUT_ELEMENT_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments table {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments td, 
.twikiAttachments th {
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
.twikiAttachments .twikiTable th font,
table.twikiFormTable th.twikiFormTableHRow font {
   color:%LINK_TEXT_NORMAL%;
}

.twikiFormSteps {
   background-color:%ACTIVE_FORM_BACKGROUND%;
   border-color:%SEPARATOR_BORDER%;
}
.twikiFormStep {
   border-color:%SEPARATOR_BORDER%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
   background-color:transparent;
}
.twikiToc .twikiTocTitle {
   color:%MUTED_TEXT%;
}
.twikiBroadcastMessage {
   background-color:yellow;
}
.twikiBroadcastMessage b,
.twikiBroadcastMessage strong {
   color:%ALERT_TEXT%;
}
.twikiAlert,
.twikiAlert code {
   color:%ALERT_TEXT%;
}
.twikiEmulatedLink {
   color:%LINK_TEXT_NORMAL%;
}
.twikiPageForm table {
   border-color:%TABLE_BORDER%;
   background:%MAIN_BACKGROUND_COLOR%;
}
.twikiPageForm hr {
   border-color:%FORM_BORDER%;
   background-color:%FORM_BORDER%;
   color:%FORM_BORDER%;
}
.twikiHelp {
   background-color:%INFO_BACKGROUND%;
   border-color:%INFO_BORDER%;
}
.twikiAccessKey {
   color:inherit;
   border-color:%GRAYED_OUT_TEXT%;
}
a:link .twikiAccessKey,
a:visited .twikiAccessKey,
a:hover .twikiAccessKey {
   color:inherit;
}


/*   -----------------------------------------------------------
   Pattern skin specific elements
   -----------------------------------------------------------   */
#patternPage {
   background-color:%MAIN_BACKGROUND_COLOR%;
}
/* Left bar */
#patternLeftBarContents {
   color:%MUTED_TEXT%;
}
#patternLeftBarContents .patternWebIndicator {
   color:%GENERAL_TEXT%;
}
#patternLeftBarContents .patternWebIndicator a:link,
#patternLeftBarContents .patternWebIndicator a:visited {
   color:%GENERAL_TEXT%;
}
#patternLeftBarContents .patternWebIndicator a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents hr {
   color:%SEPARATOR_BORDER%;
   background-color:%SEPARATOR_BORDER%;
}
#patternLeftBarContents a:link,
#patternLeftBarContents a:visited {
   color:%SIDE_BAR_LINK_TEXT%;
}
#patternLeftBarContents a:hover {
   color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents b,
#patternLeftBarContents strong {
   color:%STRONG_TEXT%;
}
#patternLeftBarContents .patternChangeLanguage {
   color:%GRAYED_OUT_TEXT%;
}
#patternLeftBarContents .patternLeftBarPersonal {
   background-color:%SIDE_BAR_PERSONAL_BACKGROUND%
}
#patternLeftBarContents .patternLeftBarPersonal a:link,
#patternLeftBarContents .patternLeftBarPersonal a:visited,
#patternLeftBarContents .twikiHierarchicalNavigation a:link,
#patternLeftBarContents .twikiHierarchicalNavigation a:visited {
   color:%LINK_TEXT_NORMAL%;
}
#patternLeftBarContents .patternLeftBarPersonal a:hover,
#patternLeftBarContents .twikiHierarchicalNavigation a:hover {
   color:%LINK_TEXT_HOVER%;
   background-color:%LINK_BACKGROUND_HOVER%;
}
#patternLeftBarContents .twikiHierarchicalNavigation {
   background:%MAIN_BACKGROUND_COLOR%;
}
.patternTopicActions {
   border-color:%SEPARATOR_BORDER%;
}
.patternTopicAction {
   color:%MUTED_TEXT%;
   border-color:%SEPARATOR_BORDER%;
   background-color:%TOPIC_ACTION_BACKGROUND%;
}
.patternTopicAction s,
.patternTopicAction strike {
   color:%DISABLED_TEXT%;
}
.patternTopicAction .twikiSeparator {
   color:%SEPARATOR_BORDER%;
}
.patternActionButtons a:link,
.patternActionButtons a:visited {
   color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternActionButtons a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternTopicAction .twikiAccessKey {
   color:%LINK_TEXT_ACTION_BUTTON%;
   border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternTopicAction label {
   color:%GENERAL_TEXT%;
}
.patternHelpCol {
   color:%GRAYED_OUT_TEXT%;
}
.patternFormFieldDefaultColor {
   /* input fields default text color (no user input) */
   color:%GRAYED_OUT_TEXT%;
}

.patternToolBar .patternButton s,
.patternToolBar .patternButton strike,
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
   border-color:%SEPARATOR_BORDER%;
   background-color:%GENERAL_BACKGROUND%;
}
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
   color:%MUTED_TEXT%;
}
.patternToolBar .patternButton s,
.patternToolBar .patternButton strike {
   color:%DISABLED_TEXT%;
   border-color:%DISABLED_BORDER%;
}
.patternToolBar .patternButton a:hover {
   background-color:%LINK_BACKGROUND_HOVER%;
   color:%LINK_TEXT_HOVER%;
   border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternToolBar .patternButton img {
   background-color:transparent;
}   
.patternToolBarBottom {
   border-color:%SEPARATOR_BORDER%;
}
.patternToolBar a:link .twikiAccessKey,
.patternToolBar a:visited .twikiAccessKey {
   color:inherit;
   border-color:%MUTED_TEXT%;
}
.patternToolBar a:hover .twikiAccessKey {
   background-color:transparent;
   color:inherit;
}

.patternRevInfo,
.patternRevInfo a:link,
.patternRevInfo a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.patternRevInfo a:hover {
   color:%LINK_TEXT_HOVER%;
}

.patternMoved,
.patternMoved a:link,
.patternMoved a:visited {
   color:%GRAYED_OUT_TEXT%;
}
.patternMoved a:hover {
   color:%LINK_TEXT_HOVER%;
}
.patternSaveHelp {
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* WebSearch, WebSearchAdvanced */
table#twikiSearchTable th,
table#twikiSearchTable td {
   background-color:%GENERAL_BACKGROUND%;
   border-color:%TABLE_BORDER%;
} 
table#twikiSearchTable th {
   color:%MAIN_TEXT_COLOR%;
}
table#twikiSearchTable td.first {
   background-color:%TOPIC_ACTION_BACKGROUND%;
}

/*   -----------------------------------------------------------
   Search results
   styles and overridden styles used in search.pattern.tmpl
   -----------------------------------------------------------   */

h3.patternSearchResultsHeader,
h4.patternSearchResultsHeader {
   background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
   border-color:%LAYOUT_ELEMENT_BORDER%;
}
h4.patternSearchResultsHeader {
   color:%MAIN_TEXT_COLOR%;
}
.patternNoViewPage h4.patternSearchResultsHeader {
   color:%HEADER_TEXT%;
}
.patternSearchResult .twikiBottomRow {
   border-color:%TABLE_BORDER%;
}
.patternSearchResult .twikiAlert {
   color:%ALERT_TEXT%;
}
.patternSearchResult .twikiSummary .twikiAlert {
   color:%ALERT_TEXT_MUTED%;
}
.patternSearchResult .twikiNew {
   background-color:%NEW_BACKGROUND%;
   border-color:%NEW_TEXT%;
   color:%NEW_TEXT%;
}
.patternViewPage .patternSearchResultsBegin {
   border-color:%TABLE_BORDER%;
}

/* Search results in book view format */

.patternBookView .twikiTopRow {
   background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
   color:%MUTED_TEXT%;
}
.patternBookView .twikiBottomRow {
   border-color:%TABLE_BORDER%;
}
.patternBookView .patternSearchResultCount {
   color:%GRAYED_OUT_TEXT%;
}

/* oopsmore.pattern.tmpl */

table.patternDiffOptions img {
   border-color:%LAYOUT_ELEMENT_BORDER%;
}

/* edit.pattern.tmpl */

.twikiChangeFormButton .twikiButton,
.twikiChangeFormButtonHolder .twikiButton { /* looks like a link */
   color:%LINK_TEXT_NORMAL%;
   background:none;
}
.patternSig input {
   color:%GRAYED_OUT_TEXT%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* preview.pattern.tmpl */

.patternPreviewArea {
   border-color:%ALERT_BORDER%;
   background-color:%MAIN_BACKGROUND_COLOR%;
}

/* rdiff.pattern.tmpl */

.patternDiff {
   border-color:%TABLE_HEADER_BACKGROUND%;
}
.patternDiff h4.patternSearchResultsHeader {
   background-color:%TABLE_HEADER_BACKGROUND%;
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
.patternDiff h4.patternSearchResultsHeader a:link,
.patternDiff h4.patternSearchResultsHeader a:visited {
   color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
tr.twikiDiffDebug td {
   border-color:%TABLE_BORDER%;
}
.patternDiffPage .twikiDiffTable th {
   background-color:%DIFF_HEADER_BACKGROUND%;
}
/* Changed */
.twikiDiffChangedHeader,
tr.twikiDiffDebug .twikiDiffChangedText,
tr.twikiDiffDebug .twikiDiffChangedText {
   background:#9f9; /* green - do not change */
}
/* Deleted */
.twikiDiffDeletedHeader,
tr.twikiDiffDebug .twikiDiffDeletedMarker,
tr.twikiDiffDebug .twikiDiffDeletedText {
   background-color:#f99; /* red - do not change */
}
/* Added */
.twikiDiffAddedHeader,
tr.twikiDiffDebug .twikiDiffAddedMarker,
tr.twikiDiffDebug .twikiDiffAddedText {
   background-color:#ccf; /* violet - do not change */
}
/* Unchanged */
tr.twikiDiffDebug .twikiDiffUnchangedText {
   color:%GRAYED_OUT_TEXT%;
}
.twikiDiffUnchangedTextContents { }
.twikiDiffLineNumberHeader {
   background-color:%DIFF_HEADER_BACKGROUND%;
}


/* IMAGES */
/* image positions are set here as well as these are dependent on the image */

.twikiInputField {
   background-image:url(background_input.gif);
   background-repeat:repeat-x;
}
.twikiInputFieldDisabled {
   background-image:none;
   border:none;
}
.twikiButton {
   background-image:url(background_button.gif);
   background-repeat:repeat-x;
}
.patternToolBarButtons .patternButton a {
   /*
   background-image:url(background_button.gif);
   background-repeat:repeat-x;
   */
}
.twikiSubmit {
   background-image:url(background_submit.gif);
   background-repeat:repeat-x;
}
.twikiSubmitDisabled {
   background-image:none;
}
.twikiToc li {
   background-image:url(bullet-child-black.gif);
   background-repeat:no-repeat;
   background-position:0 .35em;
}
/*#patternLeftBarContents .patternLeftBarPersonal,*/
#twikiLogin,
#patternLeftBarContents .tipsOfTheDayContents {
   background-image:url(gradient_blue.gif);
   background-repeat:repeat-x;
}
#patternOuter {
   /* gradient yellow of left bar and main */
   background-image:url(gradient_yellow.gif);
   background-repeat:repeat-x;
}
.patternPrintPage #patternOuter {
   background:#fff; /* white - do not change */
}
.twikiPageForm table {
   background-image:url(form_gradient.gif);
   background-repeat:repeat-x;
}


/* commong settings */
.patternLeftBarPersonal li,
.twikiHierarchicalNavigation .twikiChildTopics li,
.twikiHierarchicalNavigation .twikiParentTopic li,
li.patternLogOut,
li.patternLogIn {
   padding-left:13px;
   background-position:0 .25em;
   background-repeat:no-repeat;
}
.patternLeftBarPersonal li,
.twikiHierarchicalNavigation .twikiChildTopics li {
   background-image:url(bullet-blue.gif);
}
.twikiHierarchicalNavigation .twikiParentTopic li {
   background-image:url(bullet-parent.gif);
}
.patternLeftBarPersonal li.patternLogOut {
   background-image:url(bullet-lock.gif);
}
.patternLeftBarPersonal li.patternLogIn {
   background-image:url(bullet-lock.gif);
}
%ENDATTACH%
View topic | History: r6 < r5 < r4 < r3 | More topic actions...
 
This site is powered by the TWiki collaboration platform Powered by Perl This site is powered by the TWiki collaboration platformCopyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinColorSettings.