Folding Text Theme Customisation

I got the excellent Folding Text recently and wanted to customise the CSS so I can have my own look and feel on an app I've been using a lot. I'm like that.

It was a bit awkward for me to set up an quick workflow that didn't involve having to reload the app after each try but after a bit of effort and some pointers from Jesse Grosjean it's ended up pretty sweet so I thought I'd blog it just in case someone else is looking for something similar.

First of all follow these instructions to create a User Theme you can edit

You can edit style.css in the directory you made above and if you know CSS it's pretty easy to make the changes you want. Only bad thing is each time you change something you have to quit / restart Folding Text to see what you've done. I hate that :)

Luckily the App is written in Javascript and there's a version that works in a web browser. If you installed the App in /Applications then this is the link:

file:///Applications/FoldingText.app/Contents/Resources/javascript-dom-build/html/editor.html

There it is up and running but not in your theme. Don't worry! You need to add a var called themeCSSPath on the link to get it to use your User Theme's style.css. So if you're user name is gaz (like mine) the place you theme is probably:

/Users/gaz/Library/Containers/com.foldingtext.FoldingText/Data/Library/Application%20Support/FoldingText/Themes/User.fttheme/style.css

If your user name is tom or bill or lisasimpons_666 just substitute that for any Gaz's above.

Put it all together and this is the link that works on my machine:

file:///Applications/FoldingText.app/Contents/Resources/javascript-dom-build/html/editor.html?themeCSSPath=/Users/gaz/Library/Containers/com.foldingtext.FoldingText/Data/Library/Application%20Support/FoldingText/Themes/User.fttheme/style.css

You open this and append the URL of your CSS as a var YYYY. What does that mean. Well

Wow that works pretty well. Make the change in the your CSS, refresh the broswer, see your changes. Sweet.

The only minor niggle is after you refresh you lose any text in the view. That's solveable with another var, this time textContent. I made a test doc and then URI encoded it at this site here and then slapped it on the end of the link. This is the final frankenlink that get me a page up, using my CSS and with some demo text that I can refresh on every CSS edit:

file:///Applications/FoldingText.app/Contents/Resources/javascript-dom-build/html/editor.html?themeCSSPath=/Users/gaz/Library/Containers/com.foldingtext.FoldingText/Data/Library/Application%20Support/FoldingText/Themes/User.fttheme/style.css?textContent=%23%23%20Test%20Text%0ASome%20notes%20and%20some%20bold%20notes%0A-%20An%20item%0A%09-%20Another%20item%0A-%20Something%20in%20BOLD%0A%09Some%20notes%0A-%20Somemore.todo%0A%09-%20Not%20done%20item%0A%09-%20Done%20item!%20%40done

Phew!

Sorry about the wrapping issues on this blog post but I'm not sure how to fix them. Or inclined to find out :D

References

jessietwitter foldingtextthemes uriencode foldingtext

comments powered by Disqus