As your use of WorkFlowy expands, you’ll be doing a lot more than creating lists. You might want to give life logging or journaling a go. Then there’s task management and project outlining, long-form writing, threshing out your blog posts… or just thinking about thinking.
You might very well want to have different fonts for different outlines, seeing as when you zoom into any list, you may potentially be moving into a different mode altogether. If you’re zooming into your journal, you may want to have a font that helps you put on your journaling hat. It could be a typewriter font… or whatever else. This post gives you those tools.
This is what you’re in for…
I’m getting ahead of myself here: Whatever font(s) you have installed on your machine, you’ll be able to create a custom tag for… and when you tag any list therewith, it and all its children lists will now take on that specific font:
The rhyme and reason
Carefully selected fonts can and will work wonders when setting up the workbench or writing environment that you actually want to hang out in. When I wrote my WorkFlowy book in WorkFlowy, I set my global font to Montserrat, an almost identical free alternative to the beautiful Gotham Rounded Light (which for commercial purposes costs an arm and a leg). So I got to write using the actual font that my book would end up having. That right there was pure magic. If I had know about this trick at the time, I would have been able to tag just my entire book-writing outline with a #Montserrat tag.
Go ahead and explore the wide world of fonts and you too will discover that certain font families go a long way in creating the aesthetics, and as a result, the mood or tone of what you are hammering out on your keyboard. You’ll easily find some gorgeous free fonts that are a snap to install.
Structure and order
It’s not all about prettifying your outlines. Your choice of font is also highly practical. Choosing a Monospaced font for certain outlines ensures that you have evenly spaced characters. There’s an example in the animated GIF shown above. Also, here’s a nifty little calendar setup that a WorkFlowy user, Rob Cherny, shared with me. A Monospaced font gets everything lined up nicely:
Behind the scenes: setting this up
You’re going to need 2 tools to get the job done. After setup, there is zero tinkering – they run behind the scenes. So don’t go all soft on me now. Put in the (minuscule) effort now and reap the benefits until… well, until your hard drive crashes.
- Tampermonkey (or similar). This is the 3rd post until now that I’ve brought in this neat little tool. You set it up in a minute or two and then you can forget that it even exists. Seek out and install the Tampermonkey extension (or similar) for your browser… and then create a new user script with the copy-paste JavaScript you can find here. I don’t know the first thing about JavaScript (neither can I manipulate it) – so you and I are probably in the same boat: copy and paste. That will get the job done
- Stylish: Chrome, Firefox, Opera. I hope you’re familiar with this extension by now. If not, here’s a free Stylish chapter download from my book. Make sure you have Stylish installed and then copy the code you’ll find in this shared WorkFlowy list into a new Stylish style.
Customizing your fonts in Stylish
This is what the code will look like in Stylish:
There are 3 examples above, but you can copy and tweak any of them to create your own font tags.
- In the 1st line: replace the description of your font
- In the 2nd line: replace my custom tag name with your own
- In the 3rd line: you need to insert the exact technical name of your font
You can create as many different tags for different font styles as you want. You could even change the color, size, font weight of your text, etc. In fact, this “trick” is really for styling any aspect of any list or outline you want (by tagging it). Changing up the font family was the first and obvious application for me. That’s just to say that the sky’s the limit if you care to tinker with CSS.
Once you’ve fine folk have got this up and running, would you mind posting a link (in the comments) to a screenshot of an outline that you’ve used a font tag on? That would be really cool 🙂
Additional tagging tips:
- Take a look at Ksenia’s font tag syntax which plays nice with WorkFlowy’s tag autocomplete feature.
- Try making your font tags transparent.
- Tinker with this code to hide/ archive any lists.
- To hide bullets in any outline, this is how.
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.
Can these be applied to the local app as well? or just via the web browser?
Only in the web browser… But Microsoft Edge has an option to save any web app as a “standalone app”, so this could be a workaround.
This being said – I don’t think the scripts on this page still work in 2024.
Hello!
I’ve been working on the font tagging but I’m finding that any Google Fonts I download and try to use, as well as fonts that have more than one word in their name are breaking the CSS. I’ve been fiddling with this for a while, and I was wondering if anyone could offer any insight.
A couple items to note.
1. I changed the Applies to URL on Stylish to https://workflowy.com/#, and then was able to get partial success.
2. Code Below
/* OPEN SANS */
div.project.oppn-proj div.content {
font-family: Gill Sans !Important;
}
I’ve been trying it with different fonts which is why the names do not match. Also, I have tried with using both single and double quotes with no success (to contain the font name).
I’m running Tampermonkey, and the styling script 1.1.
Thank you.
That’s strange. What platform and browser are you using? I am using some fonts with multiple words, and they work. I haven’t tried downloading Google Fonts, so I don’t know about that. I have multiple fonts in each of my styles because I work both on my Chromebook and on Windows machines, and the available fonts are different (the CSS will apply whatever listed font is available on the machine before resorting to default variations). This is the font part of my CSS:
/* POP */ div.project.sfpop-proj div.content {font-family: AR CENA,Hobo Std,Narkisim,Verdana !important;}
/* TEMPUS */ div.project.sftmps-proj div.content {font-family: Tempus Sans ITC, Comic Sans MS !important;}
/* CALIBRI */ div.project.sfcalib-proj div.content {font-family: Calibri,Carlito !important;}
/* CONSOLAS */ div.project.sfcnsls-proj div.content {font-family: Consolas,Noto Mono !important;}
/* ARIAL BLACK */ div.project.sfarialb-proj div.content {font-family: Arial Black !important;}
/* GEORGIA */ div.project.sfgrg-proj div.content {font-family: Georgia,Serif !important;}
Which version of Stylish do you use? I’m using 1.7.2, and it has changed considerably from when I first started using Stylish. Now you can specify “URLs on the domain” and just enter “workflowy.com”, and it will apply the style to any page in that domain.
[…] span to get any font style for whatever text you underline. But what about entire outlines? I wrote a post on using custom font tags to transform entire outlines to the style you […]
Thanks to both @abiloon and @frank.dg for these tips. I did have tag fonts installed, but I have turned it off for now. Also the fading trick may solve my problem better than what I was thinking anyway. I will use it for a week, and see how it works for me.
I want to mark items done, and NOT have them crossed off. I prefer to change their color, so I know they are done, but crossing them off makes them hard to read.
I also want them to disappear when I hide done items.
Is there a way to do this?
@rolfessenden, the following code works for me, except that if I have used a tag style to change the color of that list, the ‘done’ color does not apply. If you are using tag styles only for fonts (or not at all), then this should work. Of course, change the color to a color of your choice. If you are not familiar with CSS, you can use the w3schools.com Colorpicker (http://www.w3schools.com/colors/colors_picker.asp) to choose a color you like and generate a hexidecimal color value. For example, changing the third line to “color: #9966ff !important;” will give you a purple color.
/* APPEARANCE OF DONE ITEMS */
.doneAppearance .name .content, .done .name .content {
color: red !important;
text-decoration: none !important;
}
Thanks a ton for posting that @abiloon. @rolfessenden got exactly what he asked for. Here’s a piece of CSS that I poached from Userstyles.org… It fades out the completed items to a greater degree and fades them in on hover over (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.doneAppearance:hover .content,
.project.doneAppearance:focus .content,
.project.doneAppearance .content:focus {
opacity: 1;
}
}
This is what is looks like:
@frank.dg, thanks for the tip. And @Ksenia, thanks for taking the time to consider that. In terms of CSS rules, it makes sense, so I don’t expect an easy workaround. An inelegant workaround would be to make lots of slight variations in color and order them in the stylesheet such that any given main color can be replaced with a different subcolor, as in:
– Red 1
– Blue 1
— Red 2
– Yellow 1
— Red 3
— Blue 2
I.e., a sublist whose parent is styled Yellow 1 can still be changed to Red 3 or Blue 2. Then you could have sub-sub colors and so on. As I said, not very elegant.
Hmm, that’s odd. I’m on Windows 10 and tried it in Chrome Version 53.0.2785.101 m (64-bit) and also Chrome Version 55.0.2858.0 canary (64-bit). And before adding the !important element the code performed exactly as you showed and the after is working great.
That’s strange. I’m on Windows 10 and Chrome Version 53.0.2785.101 m (64-bit) too. The order of the styles in the spreadsheet is clearly influencing the behavior. I have tried resaving, reloading, restarting Chrome, but no change.
Screenshot of the code:
http://abiloon.com/wp-content/uploads/2016/09/code-important.png
Screenshot of the results:
http://abiloon.com/wp-content/uploads/2016/09/important-results.png
BTW, how did you post an image directly into your comment?
Hey @Abiloon,
It seems that if one pops the image link in after a line break (hitting Enter), the image shows up 🙂 (i.e. no other text in the same line).
It sounds silly, but did you by any chance make a copy of the code while you were modifying this version and its overriding your results? Because I did find that the order in which you turn on the styles does matter. So maybe try turning off all the styles except this one and see if that fixes the issue.
My bad, I didn’t put the !important everywhere. And the !important being in every line defeats the purpose of it (at least in this context) because then the hierarchical approach still rules. Let’s see if any of the CSS gurus know of a workaround. Sorry for the false hope.
I’ve noticed something about the hierarchy of styles. If this has already been mentioned above, please ignore it (or you can just not approve it, Frank). Apparently styles applied by tagging will not override previous styles from your stylesheet. In this screenshot http://abiloon.com/wp-content/uploads/2016/09/stylehierarchy.png you can see the color styles I have specified, in the same order as they are in my stylesheet (you can see the code in my post above). If I apply the #bluegray style, then in sublists I cannot apply #dustyrose or #chillgreen, because they come before #bluegray in the stylesheet.
I’m guessing there’s no workaround for this, but if there is, please let me know.
Adding !important to every line of your code appears to fix the problem 🙂
/* DUSTY ROSE */ div.project.dustyrose-proj div.content {color: #f99 !important;}
No, @Ksenia, that hasn’t helped for me. Not in Chrome on Windows, nor on my Chromebook…
Frank, this is awesome. I’ll probably be buying your book in the near future. 🙂
I just started playing with this, and this is what I’ve done so far. I know a bit of CSS, so it was easy to make tags for different fonts, colors, and highlight colors. Similar tags could of course be created for font sizes as well.
Screenshot of the result: http://abiloon.com/wp-content/uploads/2016/09/mystyles.png
Screenshot of the code: http://abiloon.com/wp-content/uploads/2016/09/mycode.png
I can tell I’m going to be going wild with this. Thanks again!
Hey @abiloon,
Looks like you’re giving your outlines some TLC. Thanks for sharing the screenshots 🙂
Very nice! What I’ve also found useful is to group similar tags together in classes and sub-classes for ease of referencing and editing even further. So in your example I would prefix all the above tags with “#s-” for “style” tags or even subgroup further to have “#s-f-” for fonts, “#s-c-” for colors and “#s-h-” for highlights. One benefit is the autocomplete that will help you input these tags when you’re editing your document. Another benefit – you can style the tags themselves in groups/classes rather than one at a time. I usually hide these types of tags once I’m done editing the document to have a beautiful outline without the style tags crowding the view. So, if the style tags were grouped as mentioned above the following code would hide them from view (I usually keep this in a separate Stylish to be able to toggle this on/off when needed):
[title*= “#s-“] {color: transparent !important;}
Please make sure you retype the double quotes in “#s-” in the above code if you copy/paste it as WordPress messes with them and renders the code useless.
Thanks @Ksenia! I’m going to try that. One question: what is the syntax for for styling things in groups/classes? (BTW, I looked up !important and now understand why it is important – although my styles were working without it).
Just as listed in my post, title*= makes sure that any item with the title that contains (that’s what the asterisk is for) the string on the other side of the equal sign will get whatever formatting that follows. Here’s the sample where the code is first formatting the tags with the “#s-” prefix (all style tags) and then applying just a different color to each subclass (“#s-f-“, “#s-c-“, “#s-h-“).
Sample:
?dl=1
?dl=1
Code:
To take advantage of Ksenia’s brilliant tag “bundling” tip for the tag autocomplete menu, you’ll need to have an already existing tag somewhere – anywhere – in WorkFlowy. If not, it won’t show up. So… keep a list of font tags tucked away somewhere… like so:
I have to agree that the numerous fonts give you better options for different types of works. The ability to change your font size to suit your desired outcome in amazing.
Nonetheless, it is certain that taking optimal advantage of this feature could be at first quite challenging. Much practice is needed for one to be fully competent when it comes to WorkFlowy fonts.
Your elaborate information goes a long way in making the usability of the fonts easier and more friendly. Thanks.
Why, thank you, fine lad. I’m glad this is working out for you 🙂
Great! …not so great is that I’m lost in possibilities instead of actually getting the tasks done on my Workflowy lists.
What I can’t find, is how to change the font on lower-level bullets.
I’d like the children in my list to have a smaller size then the higher levelled bullets. Makes my meeting minutes look a lot sweeter.
Do you have the way to the proper solution for this ? Would be great…again…great 😉
Hey Pamela,
Besides giving a specific font tag to each and every single one of your children lists and making them invisible (highly not recommended)… unless there’s some CSS that allows you to style all children lists of a tagged parent list, but not the parent list istself… you could use rawbytz’s “Underline Hack”. Whatever you underline will take on the characteristics you’ve specified in the code (and you can select multiple items at the same time:
span.contentUnderline {
text-decoration: none !important;
font-family: Gotham !important;
font-weight: bold;
color: black !important;
Change up the Gotham font (keep this as a standalone style).
Another thing might be to just underline the actual parent list contents with a bolder/ bigger/ heavier font. I do that for blog headings and book writing while I write in WorkFlowy.
Thanks, I’ll give it a shot!
Hey Frank and other users –
I’m using Stylish brilliantly to create colored tags. I’m wondering if I can do something similar to have Stylish color the ENIRE text of a line (based on a tag) and also to BOLD the entire line (again based on the tag.)
I’m not CSS fluent at all, so not sure if this is possible, or how to start this in Stylish. Any help is appreciated!
Hi Laura,
that is definitely possible, but not achievable with stylish alone, as far as I know. You would have to download the chrome extension “Painter For WorkFlowy” (see Franks post: https://blog.workflowy.com/2016/03/24/painter-for-workflowy/) and create a new Style with the following code:
.wfcolor-red {
color:red !important;
font-weight:bold !important;
background-color:white !important}
Each line (not an entire list, for this you would have to install a Tapermonkey script) in which you have entered the tag #red will have red font, bold font weight and a white background.
Additionally, you can make the hashtag invisible by adding this line of code:
[title~=”#red”] {opacity:0}
http://imgur.com/vX4qbQP
I hope this helps
Thanks to this post I make a #shoppinglist style.
/*#shoppinglist*/
/*This style turns the #shoppinglist tag into a yellow background and black text.
after you select or open the bullet it make the entire list yellow.
Enjoy
*/
div.project.selected.shoppinglist-proj {
color: #111 !important;
background-color: #FFFF00; /*yellow*/
border-radius: 5px
}
div.project.open.shoppinglist-proj {
color: #111 !important;
background-color: #FFFF00; /*yellow*/
border-radius: 5px
}
div.project.highlighted.shoppinglist-proj {
/*I don’t know how to keep the list yellow when you mouse over the bullet.
In addition it keeps the text color from the contentTag class below.
So I added this so the text turns white when you mouse over.*/
color: #FFF !important;
}
/*Borrowed from custom tag colours*/
.contentTag[title*=”#shoppinglist”] {
color: #111 !important;
background-color: #FFFF00;
border-radius: 5px
}
Really cool Johan!
This concept could be applied to many other use cases. For instance, if you wanted to have your journal Doogie Howser style, you could make the list background blue and have a white Dos font 🙂
That looks great, Frank.
But each time I copy the Tampermonkey script in, I get errors –
?dl=0
Is that normal?
Haven’t got it to work yet, but refreshed, etc.
Hi Kevin,
TM script errors in this case do not matter. This should work. Have you taken a look at the comments above and the solutions to what turned out to be missteps?
I’ve finally got it to work, but the 1.0 script on Tampermonkey, but not 1.1.
Now I see I’d inadvertently copied an extra line from the 1.1 script. All OK. now.
Frank…love what you are doing with the computer side for fonts. Frank… Please tell the developers to come up with a larger font that we can use on our iPhones and iPads. Some of us are not getting any younger and would appreciate the ability to use a larger font on our phones. Then we could nuke most of our Task apps. I’m sure they could come up with a nice larger readable font that we could choose from the list of fonts they give us. This way when we take Workflowy with us on our phones we could at least see it better. I’m sure I’m not the only one who thinks this.
Hey Kip, HandyFlowy on mobile now allows you to enlarge your font:
https://blog.workflowy.com/2016/04/21/handyflowy-workflowy/
Thank you for such a wonderful tweak! This puts an end to the countless hours of trying to compare the look of my outline using different fonts in my mind’s eye by changing the main document font in the Stylish theme, remembering the look, changing the font again, and trying to compare things in my mind. I’ve spent some time creating the font tag codes (using “#f-fontname” syntax makes it easier to separate font tags with autocomplete) for a considerable number of fonts I might use. Time well spent. Now I just plop a tag and can compare the results right in front of me, leaving my mind’s eye available for other endeavors.
Both this and the “archive/hide list” tweaks are coming very handy while I’m restructuring my outline. I separated the old and the new by different fonts so no matter where I am down the rabbit hole, I know whether I’m in the old burrow or the freshly dug one.
Magic, magic, magic! I love your #f-fontname tag syntax which harnesses autocomplete for any set of font tags. Going to make some adjustments immediately. It’s genius 🙂
Where would this tag go in the script? I can’t make it work.
/* MONOSPACE */
div.project.#f-mono-proj div.content {
font-family: Monospace !Important;
}
returns an error. What am I doing wrong?
I figured it out. Don’t put the # in the code. Now on to making them transparent.
Hey Frank,
Thanks for this excellent tweak.
Quick question: is there a way to override the default font with the one configured in stylish? (without the need to use the #font attribute).
Cheers,
Francisco
PS: As requested, here’s a screenshot using Ubuntu’s font face – http://i.imgur.com/RydjNwf.png
Hi Francisco, thanks for the screenshot. The Ubuntu font looks great!
Here’s the CSS code for Stylish to change the default font globally (as you can see, I use Monospace as my default):
/* Global font styling */
#documentView {
font-family: monospace !important;
}
Hey Frank,
Excellent stuff! And thanks for the lightning reply.
Best regards,
Francisco
Hi Frank,
is it possible to make the bullets invisible but not the text of a given list?
Hi Markus, there must be a way, for sure… but it’s above my CSS skill level presently. You could toggle all bullets on/ off with this CSS code (but then I’m sure you knew that already):
/* HIDE BULLETS */
.bullet, #bulletBucket .bulletBucketBullet {
background-image: none;
}
I got it to work eventually. In case anyone was wondering the same, here’s the CSS code:
/* Bullets hidden #nobullet */
.project.nobullet-proj .bullet {
visibility:hidden !Important;
}
/* INVISIBLE FONT TAGS */
[title~= “#nobullet” ] {
color: transparent !important;
}
Brilliant, Markus 🙂
I tweaked the code a little so that you can still click on any invisible bullet to zoom in:
/* Bullets hidden #nobullet */
.project.nobullet-proj .bullet {
opacity: 0 !Important;
}
I’m having some trouble with this. Using Chrome on Mac 10.11.5. Created new script in Stylish and saved. Refreshed Chrome. Tampermonkey says that the script is On. Stylish says that the new style is active. Link to Stylish script. Link to Tampermonkey script.
Any help would be appreciated.
All I do is copy the JavaScript into TM as is… don’t worry too much about any errors. It should work. I don’t know a thing about JS… but I do know that copying the exact code (with any errors) seems to do the job.
It seems like you’ve taken a thorough look at Stylish and TM in your troubleshooting. I cannot think of anything else at this stage but to copy the original TM code over one more time (version 1.1)… and then refresh your WorkFlowy browser tab (just as you’ve already done)…
Got it sorted out with an embarrassingly simple solution. I was capitalizing my tags! Using all lower case to match the script in Stylish solved the problem.
Another interesting tip:
Anyone wanting to “archive” or hide any lists, include this code and tag any outlines to be hidden with #hide:
/* ARCHIVE OR HIDE LISTS */
div.project.hide-proj, div.content.bullet {
display: none;
visibility: hidden;
}
Tagged outlines neither appear when navigating your account nor in searches 🙂
I was not able to replicate this archive/hide lists. Is there some piece of code that I may be missing?
Nevermind, it’s working now. Apparently it needed me to close the tab and reopen it instead of just simply refreshing my browser. Odd but I’m glad that this is working now! This is super useful! Thank you again!
Any screenshots of code pasted in Tampermonkey. Mine did not work.
Hi Kip,
Did you (1) save your TM script and (2) is it activated when you look at your TM dashboard? (3) Did you refresh your WorkFlowy tab? Could you post a link to an example screenshot of your Stylish code?
As far as the code in TM, it’s a plain copy-paste of the script linked to. No more, no less.
Thanks for the quick reply. Working like a charm now. Kip
BTW, if anyone would like to make their font tags invisible, use this code (just replace the tag name):
/* INVISIBLE FONT TAGS */
[title~= “#courier”] {
color: transparent !important;
}
Did not make transparent.
Here is copied code below.
/* INVISIBLE FONT TAGS */
[title~=”#mont”] {
color: transparent !important;
}
Delete your first “quotation mark” and enter it again. That will correct it. Unfortunately WordPress sometimes inadvertently changes the quotes in code portions pasted into comments… I’ve added a space in the code pasted… That should fix it for others copy pasting. Thanks for reporting back 🙂
Thanks for your help. That worked.
Any idea how to make fonts larger on iPhone and iPad in Workflowy? I think they should have a font option for some larger fonts or to make fonts larger on mobile devices. Sure would make it easier to see for those of us with waning eyesight.
Sorry… no can do… other than zooming into any list so it becomes the list title.
Lost here. For the #nobullet and hiding tags, should the code be pasted in TM or in the Stylish code?
Hi Pamela… Into Stylish. Once the TM script is installed, you can forget that it’s there.
Thank you for this but I am struggling with this one a bit… nothing is happening when I try to use these tags. I am on firefox, perhaps that is the issue. I have installed Tampermonkey and have that script running fine, and have followed the same steps with Stylish (I’m fairly tech literate)- I have tried fonts that are definitely installed in workflowy like serif, and many others, but … nothing happens. Perhaps if I understood better – is the stylish script in some way calling the Tampermonkey script? I don’t quite understand what the Stylish script is ‘doing’ .. Thank you for any help, I would really like to get this working
Hey Stephen,
Have you tried refreshing your WorkFlowy tab? After installing a Tampermonkey script that’s kind of necessary. Failing which, could you send me a screenshot of your Stylish code tweaks (frankman777@gmail.com)… or post a link here to an image online?
Stylish gives your outlines the style you want. The JavaScript code makes the tagging dynamic possible. As long as both your Stylish style and Tampermonkey script are installed correctly, you shouldn’t need to worry about how they interact.
Hi Frank,
I had tried closing firefox, but it seemed now that I had to close some background firefox tasks in task manager for it to fully refresh – it’s all working now, apologies and thanks!
Fantastic! Enjoy geeking out on your favorite fonts 🙂