Tags: view all tags

NOTE: This is a HistoricalDocument topic. It used to be distributed in an earlier TWiki release, but is no longer part of the official TWiki distribution. Post questions, error notes, and suggestions concerning the documentation of this topic in the comments section below! Use the Support web for problems you are having using TWiki.

PatternSkinPalette

This page gives an overview of the colors used by PatternSkin and describes where to change them to create your own style.

Page contents:

Create your own colors
Colors overview
Descending color table

Create your own colors

To create a customised set of colors for PatternSkin

download PatternSkinPalette.css
modify the CSS colors in PatternSkinPalette.css
attach your modified PatternSkinPalette.css to your home page
as shown below, add the USERSTYLEURL setting to your home page

   * Plugins.PatternSkin CSS Settings (change colour palette)
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/PatternSkinPalette.css

You can also change the colors in a modified version of style.css. See PatternSkinCustomization for instructions.

Colors overview

Text colors

		`#e24628`	header `h1`
		`#990000`	header `h2, h3, h4, h5, h6`
		`#F3EDE7`	background header `h2`
		`#8490A1`	grayed out text `.twikiGrayText`
		`#1e5bbd`	link `:link, :visited`
		`#b4d5ff`	background hover link (note: the link color becomes #1559B3 on hover) `:link:hover`
		`#666666`	visited link in topic text `.twikiTopic a:visited`
		`#7A4707`	code `pre, code, tt`
		`#000000`	body text

Page colors

		`#f8f8f8`	page `body`
		`#ffffff`	main page `.twikiMain`
		`#dddddd`	main page border `.twikiMain`

Left bar

		`#880000`	body text in left bar `.twikiLeftBar`
		`#22638C`	top border left bar contents `.twikiLeftBarContents`
		`#DFEDFD`	personal left bar background `.twikiLeftBarPersonal`
		`#cccccc`	personal left bar border `.twikiLeftBarPersonal`

Forms

Action buttons

View page

		`#98A2B0`	action buttons background view page `.twikiTopicAction`
		`#ffffff`	action buttons text and links
		`#cccccc`	action buttons links bottom border

Non-view pages

		`#22638c`	action buttons background non-view page `.twikiTopicAction`
		`#698FA8`	action buttons links bottom border
		`#DFEDFD`	action buttons secondary row (top) background `.twikiTopicActionSecondary`
		`#22638c`	action buttons secondary row text
		`#A3BCF1`	action buttons secondary row links bottom border
		`#D4E6FC`	action buttons submit options `.twikiSubmitOptions`
		`#B6C6D9`	action buttons submit options border `.twikiSubmitOptions`

Buttons

		`#041D3A`	submit button `.twikiSubmit`
		`#f2f2f2`	button background `.twikiSubmit`
		`#05264D`	submit button `.twikiButton`
		`#E8F1F9`	topic submit button `.twikiTopic .twikiSubmit`
		`#B9D6FA`	secondary submit button `.twikiTopic .twikiSubmit`
		`#eeeeee`	cancel button `.twikiCancel`

Edit page

		`#FCFAF7`	textarea background `.twikiEditPage textarea`
		`#888888`	`.twikiChangeFormButton`
		`#E0E9F7`	edit form header background `.twikiEditPage .twikiEditForm th`
		`#F5F7FD`	edit form row background `.twikiEditPage .twikiEditForm td`
		`#EFEDEA`	signature area background `.twikiEditPage .twikiSig input`
		`#cccccc`	help text `.twikiEditPage .twikiHelp`
		`#990000`	help text code text `.twikiEditPage .twikiHelp code`

Versatile table

		`#F5F7FD`	background `.twikiVersatileTable td`
		`#E0E9F7`	background `.twikiVersatileTable th`
		`#ffffff`	background main part `.twikiVersatileTable .twikiMainCol`
		`#E9E9E9`	background `.twikiVersatileTable .twikiOldCol`
		`#E9E9E9`	background `.twikiVersatileTable .twikiOldCol`
		`#8490A1`	help text `.twikiHelpCol`

Attachment and form table

		`#888e9c`	text color
		`#000000`	text color previous attachments `.twikiAttachPage .twikiPrevious .twikiAttachments table`
		`#cccccc`	borders
		`#334455`	sort indicator line `.twikiAttachments a, .twikiForm a`
		`#ffffff`	background color
		`#f1f1f1`	background color view page
		`#DADADA`	sort indicator background `.twikiAttachments th.twikiSortedAscendingCol`

Diff pages

		`#FF3000`	deleted header background `.twikiDiffPage .twikiDiffDeletedHeader, -twikiDiffDeletedMarker`
		`#FFEAE5`	deleted header background `.twikiDiffPage .twikiDiffDeletedText`
		`#3DB234`	added header background `.twikiDiffPage .twikiDiffAddedHeader, -twikiDiffAddedMarker`
		`#EBF7EA`	added header background `.twikiDiffPage .twikiDiffAddedText`
		`#98A2B0`	changed header and row background `.twikiDiffPage th.twikiDiffChangedHeader`
		`#dddddd`	`.twikiDiffPage .twikiDiffLineNumberHeader`

Various colors

		`#9E9E70`	horizontal line `hr`
		`#cccccc`	left bar horizontal line `hr`
		`#dddddd`	TOC border `.twikiToc`
		`#666666`	TOC title `.twikiToc .twikiTocTitle`
		`#F3EDE7`	background search results header `.twikiSearchResultsHeader, .twikiSearchString`
		`#cccccc`	bottom border search results header `.twikiSearchResultsHeader, .twikiSearchString`
		`#ff0000`	alert `.twikiAlert`
		`#990000`	alert in search results `.twikiSearchResults .twikiSummary .twikiAlert`
		`#22638c`	search results in book view, top row background `.twikiBookViewList .twikiTopRow`
		`#cccccc`	search results in book view, top row `.twikiBookViewList .twikiTopRow`
		`#ffff00`	broadcast message background `.twikiBroadcastMessage`
		`#ff0000`	broadcast message bold text `.twikiBroadcastMessage strong`

Descending color table

rgb	colour sample
#000000
#041d3a
#05264d
#333333
#334455
#880000
#990000
#844f0c
#22638c
#666666
#3db234
#1559b3
#1e5bbd
#808080
#888888
#e24628
#698fa8
#9e9e70
#888e9c
#8490a1
#ff0000
#ff3000
#98a2b0
#aaaaaa
#bbbbbb
#a3bcf1
#cccccc
#ffff00
#b9d6fa
#dadada
#b4d5ff
#dddddd
#e9e9e9
#e0e9f7
#efedea
#f3ede7
#dfedfd
#eeeeee
#ebf7ea
#efefef
#ffeae5
#e8f1f9
#f1f1f1
#f2f2f2
#f8f8f8
#f5f7fd
#fcfaf7
#ffffff

See TWiki:Codev.ColorScheme for links to web sites with web safe palettes, scheme generators and other colour tools & reference.

-- WillNorris - 26 Aug 2004, -- ArthurClemens - 29 Aug 2004

Comments & Questions about this Historical Document Topic

perhaps PatternSkin's style.css itself could/should be split up into style.css and palette.css, or something along those lines ?

if it can get down to 7 colours, then i can integrate this: http://color.twysted.net/

They appear to have 9 colors. Ah, I see, 7 colors, then a background color and a body text color. -- ArthurClemens - 31 Aug 2004

-- WillNorris - 26 Aug 2004

I noticed this on TWikiIRC:

dma`   aaaaaaaaaagh
dma`   http://twiki.org/cgi-bin/view/Codev/InsecureViewWithFailedAuthentication
dma`   sux to be colorblind w.r.t. red/black

A useful palette would be one designed for the colorblind.

-- SamHasler - 30 Aug 2004

You could be less cryptic. I assume you mean the red text looks very similar to the brown text. Note that this would be the same with red with black text.

Better not to rely on colors alone. Diffs work pretty well with their plusses and minuses.

Let me know when this person has problems with the PatternSkin colors.

-- ArthurClemens - 30 Aug 2004

Proposal for a color palette:

		`#e24628`	header `h1`
		`#990000`	header `h2, h3, h4, h5, h6`
		`#F3EDE7`	background header `h2`
		`#8490A1`	grayed out text `.twikiGrayText`
		`#1e5bbd`	link `:link, :visited`
		`#666666`	visited link in topic text `.twikiTopic a:visited`
		`#7A4707`	code `pre, code, tt`
		`#f8f8f8`	page `body`
		`#ffffff`	main page `.twikiMain`
		`#000000`	body text

I believe these are the most poignant colors. Still 1 too many for http://color.twysted.net/. You could also try http://www.colorwhore.com. Yet another approach could be to define several palettes.

-- ArthurClemens - 31 Aug 2004

I fixed the rendering of "Descending color table" in IE7 by removing the space in </tr >.

-- SeanCMorgan - 20 Aug 2008

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
css	PatternSkinPalette.css	r2 r1	manage	9.3 K	2004-08-26 - 17:59	UnknownUser	just the colours
txt	filterColours.pl.txt	r1	manage	0.1 K	2004-08-26 - 16:47	UnknownUser
txt	makeColourTable.pl.txt	r1	manage	0.3 K	2004-08-26 - 16:48	UnknownUser

Topic revision: r13 - 2008-08-20 - SeanCMorgan

Account
- Log In
- Register User

Edit
Attach

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.