Styling Your Trunk Notes Wiki

In this blog post I am going to add a bit of style to my Trunk Notes wiki.

I am going to add a textured background, change the fonts and how links appear. Here is what I will be aiming for:

A quick disclaimer – being slightly colour blind I may have ended up with something rather offensive. I apologise if this is the case!

The first step is to create a texture for the background. I have used Acorn 3 (http://flyingmeat.com/acorn/) to create my background:

The image is saved as textured_background.png. I am going to upload it to Trunk Notes using iTunes File Sharing:

(In Trunk Notes 2.5.3 you can upload files using Wi-Fi Sharing)

The next step is to enable custom stylesheets. Start the iPhone/iPad Settings app…

… scroll down until you see Trunk Notes …

… now turn on Custom stylesheet …

It might now be necessary to ‘kill’ Trunk Notes, if it is running in the background. To do this double tap your home button, find Trunk Notes, hold down your finger on the icon until it jiggles and then tap the – button.

You can now go back into Trunk Notes. You should now find there is a page called Special:SetStyleSheet:

Go to the page and you will find some code written in a simple language called CSS:

This tells Trunk Notes how to format your wiki pages. It is used in most of the web pages you find on the Internet.

The CSS file is split into a number of different sections:

• body – these settings get applied to everything you see on the page (including the page information bar at the top). It is here that I will change to use the textured background and set a different font
• h1, h2, h3 – these are the headings. So when you write ‘# My Heading’ you are creating the HTML element h1. If I want my main headings to be blue I will modify the h1 selector
• #info – this is the page information bar that appears at the top of each page containing the time of the last update
• .highlight, .highlight-selected – when searching for text within a page these styles get applied
• #contents – the actual wiki page contents, i.e. everything except for the #info bar
• table, td, th, thead – if you create tables in Trunk Notes how they are formatted is controlled by these selectors
• a – a link to a web page or document in another app
• a.wiki-link – a link to another Trunk Notes wiki page
• a.missing-wiki-link – a link to a Trunk Notes wiki page which hasn’t yet been created
• html – this actually is everything, it contains the body and all within the body. Here a special style is applied to stop your iPhone resizing the text when rotated into landscape

You might think this all looks a little complicated. It can be, but in this blog post we will keep it simple and change just a few things.

First up is the background. If you have been reading the CSS presented to you in Special:SetStyleSheet you might have spotted that the current background is just white. I will now replace this with a link to my image.

So replace …

background-color: #FFFFFF;

… with …

background-image: url('files/textured_background.png');

(or whatever you have imported your background image as. You can refer to any image stored in Trunk Notes this way.

I am also going to remove the other background- lines. So I am left with the body section looking like this:

body {     font: medium Arial;     font-size: 16px;     background-image: url('files/textured_background.png');     margin: 0; }

If I save then I will be presented with this:

The next thing I want to is change the font. For a fun guide to what fonts are available on the iPhone in iOS 4 have a look at http://christophmeissner.files.wordpress.com/2010/09/ios4fonts1.png

I’m going to use Trebuchet MS. Substitute the line starting with font: with

font: medium Trebuchet MS;

Next I’m going to make my headings more impressive. To start with an underline on main page headings. To do this I need to modify the h1 section. I will add the line:

border-bottom: 1px solid #333;

This puts 1 pixel high solid border in a dark grey colour. Try changing the 1px to 2px, 3px, etc and experiment with different colours. You can either write the name of popular colours (such as black, red, green) or specify the colour using hexadecimal (see http://www.colorpicker.com/ to easily create these ‘hash’ colours).

Finally I am going to make my links a little fancier. This is now a little more complicated and will leave it to the more advanced reader to figure out what is going on! So I add the following new section to my CSS:

a.wiki-link {     background-color: yellow;     border: 1px solid #E0DD1B;     border-radius: 4px;     padding-left: 2px;     padding-right: 2px; }

Here (again) is the final result:

If you want to feel free to download the CSS and background image used in this example.