This is for those among us who squeeze a lot out of WorkFlowy in the Chrome browser. This is also for those who like a tad bit of (the “right”) color in their outlines…
In my book, I gave an overview of these two browser extensions which are massively popular within the WorkFlowy community:
Here’s a free download of those two chapters 🙂
In the good ‘ol days…
This is what Painter For WorkFlowy does (did) for you:
It gives us a set of color tags that allow one to color the background of individual list items (or notes).
I wrote in my book:
“Sometimes we need attention-grabbers. In a minimalist app such as WorkFlowy, [Painter For WorkFlowy] is like a punch in the face. Sometimes a punch in the face is exactly what one needs, especially if a punch in the face could save us from far worse consequences. I don’t use this functionality much, but when I do, I feel it’s justified.”
I’m not overjoyed with the above color choices… However, recently I happened upon a WorkFlowy “style” by user @arose on Userstyles.org called “Workflowy Re-Painter”. What this style does is allow one to change up the tag colors of the Painter For WorkFlowy extension with any other color your heart desires. Less of a punch in the face… more like a cheek pinch now.
New horizons
I love the softer, pastel colors of “Workflowy Re-Painter” and so decided to tweak this fantastic idea. I kept the colors and made the following adjustments:
- Invisible tags: Once you’ve typed in your tags, they are hidden from sight because they’re the same color as the background color.
- Box shadows: give individual lists/ blocks a sort of 3-D-relief effect.
- Padding for the left/ right margins
Here’s my tweaked style called, “Re {Workflowy Re-Painter}”
- You’ll want to install the Stylish extension before you install the above style. And you’ll also want to have the Painter For WorkFlowy Chrome extension ready for action (Don’t forget to refresh WorkFlowy after install).
- Once set up, they always run in the background automatically without you having to lift a finger.
Tadaa!
This is the result:
- A shout-out to Stefano Rausch for suggesting a tweak to the style, which gives spacing between side-by-side highlighted lists.
Use cases
You can also color your notes by using these tags:
With box shadows it now makes sense to give a list or a note a “#white” tag, even with a white document background:
Besides using color tags, you can also highlight tasks according to their priorities:
You might want to color-code sections of an outline like in the following GIF. When you filter for any color tag, you’ll get a condensed view of comparative categories:
If you’re editing any body of work, you could use “#edit” tags and then filter for them when needed…
… and/ or you could color-code blocks of writing so that they stand out and then filter for those (or not):
Tweaking tips:
- If you’d like to set up your very own custom colors, you’ll have to tweak the color code of the tags in the installed style. If it’s all a little flustering, browse through the handy, step-by-step instructions for changing different elements of the CSS in the downloadable PDF I’ve provided the link to above. I poured a lot of geeky love into it, and trust me – none of it will be over your head. It’s a case of “monkey see, monkey do”… of which I am the primary of monkeys.
- Be warned: tweaking and tinkering CSS style sheets can become very addictive.
Got any use cases or brainwave ideas to share? Please do let us know below…
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.