Any Background Color You Want for Individual WorkFlowy Lists: Tweaking “Painter For WorkFlowy” Chrome Extension

blog-book-button

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.

31 Comments

    1. @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 🙂

    1. 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 🙂

    2. 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 😉

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

    4. 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…

    5. Another great workaround… will make it a permanent fixture. Looks great!

      margin-top: 10px;
      margin-bottom: 10px;

    1. 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!

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

    >

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

    2. 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!

  2. 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!

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

    1. 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 🙂

    2. 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…

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

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

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

    1. 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…

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

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

  5. 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!

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

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: