The contents of this topic is now in SVN: twikiplugins/PatternSkin/data/TWiki/PatternSkinColorSettings.txt

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%/%WEB%/%TOPIC%/theme-colors.css 

Test this setting: USERCOLORSURL = /p/pub/Codev/PatternSkinColorSettingsDoc/theme-colors.css
Test the file (may exist only after having saved this topic): theme-colors.css

Step 2

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

Color variables

Logical groupings

Text on background

MAIN_TEXT_COLOR Main text color

• Set MAIN_TEXT_COLOR = #fff

MAIN_BACKGROUND_COLOR Main background color

• Set MAIN_BACKGROUND_COLOR = #000

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

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 (light gray)

• Set FORM_BORDER = #efefef

ACTIVE_FORM_BACKGROUND Edit form, form steps (light blue)

• Set ACTIVE_FORM_BACKGROUND = #F6FAFD

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_TEXT_COLOR) (white)

• Set GENERAL_BACKGROUND = #fff

TABLE_HEADER_BACKGROUND Table header background

• Set TABLE_HEADER_BACKGROUND = #efefef

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

• Set INFO_BACKGROUND = #ECF4FB

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

TABLE_HEADER_ACCENT_BACKGROUND Sorted table column accent background

• Set TABLE_HEADER_ACCENT_BACKGROUND = #ccc

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 = #8E9195

SIDE_BAR_BACKGROUND Left bar (lighter blue)

• Set SIDE_BAR_BACKGROUND = #F5F9FD

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 = #ddd

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

---

-- Contributors: ArthurClemens

Discussion

This is really great: another step towards easier skins! I'll start working with it immediately. One initial comment: it seems like MAIN_TEXT_COLOR and MAIN_BACKGROUND_COLOR are backwards.

-- LynnwoodBrown - 27 Sep 2006

Ah, nice catch! Corrected now.

-- ArthurClemens - 27 Sep 2006

It would be great to use PreferencesPlugin for easy editing of variables. Unfortunately, the AttachContent save action does not seem to get triggered when the variables are saved...

-- ArthurClemens - 27 Sep 2006

What is the status of this feature? Is this already in SVN? Please change the form below to reflect the status, and list it in WhatIsIn04x01 is needed.

-- PeterThoeny - 30 Sep 2006

As written at the top, this is in SVN.

-- ArthurClemens - 30 Sep 2006

How about moving this topic to the TWiki web as a SupplementalDocument topic? (OK since only a few days old)

-- PeterThoeny - 01 Oct 2006