The new Trunk Notes theme – Love or Hate?

I slipped in an updated default theme into Trunk Notes 2.5.3.

The idea was to make links to wiki pages stand out more and be more easily distinguishable from web links.

Some emails have suggested that the old, cleaner, theme should be reintroduced – or at least there should be an easy way to switch between them.

In case you aren’t sure what I’m talking about here is the old theme (on the left) vs the new theme (on the right):

IOS SimulatorScreenSnapz004IOS SimulatorScreenSnapz003

The wiki page links are now highlighted in yellow surrounded by a rounded border. Top level titles have an underline, and the default font has changed from Arial to Trebuchet MS.

If you are someone who thinks the new style should be scrapped let me know! If you think it is an improvement let me know!

You can revert the style by turning on the custom stylesheet. To do this carry out the following steps:

  1. Tap on the Settings app (from the home screen with all your apps on)
  2. Scroll down until you find the settings for Trunk Notes
  3. Turn on “Custom Stylesheet”
  4. Double tap the (physical) home button on your device
  5. Hold down your finger on Trunk Notes then tap the – indicator button
  6. Go back into Trunk Notes and in the search bar type Special:SetStyleSheet
  7. Edit the page
  8. Remove all the text
  9. Paste the old stylesheet text into the page, then click Save. (The old stylesheet text is at the end of this blog post)

So if you detest the new style and want the simpler look of Trunk Notes 2.5.2 it is (fairly) easy to switch back. If I get enough comments pointing to the new style being horrible then I will bring back the old style in the next version of Trunk Notes.


Old stylesheet text:

body {
    font: medium Arial;
    font-size:16px;
    background-color: white;
    margin:0;
}

h1 {
    font-weight: bold;
    font-size: 20px;
}

h2 {
    font-weight: bold;
    font-size: 18px;
}

h3 {
    font-weight: bold;
    font-size: 16px;
}

#info {
    font: medium Arial;
    background: #CFCFCF;
    font-size: 12px;
    padding-left: 4px;
    margin-bottom: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 14px;
}

.highlight {
    background-color: yellow;
}

.highlight-selected {
    background-color: red;
}

#contents {
    margin-top: 0px;
    padding-left: 8px;
    padding-right: 8px;
}

table {
    margin: 1em;
    border-collapse: collapse;
    width: 90%;
}

td, th {
    padding: .3em;
    border: 1px #ccc solid;
}

thead {
    background: #ccc;
}

a {
    text-decoration: none;
}

a.wiki-link {
    text-decoration: underline;
    border-bottom: none;
}

a.missing-wiki-link {
    color: red;
}

html {
    -webkit-text-size-adjust: none;
}