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;
}

8 thoughts on “The new Trunk Notes theme – Love or Hate?

  1. The font and underline I can deal with. I do not like the yellow highlight for the links. It’s just too much.

  2. Like it. Still maybe missing something, maybe needs a bit more flash.I can see how some may not like the yellow highlight (custom color options?) cause it doesn’t fit with the rest of the dull UI. I don’t mean to bash on th UI but bring a wiki it doesn’t require and flashy UI. The yellow wiki links add greatness to a lacking UI. So I say keep it and improve on the rest of the UI to make the yellow highlitghs feel more welcome. Just my two cents, and please update your app icon so at least it doesn’t suffer from the black corner syndrome.

  3. I really like Trunk Notes and it is now my main app on Ipad. I use it for everything i can.
    I really like the font change and highlights.
    Thanks for a really good product

  4. I love TrunkNotes. Great app. I do not, however, like the yellow highlights. I do like the new h1 underline.

  5. I toned down the yellow colors on TrunkNotes by following steps 1-7 above (i.e. going as far as editing the custom stylesheet, but *not* deleting and pasting), then, in the a.wiki-link section of TrunkNotes’ “new” stylesheet, I changed:

    background-color: yellow;
    border: 1px solid #E0DD1B;

    to:

    background-color: #FFFFDD;
    border: 1px solid #FFFFAA;

    giving a very light pale yellow background, more of a hint than a highlighter.

    • Carl, thanks for your comment about how to alter the css. I like how the links are highlighted but don’t like the harsh yellow color.

  6. Actually, I really don’t care too much for the new, yellow-highlighted wiki links. It’s nice that you offer a work-around to change the links back, but feel that it’s a bit of a hassle and would rather it be something you could change in Preferences; that, or the links be turned back to the style.

    On a more positive note, I love the program and use it for many things. In addition, I wrote a positive review for Trunk Notes for the REAL Studio Developer magazine (formerly, REALbasic Developer).

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>