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:
- Add a class like
hash-coolto the tag itself, and to the node it is on (enable more flexibility in styling nodes as well) - 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:
- Coherence. To have the system be coherent seems like a value in itself.
- 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.
- 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.
I want to style the font size in notes to be bigger. Colors schmolors, older eyes need to be able to easily see that tiny font.
I like it. A competitor does something like this and, as far as I can tell, it’s about the only way it would be better for me (otherwise, WorkFlowy kicks butt… that competitor doesn’t even support underlining, which I need). I’ve written several WorkFlowy userstyles/themes for my use because I like custom CSS and it’s neat to be able to change background images, themes, etc., on a fly. Would be outstanding if I wouldn’t have to use a Chrome extension, and could just do it in Workflowy, so the custom CSS can apply everywhere: desktop app, mobile app, website, etc.
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:
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.
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.
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”
Please go for it. Customizing my own css would be wonderful.
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
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?
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.
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.
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
But, i think you already done this, no?
https://blog.workflowy.com/color-coding/
The workaround you linked requires chrome plugins and only works in the browser
Oh, shit
Ok, think that this way is easy to install for app