Quick & dirty color fix for basic TiddlyWiki

[Isabeau]

Open the file in a text editor and change all instances of #cf6, aka
#ccff66 (that hideous green) to #ff0 or #ffff00 (a very attractive
shade of yellow).

It won't survive an upgrade, but it takes less time & uses less space.

[Clint Checketts]

Here's my quick take on changing the colors.

In the StyleSheetColors tiddler you can wrap a color definition in brackets as it will replace that text if such a tiddler exists. If it doesn't, the code in the brackets is used.

For example, if I have the rule: background: [[#fff;]] the stylesheet will set the background as white, unless I have a tiddler named '#fff;' with the content of #000 then the background will be black.

So with the adjusted colors tiddler I can grab a single color and replace it. The replacement will be upgrade proof too. To use this method copy the included code at the bottom (Google shouldn't mangle it) into a tiddler title 'StyleSheetColors' and click a color to be replaced. Put the new color (in hex) in the tiddler that opens and reload the colors (refresh the TW file or open and close the Colors tiddler) (also I like the color #ff6 rather than #ff0)

Copy the following code ==============================

/***
!Generic Rules
***/
body {
    background: [[#fff;]]
    color: [[#000;]]
}

#titleLine {
    color: [[#fff;]]
    background: [[#300;]]
}

#titleLine a {
    color: [[#cf6;]]
}

#titleLine a:hover {
    background: transparent;
}

a{
    color: [[#963;]]
}

a:hover{
    background: [[#963;]]
    color: [[#fff;]]
}

#mainMenu .button {
    color: [[#930;]]
}

#mainMenu .button:hover {
    color: [[#cf6;]]
    background: [[#930;]]
}

#messageArea {
    background: [[#930;]]
    color: [[#fff;]]
}

#messageArea a:link, #messageArea a:visited {
    color: [[#c90;]]
}

#messageArea a:hover {
    color: [[#963;]]
background: transparent;
}

#messageArea a:active {
    color: [[#fff;]]
}

.popup {
    background: [[#eea;]]
    border: 1px solid #930;
}

.popup hr {
    color: [[#963;]]
    background: [[#963;]]
    border-bottom: 1px;]]
}

.popup li.disabled {
    color: [[#ba9;]]
}

.popup li a, .popup li a:visited {
    color: [[#300;]]
}

.popup li a:hover {
    background: [[#930;]]
    color: [[#eea;]]
}

.tabSelected,.tabContents {
    background: [[#eea;]]
}

.tabUnselected {
    background: [[#c90;]]
}

.tiddler .button {
    color: [[#930;]]
}

.tiddler .button:hover {
    color: [[#cf6;]]
    background: [[#930;]]
}

.tiddler .button:active {
    color: [[#fff;]]
    background: [[#c90;]]
}

.shadow .title {
    color: [[#888;]]
}

.toolbar {
    color: [[#aaa;]]
}

.footer {
    color: [[#ddd;]]
}

.selectedTiddler .footer {
    color: [[#888;]]
}

.viewer .button {
    background: [[#c90;]]
    color: [[#300;]]
    border-right: 1px solid #300;
    border-bottom: 1px solid #300;
}

.viewer .button:hover {
    background: [[#eea;]]
    color: [[#c90;]]
}

.viewer blockquote {
    border-left: 3px solid #666;
}

h1,h2,h3,h4,h5 {
    background: [[#cc9;]]
}

.viewer table {
    border: 2px solid #303030;
}

.viewer th {
    background: [[#996;]]
    border: 1px solid #606060;
    color: [[#fff;]]
}

.viewer td, .viewer tr {
    border: 1px solid #606060;
}

.viewer pre {
    border: 1px solid #963;
    background: [[#eea;]]
}

.viewer code {
    color: [[#630;]]
}

.viewer hr {
    border: 0;
    border-top: dashed 1px #606060;
    color: [[#666;]]
}

.highlight, .marked {
    background: [[#ffe72f;]]
}

.editor {
    color: [[#402C74;]]
}

.editor input {
    border: 1px solid #000;
}

.editor textarea {
    border: 1px solid #000;
    width: 100%;
}

.editorFooter {
    color: [[#aaa;]]
}

.editorFooter a {
    color: [[#930;]]
}

.editorFooter a:hover {
    color: [[#cf6;]]
    background: [[#930;]]
}

.editorFooter a:active {
    color: [[#fff;]]
    background: [[#c90;]]
}
/***
!On the sidebar buttons and tiddlylinks are treated the same
***/
#sidebarOptions {
    background: [[#c90;]]
}

#sidebarOptions a{
    color: [[#930;]]
}

#sidebarOptions a:hover {
    color: [[#cf6;]]
    background: [[#930;]]
}

#sidebarOptions a:active {
    color: [[#930;]]
    background: [[#cf6;]]
}

#sidebarOptions .sliderPanel {
    background: [[#eea;]]
}

#sidebarOptions .sliderPanel a {
    color: [[#930;]]
}

#sidebarOptions .sliderPanel a:hover {
    color: [[#cf6;]]
    background: [[#930;]]
}

#sidebarOptions .sliderPanel a:active {
    color: [[#930;]]
    background: [[#cf6;]]
}
/***
!Sidebar tabs are styled
***/
#sidebarTabs {
    background: [[#c90;]]
}

#sidebarTabs .tabSelected{
    color: [[#cf6;]]
    background: [[#963;]]
}

#sidebarTabs .tabUnselected {
    color: [[#cf6;]]
    background: [[#930;]]
}

#sidebarTabs .tabContents{
    background: [[#963;]]
}

#sidebarTabs .txtMoreTab .tabSelected,
#sidebarTabs .txtMoreTab .tabSelected:hover{
    background: [[#930;]]
    color: [[#cf6;]]
}

#sidebarTabs .txtMoreTab .tabUnselected,
#sidebarTabs .txtMoreTab .tabUnselected:hover{
    background: [[#300;]]
    color: [[#cf6;]]
}

#sidebarTabs .txtMoreTab .tabContents {
    background: [[#930;]]
}

#sidebarTabs .tabContents a {
    color: [[#cf6;]]
}

#sidebarTabs .tabContents a:hover {
    background: [[#cf6;]]
    color: [[#300;]]
}


.sparkline {
    background: [[#eea;]]
    border: 0;
}

.sparktick {
    background: [[#930;]]
}

.errorNoSuchMacro {
    color: [[#ff0;]]
    background: [[#f00;]]
}

.zoomer {
    color: [[#963;]]
    border: 1px solid #963;
}

[Jeremy Ruston]

> Here's my quick take on changing the colors.

This is *so* neat, very clever idea.

Cheers

Jeremy

--
Jeremy Ruston
mailto:jer...@osmosoft.com
http://www.tiddlywiki.com

[apl]

I don't know what's the benefits to use [[#abc;]] instead of '#abc;'.
Can you give me an example? Thanks!

Arphen

[Daniel Baird]

If I read it right, Clint is saying that if you use [[#abc;]] and there is no tiddler entitled "#abc;" so that the colour that gets used is #abc.

Or, you don't like the colour #abc, and want to use the colour #123 instead, you can create a tiddler called #abc; with "#123" in the contents.  Now, everywhere in your CSS that has [[#abc;]] will actually be using colour #123.

See?  Instant colour replacement.

;Daniel

--
Daniel Baird

http://danielbaird.com (TiddlyW;nks! :: Whiteboard Koala :: My Blog :: Things That Suck)

[Clint Checketts]

On 11/14/05, apl <arph...@gmail.com> wrote:

I don't know what's the benefits to use [[#abc;]] instead of '#abc;'.
Can you give me an example? Thanks!

This is a pretty confusing topic, so I'm glad to illustrate.

To play along fire up a recent version of TW and place the following in a StyleSheet tiddler.

body{
 background: #333;
}

Click 'Done' after editing that tiddler and you're TW will now become a flat grey. Now change the tiddler to be


body{
 background: [[#333;]]
}


After clicking the 'Done' button here the TW will change to the same amazing grey. Blah. However, now '#333;' is a TiddlyLink. Click it to open up a tiddler with the same name and insert the following content into it:

#fff;

Click 'Done' on that tiddler. No change. Thats because the StyleSheet tiddler need to be refreshed so go into edit mode with the StyleSheet tiddler so it reloads the styles. The background returns to is clean white color.

Why does this matter?
Imagine the TW Color StyleSheet. It will have multiple references to white or a certain brown. All you have to do is open one tiddler link for the color #abc and now ALL instances of that color are replaced with the content of the tiddler named '#abc;'

Did that clear up how nifty the TW linking of colors is?

Once you have the idea of the color replacement down solid let me know. Then I can show you how to take a snapshot of that stylesheet and delete your extra color tiddlers. (The Firefox 'View Rendered Source' extension)

-Clint

[apl]

Now I see! I like this artful trick, though it's a little unnatural.
--
Arphen

[GeoffS]

Spooky, eh?

Geoff

[Daniel Baird]

It's definitely weird that [[#f00]] might turn out to be blue not red.. anyone heard of a Stroop task?  http://www.apa.org/science/stroop.html

So anyway, the small change that would make it a bit more intuitive would be to use sensible names like:

.button {
    background: [[buttonColour]];
}

..and then you have a tiddler called buttonColour with #caf or whatever.  The con compared to using actual colour triplets is that you must have the buttonColour tiddler defined; maybe as a shadow tiddler or something.

Perhaps the nicest "default" for Jeremy to adopt would be to have most colours set normally, and then just have a few colours defined using [[colourName]] shadow tiddlers, like maybe the banner and sidebar backgrounds and a few others.  Of course, that would mean that colours were defined in two different ways, which isn't easy for new folk to understand.

It's using tiddlers like this that's making me want to write a more compact, alternate layout for tiny tiddlers, as discussed in other threads in the TiddlyWikiDev group.

Cheers

;Daniel

[RunningUtes]

I just tried this and the results were very cool. It was very easy to
colorize a new wiki especially with the "colorcode" option on WikiBar.

[RunningUtes]

here is the rendered stylsheet that I kicked out in under 5 minutes.
This method was very easy to do.

body { background:#fff; }
#titleLine { color:#fff; background:#0000cc; }
#titleLine a { color:#ffff33; }
#mainMenu { color:#000; }
#mainMenu .tiddlyLink { color:#bbbbbb; }
#mainMenu .tiddlyLink:hover { background:#bbbbbb; color:#fff; }
#mainMenu .externalLink { color:#bbbbbb; }
#mainMenu .externalLink:hover { background:#bbbbbb; color:#fff; }
#mainMenu .button { color:#003399; }
#mainMenu .button:hover { color:#ffff33; background:#003399; }
#messageArea { background:#003399; color:#fff; }
#messageArea a:link, #messageArea a:visited { color:#99ccff; }
#messageArea a:hover { color:#bbbbbb; }

#messageArea a:active { color:#fff; }

.popup { background:#ffff66; border: 1px solid #003399; }
.popup hr { color:#bbbbbb; background:#bbbbbb; border: 0; }
.popup li.disabled { color:#99ccff; }
.popup li a, .popup li a:visited { color:#0000cc; }
.popup li a:hover { background:#003399; color:#ffff66; }
.tabSelected { background:#ffff66; }
.tabUnselected { background:#99ccff; }
.tabContents { background:#ffff66; }
.tiddler .button { color:#003399; }
.tiddler .button:hover { color:#ffff33; background:#003399; }
.tiddler .button:active { color:#fff; background:#99ccff; }

.toolbar { color:#aaa; }
.footer { color:#ddd; }
.selectedTiddler .footer { color:#888; }

.viewer { color:#000; }
.viewer a:link, .body a:visited { color:#bbbbbb; }
.viewer a:hover { color:#fff; background:#bbbbbb; }
.viewer .button { background:#99ccff; color:#0000cc; border-right: 1px
solid #0000cc; border-bottom: 1px solid #0000cc; }
.viewer .button:hover { background:#ffff66; color:#99ccff; }

.viewer blockquote { border-left: 3px solid #666; }

.viewer h1,.viewer h2,.viewer h3,.viewer h4,.viewer h5 {
background:#99ccff; }

.viewer table { border: 2px solid #303030; }
.viewer th { background:#996; border: 1px solid #606060; color:#fff; }
.viewer td, .viewer tr { border: 1px solid #606060; }

.viewer pre { color:#000000; border: 1px solid #bbbbbb;
background:#ffff66; }
.viewer code { color:#630; }
.viewer hr { border-top: dashed 1px #606060; border-left: none;
border-right: none; border-bottom: none; color:#666; }
.highlight, .marked { color:#000; background:#ffe72f; }

.editor { color:#402C74; }
.editor input { border: 1px solid #000; }
.editor textarea { border: 1px solid #000; width: 100%; }
.editorFooter { color:#aaa; }

.editorFooter A { color:#003399; }
.editorFooter A:hover { color:#ffff33; background:#003399; }
.editorFooter A:active { color:#fff; background:#99ccff; }
#sidebar { color:#000; }
#sidebarOptions { background:#99ccff; }
#sidebarOptions .button { color:#003399; }
#sidebarOptions .button:hover { color:#ffff33; background:#003399; }
#sidebarOptions .button:active { color:#003399; background:#ffff33; }
#sidebarOptions .sliderPanel { background:#ffff66; }
#sidebarOptions .sliderPanel A { color:#003399; }
#sidebarOptions .sliderPanel A:hover { color:#ffff33;
background:#003399; }
#sidebarOptions .sliderPanel A:active { color:#003399;
background:#ffff33; }
.sidebarSubHeading { color:#0000cc; }
#sidebarTabs { background:#99ccff; }
#sidebarTabs .tabSelected { color:#ffff33; background:#bbbbbb; }
#sidebarTabs .tabUnselected { color:#ffff33; background:#003399; }
#sidebarTabs .tabContents { background:#bbbbbb; }
#sidebarTabs .txtMoreTab .tabSelected { background:#003399; }
#sidebarTabs .txtMoreTab .tabUnselected { background:#0000cc; }
#sidebarTabs .txtMoreTab .tabContents { background:#003399; }
#sidebarTabs .tabContents .tiddlyLink { color:#ffff33; }
#sidebarTabs .tabContents .tiddlyLink:hover { background:#dddddd;
color:#0000cc; }
#sidebarTabs .tabContents .button { color:#ffff33; }
#sidebarTabs .tabContents .button:hover { color:#0000cc;
background:#ffff33; }
.sparkline { background:#ffff66; border: 0; }
.sparktick { background:#003399; }

.errorNoSuchMacro { color:#ff0; background:#f00; }

.zoomer { color:#bbbbbb; border: 1px solid #bbbbbb; }

[RunningUtes]

Here is another TW that I threw together using the same system.
http://tinyurl.com/b8w42

It seems that IE doesn't like to use TiddlyWords in the StyleSheet.
Anyone know why?

Also, is there a workaround for base64 encoding yet for IE?

[Clint Checketts]

On 11/16/05, RunningUtes <Runni...@gmail.com> wrote:

It seems that IE doesn't like to use TiddlyWords in the StyleSheet.
Anyone know why?

IE is fine with the TiddlyWords. The problem is how it places <style> tags in the document. I'll post a fix to the .39 beta thread.

Back to the idea of the TiddlyLinks in the StyleSheetColors tiddler:

As Daniel said, having a StyleSheet that says color: [[#000;]] that really is white is confusing. Its also annoying to have excess tiddlers with these names that don't serve a purpose (other than the styling one). So the next step after creating the color-replacing tiddler is to grab a View Rendered Source plugin. (Note: There's even one for IE!)

View the generated source code (not the normal 'view page source') and scroll to the <style> element that has the id you are looking for (probably <style id="StyleSheet">) and grab the correct styles. Copy these styles and paste them back into your TiddlyWiki and now you have the same StyleSheet without the TiddlyLinked colors.

-Clint

[RunningUtes]

thanks clint,
That View Rendered plugin was exactly what I needed.
~mike

[kristen]

Aah, could all geeks come up with such elegant ideas !

[susanna]

Thanks so much for this, Clint! It looks promising!!!