Tags:
create new tag
, view all tags
ALERT! 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.

Create your own colors

To create a customised set of colors for PatternSkin

   * 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

Please use the Support forum if you have questions about TWiki features. This comment section is about the documentation of this topic.
Topic attachments
I Attachment History Action Size Date Who Comment
Cascading Style Sheet filecss PatternSkinPalette.css r2 r1 manage 9.3 K 2004-08-26 - 17:59 WillNorris just the colours
Texttxt filterColours.pl.txt r1 manage 0.1 K 2004-08-26 - 16:47 WillNorris  
Texttxt makeColourTable.pl.txt r1 manage 0.3 K 2004-08-26 - 16:48 WillNorris  
Edit | Attach | Watch | Print version | History: r13 < r12 < r11 < r10 < r9 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r13 - 2008-08-20 - SeanCMorgan
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.