Workflowy

Background Images for Both Light and Dark WorkFlowy Themes

Frank Degenaar

blog-book-button

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).

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:

  1. Install the Tampermonkey extension
  2. Copy the JavaScript code from here
  3. Paste it into a new Tampermonkey script
  4. Include your own list of image links
  5. Save the script and refresh your WorkFlowy tab
  6. 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.

Exit mobile version