A year ago I moved to an apartment right on the beach. My last apartment, a block away from the beach, had me staring at a travel agency’s Disney World billboard. A small adjustment makes all the difference in the world.
Well-chosen background images, visible while you’re typing on an opaque overlay, can and will offer you a gorgeous new aesthetic. Some other adjectives that come to mind for the themes I’m giving you today are: stunning, calming, glorious, sublime… and most definitely delightful. I’ve put an insane amount of time (and love) into the themes presented here… and of course, I got by with a little help from my friends.
Light and airy
You’ll need to install the Stylish extension for your particular browser… and then you can grab the below theme here. I found all photos you’ll see from this point on at Google Images. You’ll have to scavenge your own.
Dark and sultry
If you’re looking for a dark theme for outlining at night when your eyeballs grow weary, you can pick up the below theme here.
Not a hot-air balloon type of person?
Both themes come with a default hot-air balloon background image. If you’d like to swap it out with something more to your own liking, you can edit the 4th line of your style and pop in your own image link. Actually, that’s what I’m expecting you to do. You may need to investigate how this works, but at least, in the case of images you have in Dropbox, you simply change the share link ‘suffix’ from dl=0 to dl=1.
And wait… there’s more!
Tucked away in each theme you’ll find a couple of features and omissions. They were purposeful and had practicality in mind when I set them up…
1. No toolbar
I’m giving you some tough love. Here are the keyboard shortcuts you can use to access any of the toolbar’s features. Learn how to fly and you’ll thank me later. Also, in stunning full-screen mode, it’s just you and your list(s).
- Undo/ Redo: Ctrl Z/ Ctrl+Shift+Z
- Hide/ Show completed items: Ctrl+O
- Star/ Unstar a page: Ctrl+Shift+*
- Bring up Starred Pages List: Ctrl+;
- Search box: Esc
- Save: Ctrl+S
- Show Keyboard shortcuts: Ctrl+? … speaking of which, I’ve included some code in the style which allows you to hover over WorkFlowy’s keyboard shortcut help menu at the bottom right to reveal it (that is if you have it activated):
2. For your eyes only
More than a few WorkFlowy users have mentioned wanting some sort of way to quickly hide their lists from prying eyes. I’ve given an 800px-leeway at the bottom of the page so that you can flip your lists up, up and away in a split second:
3. Wider lists
By default, when you install either of these themes, you’ll get a wider WorkFlowy page within which to move about. If you’d like the default dimensions, you can select that before installing… or go back to userstyles.org and update it if you missed that. A huge thanks to rawbytz for running me through the customization settings!
4. Done, done and done
These templates have some code which fades out your completed items a tad… and fades them back in when you hover over them. Try it out.
All my pictures right here right now. D’you know what I mean?
If you’re happy with one background image, then we’re done here. If you’d occasionally like to swap out your images, we’re not done here. Take a look at the GIF below… All I do is double click in the left or right margin to randomly swap out the current image from a predefined list:
If that’s the sort of thing that you might want to have at your fingertips, this is how you’ll get the job done:
- Install the Tampermonkey extension
- Copy the JavaScript code from here
- Paste it into a new Tampermonkey script
- Include your own list of image links
- Save the script and refresh your WorkFlowy tab
- Double click in either the left or right margin
A shout-out to @wizmann for sparking the idea by posting this simple piece of CSS on twitter:
… as well as tinkering with the JavaScript code over several days until it worked with no hitches – along with detailed instructions posted on Github. My images are transitioning perfectly!
Closing comments
This is highly addictive. Enjoy.
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.
[…] you’d like to set up something similar, you’ll (1) want to take a look at a post entitled, “Background Images for Both Light and Dark WorkFlowy Themes.” and (2) create an additional Stylish style specifically for your shared […]
Hi, I’d like the make the workflowy page wider, but without using thoses extentions your talking about… because i don’t want the other features and i already use other few stylish scrips. …and i was trying to fix the width larger modifying a simple scrips called “WorkFlowy Width And Custom Tag Colors”, but i can’t get my workflowy page centered… can’t figure out how to do that… ( the only line of code that i let in the script is: ” page{width: 70% !important;} ” and i have a larger workflowy page with that… …but it’s not centered! Thanks a lot if you have any idea 😉
[…] your lists around and order them by priority if you must (I must). Also have a background image of a hot-air balloon if you will (I […]
Frank, thank you for a new colorful Workflowy experience!
A couple more tidbits someone might find useful:
If you’re in the middle of typing and need to hide your outline from the prying eyes (see “2. For your eyes only” section of the post) but hitting Page Down key several times (in case of a long in-focus outline) takes too long, using Ctrl+Alt+End shortcut would transport you all the way to the bottom of a page in an instant (Ctrl+Alt+Home would take you all the way to the top).
If you are one of those who went for the additional Tampermonkey script to change the images, then take a look inside that script. You’ll find 3 values the might be of interest:
1. “BING_TODAY”,
2.”BING_RAND” AND
3. “CUSTOM”.
Setting “var TYPE = “one of the 3 values”” will get you
1. Bing image of the day,
2. randomly generated Bing images you can flip through via double click in the margins or
3. randomly cycled images from the custom list via double click in the margins
The default is “CUSTOM” type and “CUSTOM_URL_LIST” currently has 4 images from Microsoft. These images can be found here:
http://windows.microsoft.com/en-us/windows/wallpaper
along with a ton more you might want to add to your collection by right-clicking on the image, selecting “Copy Link Address” and then pasting that into the “CUSTOM_URL_LIST” in the Tampermonkey code enclosed in single quotes (don’t forget to separate all the image links in the list with commas).
Enjoy!
Thanks for those tips Ksenia.
I didn’t know about the Ctrl+Alt+Home/ End shortcuts as opposed to just Ctrl+Home/End. That’s a new one for me 🙂
Also, thanks for spelling out the different Tampermonkey options. Images are so particular to each person that I encourage people to go and scavenge far and wide for some really good ones. The good thing about the Bing images is that they are fairly “lightweight”… so they load super fast.
Frank, this is brilliant! The loss of toolbar alone gives a totally new feel to using Workflowy. I notice your balloon image is 2560 x 1600; is there a particular size the image needs to be?
Hey Simon, how are you doing without the toolbar?
Nope… no particular image size (or dimensions) needed. The code will adjust the dimensions to give you a full-screen image. As far as image size: I was too lazy to downsize – so yes, 2560 x 1600 might be excessive… but it takes a second or two to load initially (at the same time your WorkFlowy loads)… and then you’re good to go.
P.S. The choice of different solid colors might be good too … easier on the eyes and pleasant to type on.
You can most definitely do that. Explore a bit on https://userstyles.org/styles/browse/workflowy 🙂
Thanks! I love and use the yellow highlighting search results feature there.
I’ve always found transparency distracting while typing. However, I just had a thought. For those who would enjoy a scenic, animal, or other themed header with the rest of the page just your standard white, would that be hard to create? Just a thought …
That would be easy to create. One would create a white background image with your “header” image along the top… and then increase the top margin somewhat in the stylish style… or alternatively you could have an inline image in any list you want if you care to tinker with this post.
Uh oh, I need to subscribe in order for WF to allow inline pictures, right? With my free version I was able to put the “Clip to WorkFlowy” on my toolbar and use with great success I was, also, able to *bold* the text but I imagine that when it comes to inline pictures I’d need a subscription to WF. BTW, I don’t use Google Chrome due to my feelings about privacy . . . Not that we have any anymore. (grin) I use the latest version of FireFox and the latest version of IE (bundled with my machine). Firefox is my Default browser.
Nope. No WorkFlowy Pro required.
Firefox has add-ons for Tampermonkey and Stylish. It’s just a matter of installing them and following the steps outlined in the inline image post referred to.
Thanks, Frank!! Yeaa! Can’t wait to try Tampermonkey and more of Stylish! You’ve made a great program even greater. 🙂