Colors: the unification of colors features and custom CSS

By

July 1, 2021

Update: Comments from people in our Slack group seem to confirm that this would be a waste of time. Colors are really a need for non-technical people right now, and this would be irrelevant to them. I’m so happy to be blogging. You all are helping me be so much less stupid.

Yesterday I outlined our updated priorities for colors in Workflowy, but something has been bothering me about it. Those priorities have two separate branches: first, the interface that makes it easy to add colors by clicking, tapping or typing; second, the mechanism to customize styles in Workflowy for people who know CSS. It feels inelegant to have these be unrelated and independent. This has been itching my brain.

At some point last nigh I came up with a first idea at how to address this, which I’ll now attempt to describe.

Unifying the colors interface with custom css

First, make the custom CSS system support independent chunks

If we make the custom css system support individual chunks that can be turned on and off, that might serve as foundation unifying our work with for the rest of it. A rough sketch might look something like this:

Second, make our interface for manipulating colors rely on our custom CSS system

Once we have that system, we can put any styles needed for our color display into it, rather than hard code these. This will mean we need to use meaningful class names and no inline styles, but that should be fine.

For example, if I bring up the color picker for the tag “#cool” and pick blue, we would:

  1. Add a class like hash-cool to the tag itself, and to the node it is on (enable more flexibility in styling nodes as well)
  2. Add a style to our CSS customization like .hash-cool.tag { color: blue}.

Why would we do this?

There are a few reasons I’m interested in this:

  1. Coherence. To have the system be coherent seems like a value in itself.
  2. Discoverability. If users want to learn how to style Workflowy, the way we do it ourselves will be a great learning resource and jumping off point.
  3. Extensibility. If we force ourselves to build Workflowy in such a way, that we build it using the same tools other people can use people can customize it

Things we’ll have to consider

  • Default styles (users should be able to change the default style of tags, for example, and it should apply to all tags)
  • Users playing with the styles, messing them up, and wanting the original styles back.
  • Color themes & variables (for example, to enable dark/light mode or changing palettes).
  • Ids of rules. If we are manipulating rules via code, we’ll need to have strict IDs that the code knows about. Mixing this with user generated stuff could be tricky.

Will we actually do this?

I’m not sure. I’m trying to create fewer artificial barriers to progress these days, and perhaps this isn’t that important. Maybe we can figure out how to build one bit at a time. Maybe this is an example of a moment when I should focus on more important things and worry less about the elegance of some small part of the system. Maybe this is actually complicating not simplifying. I don’t know.

3 2 votes
Article Rating
Subscribe
Notify of
guest
12 Comments
Inline Feedbacks
View all comments
Dave in the American Midwest

BUG? Tags lose all color.

Tag colors disappear in link-shared outlines for all users except the creator of the color. Big problem for collaboration, as shared outline collaborating relies on tags; who changes / is assigned to what, etc.

Problem Description: Owner or shared user changes color of a tag. Visible only to that user. Other users can leave uncolored, or set their own colors, also not affecting other users. Doesn’t matter if the colors are set by the account owner or another user, or if in beta.workflowy.com or workflowy.com, Firefox or Chrome. (Other ways of setting colors are seen by all users).

Related: Two colors on tags. Steps to reproduce:

  1. I type # SampleTag (space after pound sign)
  2. Colorize font of “SampleTag”
  3. Delete the space, creating #SampleTag
  4. Set the background color of #SampleTag
  5. Letters after # have both the font color, and the background colors that were set.

We would like to use tag colors but cannot—we are forced into workarounds.

We were really looking forward to the enhanced productivity from tag colors (find key tags at a glance, etc) that I think was the intention here, but it’s not working.

Last edited 3 months ago by Dave in the American Midwest
Kent Green
Kent Green
4 months ago

Hi all
I am a Workflowy newby, so my comment here may be an old idea or too hard to implement, so, sorry in advance if that’s the case.

First, I love Workflowy already … simple clean so easy to understand, so easy to keep my priorities organized.

I could care less about color labels for organization, but there is one thing that I think would be a fantastic asset for me in using Workflowy, and that is location awareness.

To have Workflowy ring my bell whenever I walked onto a client’s site, or into the Home Depot, and then to have WorkFlowy present me with the appropriate list for that location would be worth any amount of “pro” version cost.

Dave in the American Midwest
Reply to  Kent Green

That’s a worthy goal, but see this post from Frank about easily navigating to where you need to be, and scroll down to “A saved search index”

Felix
Felix
4 months ago

Please go for it. Customizing my own css would be wonderful.

Gilles
Gilles
4 months ago

Yeah having css only formatting would be better than today because it would be cross-platform, yet people who don’t know css (like myself) would get lost. CSS is not simple/straightforward. I can copy/paste a piece of code and update variables, but this is already too complicated for a lot of users or potential users

Arthur
Arthur
4 months ago

Please don’t force us into controlling colors trough tags … Why do we need to add more content ‘noise’ into something that is a system feature?

Gilles
Gilles
4 months ago
Reply to  Arthur

I believe Jesse didn’t mean to control colors with tags, but with css. The tag is an example of an item to which a color could be applied. Anyhow it’s been updated.

Koush
Koush
4 months ago

Jesse, please don’t be confused and go ahead with color coding or even that CSS idea is wonderful. See, so many people has been asking this from you, since quite long, you can even check on our forum too, check this – Color Formatting – WorkFlowy (zendesk.com). Please, it such a long awaited feature, please give it now. Too much waiting to see.

Carlos Rebolledo Aguirre
Carlos Rebolledo Aguirre(@carebolledo)
4 months ago

Cada día tiene su afán !! Colores es más que estética si se utilizan bien y de hecho hay usuarios (entre ellos no estoy) que ante la falta de esa característica recurren a Chrome Plugins

Prefiero Colores en forma nativa y las opciones sobres las que se reflexiona y discute me serían útiles

Anton
Anton
4 months ago

But, i think you already done this, no?
https://blog.workflowy.com/color-coding/

Matt Hulse
Matt Hulse(@matt_hulse)
4 months ago
Reply to  Anton

The workaround you linked requires chrome plugins and only works in the browser

Anton
Anton
4 months ago
Reply to  Matt Hulse

Oh, shit
Ok, think that this way is easy to install for app

Share on twitter
Share on facebook
Share on linkedin
Share on email

Subscribe to the newsletter

We'll send you a weekly roundup of the latest posts

Overwhelmed?

Workflowy replaces your notebooks, stickies and bloated apps with a simple, smooth digital notebook that makes it easy to get organized and be productive.