JLiki 3: SiteTitle, SiteSubtitle & ColorPalette

If you haven’t joined us yet, please feel free to jump in anytime. You’re only 2 short JLiki segments behind.

Where were we? Ok, everyone, stand up for a minute. Take one step to the left. Just so you don’t get dizzy, now take one step to the right. Bend you arms at the elbow and flap like a chicken. Aah … much better. We can all sit down now.

Check List:

  • ofh.html (or whatever you call it) – your wiki. The folder, Wiki Backups, (or whatever you name it in AdvancedOptions) will create itself the first time you make a change to your wiki.

JLiki & Backups

  • Other drives: folder called OFH Wiki (or something). Back up the contents of your wiki folder to here.

The word ‘tiddler’ just means ‘entry’ in TiddlyWiki language. In the opening tiddler called GettingStarted are links to some of the built-in tiddlers.

We can start by clicking on SiteTitle. At the moment SiteTitle is ‘My TiddlyWiki’ but since we’re doing a family history wiki, you might want to choose a different title. In faint gray to the right you’ll see where it says ‘edit’.

SiteTitle, TiddlyWiki

Click on ‘edit’, change ‘My TiddlyWiki’ to the title you want and click ‘done’.

Edit SiteTitle, TiddlyWiki

Do the same thing again for SiteSubtitle. I now have this:

Title, TiddlyWiki

The other two, MainMenu and DefaultTiddlers, we’ll come back to later.

We can do a little more interior decorating to get ourselves comfy before we start inviting the ancestors in. Being essentially clueless about CSS, this is where I’d be jumping in the deep end without a paddle, so I’ll be keeping it very simple. If you get bitten by the TiddlyWiki bug there are no end of things to keep you going and experts to tell you how.

In the right-side menu of your TiddlyWiki, click on More and then Shadowed. This brings up a list of built-in tiddlers. If you go down the list and click on StyleSheet it will open. Anyone who knows CSS can fly ahead and do whatever they want to here. I’m truly hacking my way through this part. So, for the rest of us, click ‘edit’ and paste this code in the box.

/*{{{*/ body {font-family: arial; font-size: .75em;} /*}}}*/

If you have AutoSave turned off, every time you click ‘done’ you can see your changes. If AutoSave is turned on, you still have to click ‘done’ to see your changes, but the wiki will also save and back up at the same time without you having to do anything else. Experiment and see which way suits you better.

As you can see, nothing changed. This is the font-type and size for the body of your wiki as well as the left-hand margin and some of the right-side.

If you’d rather have something else, change ‘arial’ to a font you like. Play around with the number before ’em’.

You can use % instead of ’em’ by putting font-size: 110%; in the code instead, or any other % you want. If you’re in a different font-mood later you can come back here and change it. This is not the final word on your fonts so don’t worry over it too much, just pick something that generally suits you right now.

Another Shadow Tiddler you can change is ColorPalette. So go ahead and open that one.


The number/letter combinations represent the colors that are already being used in the wiki. So it would be useful to know what PrimaryPale, PrimaryLight and all the rest of it means. I started to make a list and deleted it because it’s easier to play with color directly than it is to translate wordy text into color in my imagination.

So, here’s the important part. Just jump in and fool around. Make one color change at a time and click ‘done’ after each one so you can see what’s changed. Color charts at Color Chart and CSS Color Chart. The numbers there are 6-digit instead of 3. It doesn’t matter. Just copy and paste what you see. Or you can open a program on your computer that has an html color-picker (it looks like an eye-dropper) and work that way. Screen capture programs usually have one.

If you paint yourself into a corner, (nearly inevitable) you can delete the ColorPalette tiddler, (which is only a copy) click the Refresh button in your browser and the original will reappear.

Just one hint: PrimaryLight is the top of the Header gradient, and PrimaryMid is the bottom of the Header gradient and some of the main text.

Next: JLiki 4

Leave a Reply

Your email address will not be published. Required fields are marked *