Difference: PatternSkinPalette (1 vs. 2)

Revision 229 Aug 2004 - Main.ArthurClemens

PatternSkinPalette

Changed:

<
< To create a customised set of colours for PatternSkin

>
>

Added:

>
>

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

Create your own colors

To create a customised set of colors for PatternSkin

download PatternSkinPalette.css

Changed:

<
<

modify the CSS colours in 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

Changed:

<
< Here are the colours used in PatternSkin

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

Added:

>
>

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

</tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr > </tr >

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

Added:

>
> -- ArthurClemens^? - 29 Aug 2004

Deleted:

<
< -- ArthurClemens^? - 28 Aug 2004

META FILEATTACHMENT	attr="" comment="" date="1093733793" name="PatternSkinPalette.css" path="PatternSkinPalette.css" size="9554" user="ArthurClemens" version="1.1"
META FILEATTACHMENT	attr="" comment="" date="1093733821" name="filterColours.pl.txt" path="filterColours.pl.txt" size="98" user="ArthurClemens" version="1.1"
META FILEATTACHMENT	attr="" comment="" date="1093733844" name="makeColourTable.pl.txt" path="makeColourTable.pl.txt" size="330" user="ArthurClemens" version="1.1"

Added:

>
>

META FILEATTACHMENT	attr="h" comment="" date="1093821457" name="textmask.gif" path="textmask.gif" size="101" user="ArthurClemens" version="1.1"

Revision 128 Aug 2004 - Main.ArthurClemens

PatternSkinPalette

To create a customised set of colours for PatternSkin

download PatternSkinPalette.css
modify the CSS colours 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

Here are the colours used in PatternSkin

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

-- ArthurClemens^? - 28 Aug 2004

META FILEATTACHMENT	attr="" comment="" date="1093733793" name="PatternSkinPalette.css" path="PatternSkinPalette.css" size="9554" user="ArthurClemens" version="1.1"
META FILEATTACHMENT	attr="" comment="" date="1093733821" name="filterColours.pl.txt" path="filterColours.pl.txt" size="98" user="ArthurClemens" version="1.1"
META FILEATTACHMENT	attr="" comment="" date="1093733844" name="makeColourTable.pl.txt" path="makeColourTable.pl.txt" size="330" user="ArthurClemens" version="1.1"

View topic | History: r2 < r1 | More topic actions...

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding this intranet, Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinPalette