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.
[…] https://blog.workflowy.com/2016/03/24/painter-for-workflowy […]
[…] couple of moons back I came out with a post on the Workflowy Re-Painter style which allowed us to tweak Painter for WorkFlowy’s 17 punch-you-in-the-face colors and tone […]
Hi Frank, I’m using HandyFlowy on my iPhone and very excitedly noted that styles can be used in version 1.5
I quickly pushed some of my frequently used “formatting snippets” I’m always using in Chrome via Stylish to my iPhone (HandyFlowy) and it works pretty seamlessly.
The only remaining issue I’m having now … I cannot use “Re {Workflowy Re-Painter}” on my iPhone since it obviously requests “Painter for Workflowy” (Chrome Extension) running in the background (which I obviously cannot have on my iPhone).
Question … Would you know of any way to colour the background of a whole line by CSS or a Stylish kid of script/theme? What I basically want to achieve would be a kind of line coloring as provided by “Painter for Workflowy”.
Any idea on how to doing this? I’ve played around already for quite some time, but can only achieve a colored background as for instance in “Zen Colour Labels”, but I didn’t find a way to coloring a whole line.
If you could probably hint me in any direction, I’d be more than thankful.
Thanks, Eberhard
Hey… excellent question. Someone with programming skills would likely have to create a Javascript thingamadoodah… and then one would load that script into HandyFlowy.
I’m quite impressed with HF’s speed. Way faster than the native app… yet the new version is incredibly buggy on my old iPhone 4S 🙁
I am using the colors, and they work fine. However, I had a brainstorm that didn’t work. I decided I wanted all @wip to be orange, so I went into repainter, and changed the name “orange” to @wip or wip depending on the situation. Didn’t work. What am I missing
Are you looking to swap out the “#orange” name tag with “@wip”? If so, that can’t be done, because the Stylish style depends on the Painter for WorkFlowy extension, which has set tag names already.
If, on the other hand, you’re looking to change the actual color of your @wip tag itself – (not the list background color), let me know and I can get you the stylish code.
I think I must have to declare wip to be a color somewhere else. Maybe in Painter? Which I can’t get into. Ok, I answered my own question.
This is fantastic, it has increased the usability of Workflowy for me quite a bit! I am going to include some text below anyone can copy and paste if they want to have a good visual representation of what color are available, right inside their Workflowy (the color names are included so they show up; once the extension kicks in, the highlight disappears)
red #red
maroon #maroon
orange #orange
yellow #yellow
olive #olive
green #green
lime #lime
teal #teal
aqua #aqua
blue #blue
navy #navy
purple #purple
fuchsia #fuchsia
black #black
silver #silver
gray #gray
white #white
Thanks a ton Hector!
I remembered this extension/Stylish-style when I recently needed a way to better separate out the sections in my daily kanban-like “project mananger” that I use to keep track at a high-level the projects I’m working on (each project itself has its own Kanban; my projects are typically the three-letter nodes, as shown in the screenshot below).
The section below the pink backlog-today, divides my day into four 2-hour sections (my “pomodoros” are a two-hours each). The pink backlog is for items that I’m hoping I can get to if the other scheduled things get done as planned. Notice that it is nice to still have the hi-liter Stylish-style available to highlight the backlog priorities.
I really don’t know what I’d do without WF at this point… its a life-saver!
Frank. Great stuff! I have one problem. The padding is not showing up across the entire line when a color tag is used. I turned off all other style sheets, refreshed and nothing. Also can you suggest some code that would allow all the text on a particular #tag line to turn a different color instead of being highlighted? I want #start date tags to turn the whole row of text grey so I don’t really seem them as well as the others. The cognitive load needed when perusing all my tasks is becoming overwhelming and I think this would help if I could reduce the start date tasks to an almost invisible text.
Hey Chandler, could you send me a screenshot… or link to it here for others to see?
Did you know that the original “Painter for WorkFlowy” extension has marker mode? So when you don’t have it activated and you have this post’s hack turned off, it will color just the text.
You could also modify the text and background color in the “Re {Workflowy Re-Painter}” style for any of the colors, which will give you what you’re looking for. You could then color the tag white if you want to hide it on a white background. Let me know what you’re wanting to do and I could help you with the code. 😉
I don’t know if it’s possible to use Stylish alone to style entire lists (lines) tagged with your own custom tag… since in this case we needed the “Painter for WorkFlowy” hack to achieve this.
Here are a couple of options:
1. You could filter your #start tags out by using “-#start” into the search box.
2. You could use your #start tag… but in addition you could also style one of the “Painter” color tags to make the contents of a list lighter. Include the following code: “opacity: 0.2;”
3. Use a Kanban-type system (within each individual project) where you move all your completed items into a “Done” stage.
4. Complete your #start items and hide them
5. Complete your #start items and keep them visible, yet a lot more opaque (which fade back in when hovered over) with this code (you can play around with the opacity):
/* Fade out completed items + fade in on hover over */
@media screen {
.project.done .content,
.project.doneAppearance .content {
opacity: 0.4;
}
.project.done:hover .content,
.project.done:focus .content,
.project.done .content:focus, /* .project:focus doesn’t work in Chrome as it’s not editable (untested in FF) */
.project.doneAppearance:hover .content,
.project.doneAppearance:focus .content,
.project.doneAppearance .content:focus {
opacity: 1;
}
}
Or perhaps I don’t understand the dynamic you use your #start/ #start_date tags for…
Almost forgot… There is another option to style your lists with any custom tag you like.
(1) You need to install one of these Tampermonkey scripts (In the Tampermonkey extension):
https://gist.github.com/lukemt/bd90b41e9603e0737a30
(2) Use and modify the following code (in Stylish) to style any tag you want from there on out (2 examples):
/* Change any outline to Monospace by tagging with #monospace) */
div.project.monospace-proj div.content {
font-family: Monospace, Courier;
}
/* Change any outline to Courier by tagging with #courier) */
div.project.courier-proj div.content {
font-family: Courier;
}
The above is a hack to change any outline to any font family you want… but all you do is swap out the name of the tag and create the styling you want for that tag. So if you wanted to lighten lists tagged with “#start”, you would do something like this:
/* Lighten any outline by tagging with #start) */
div.project.start-proj div.content {
color: black;
opacity: 0.1;
}
Just tested this out. Works like magic 🙂
SUGGESTION: You might want to use a tag like #light instead /in addition… otherwise the only way to see the content of lists tagged with “#start” properly would be to explode the tag… and you would therefore lose it. So explode a secondary styling tag instead… like “#light”
This means you can create any number of individual custom tags to style any list however you want…
Only thing is: I am not smart enough to figure out how to isolate just, say , a parent list. What the above code does is affect all of the children lists too… which may or may not work for you.
NOTE: Any time you adjust this particular style in Stylish, it seems you need to reactivate it (check its style again).
Thanks for this. It’s quite awesome. My random notes:
1) I thought Painter was broken, but it was actual a Tampermonkey script that was bogarting the setInterval function (or something… anyway, disable your TM scripts one by one)
2) I made some changes for myself, but the only one that other will love was to add this to the padding section
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
Thanks for your passion and commitment. Originally I thought that having Workflowy hacks on the Workflowy blog was kind of a cop out, but now I think that it’s probably the only sensible thing to do with such a great product.
Big ups!
Dan
Thanks for that, Dan. I’ll do some tinkering…
The thing about WorkFlowy hacks (or hacks for any service for that matter) is that WorkFlowy cannot be everything that Stylish is. It cannot bring everything to the table that text expander apps, numerous extensions, etc. give us.
If WorkFlowy were to, say, introduce color, I doubt the customization would be as robust as what you can wangle out of these hacks. It would not be sane to expect that. Depending on where one does the bulk of their work, one’s desktop browser becomes increasingly attractive… and if extensions run in the background (so as to be part and parcel of one’s WorkFlowy setup)… and provided that those tools and utilities stick around for a long time, it matters little to me whether they are baked into WorkFlowy or not.
People use WorkFlowy to varying degrees… and it has a tendency to be incremental. The more one uses WorkFlowy, the more time one is willing to invest in the sorts of things that dramatically improve one’s workflow in WorkFlowy.
The overwhelming majority of people would agree that WorkFlowy does what it specializes in to an exceptional degree. I say this as a voluntary blogger here. My book was a direct offshoot of my experience with WorkFlowy… not one where I had to contrive use cases and scenarios. What I present in my book and on the blog is what I use personally… and it’s an amazing privilege to pick up a lot from other WorkFlowy users and make it part of my repertoire 🙂
Thanks Frank!
I agree for the most part. My only concern is with sharing Workflowy docs to others. I want them to see my images, too, and they are (unfortunately) added with a TamperMonkey script (which you wrote up a bit ago). Image linking should be added to WF “for real,” and perhaps markdown support in notes, too. Aside from that, I’ve got no real concerns.
On the flip side, every time I try out a Workflowy competitor, I realize just how genius WF is. So there’s that…
Yes… there is the aspect of sharing one’s documents. If one is bedazzling their WorkFlowy with all manner of hacks, invariably it will not look the same on the other end. I generally disable all my styles, etc. to see what the end user is going to see at the most basic… and take it from there.
I’m sure you’ve seen the “Imagus” extension post here. There’s a minimal fuss solution requiring no Markdown formatted image links to preview images on hover over. That’s my go-to at the moment. Easy enough for others to install.
What are you looking for in the way of Markdown support? Is it facilitated Markdown formatting or the preview you’re after? Have you read my book? I go into detail in some chapters on Markdown… and after adapting Markdown in WorkFlowy, there’s no way I want to hang out in any one of the well-known Markdown editors. Toggling and/ or split screen just doesn’t sit well with me… too jarring to the workflow. Send me a DM on twitter if you don’t have my book.
Thanks for all of this. By Markdown support, I merely mean that if one is fully zoomed in to a node and looking at notes (without the cursor being in those notes), those notes should render as Markdown. Or perhaps only if there is a #markdown tag in the enclosing node. This needs to be built-in so the Markdown could be available to others, especially in view-only Workflowy docs.
This would allow Workflowy to take its place as a strange but awesome Blog platform.
Imagus is okay, but asking people to install stuff is a huge barrier to entry. Anyway… Good suggestions all, but I’d still advocate for building some of this stuff into WF.
This is just one user’s opinion, of course.
If you’re looking to further tinker with more Painter for WorkFlowy extension hacks, here are two tidbits for you (including GIFS and code snippets):
(Cool button-type hover effect)
http://www.evernote.com/l/ATTny_vU6nhDzJC3TYspqhuOxiPrDReYSRM/
(Alert/ flashing elements)
http://www.evernote.com/l/ATSAbLXMoAtOv7nOdyMYN_IOmC4F1OsNd00/
Thanks for dropping by again with that, Dave. That will certainly help others with their troubleshooting. You’re absolutely right in that different styles might overlap one another and cause some quirks. I’ll have a global template out in the coming days that doesn’t interfere with other Stylish components: Full-screen minimalist.
Happy Easter!
Love your stuff Frank! However, how do I get the color tags (#red, etc.) to disappear? Mine still have a white background rather than matching the color.
Thanks, Dave
>
Hi Dave,
Take a look at this twitter convo.
Most likely you’re in the same boat because either…
(1) you haven’t installed the Painter for WorkFlowy Extension,
(2) you have it disabled
(3) or you haven’t refreshed your WorkFlowy tab(s) in your browser.
You need to refresh your browser after installing or enabling the Painter for WorkFlowy Chrome extension.
Hi Frank,
What I finally found after a lot of experimenting and re-installing “Painter,” as you suggested, was that the “workflowy.com – clean and bright” extension was blocking yours as far as the background of the tags was concerned. Turned that one off and yours works correctly now.
Thanks again!
10px looks perfect and yes, merged blocks would be too heavy. 👍
Made the change… which solves not only spacing between highlighted lists, but automates spacing between parent lists and adjacent higher-level lists at the end of a list of siblings. It’s a mouthful, ha!… but it looks fantastic!
Excellent and ( again ) thank you, Frank!
One additional ( tweak ) suggestion to work on Frank: Colour filtering should highlight the tag as “invisible”. Looks nicer and doesn’t hurt the eyes 😉
I can see you spotted that 🙂 Yes… that would be nice, Stefano. Thing is I don’t know if it’s possible to have different “.contentMatch” colors set for multiple tag elements simultaneously. Or at least it’s over my head.
One thing you could do is set it to “transparent” or make it 100% opaque… but I really need a solid color .contentMatch for general searches. I don’t know that I want to be flipping the switch on individual styles on and off.
There must be a way… but I’m sort of a newbie at this 🙂
What about the following?
/* Zen Search Highlight */
.contentMatch {
background-color: transparent !important;
font-style: normal !important;
font-weight: bold !important;
text-decoration: none !important;
}
All searches will be bolded. However, matched colour tags will not show up until you hover over them. Try it out 😉
Here is another tweak for not having to manually add “empty note lines” … nice ( visual ) separation of coloured blocks.
Change / Add the following snippet in your padding section:
color: black !important; padding: 0px 10px 3px 10px;
margin-top: 5px;
margin-bottom: 5px;
Swap the black with white accordingly.
Cheers
Good thinking Stefano. There’s a tweak right there for those minimalists out there.
I tried it out… and I’m thinking along the lines of also changing the font family up so that it’s more pronounced … and/ or even the font size. Just for tinkering’s sake…
Yep, once you start enhancing a style sheet … 😉
Another great workaround… will make it a permanent fixture. Looks great!
margin-top: 10px;
margin-bottom: 10px;
Frank, you’re always chasing rainbows and pushing envelopes.
@Writch, I really enjoy your comments here and elsewhere, ha! I see you spotted the envelope… so I know you’re taking it all in 🙂