CSS fixes to make Dynalist Easier To Read

[Vincent_Tang]

I find the following fixes to customized stylesheet to make dynalist easier to read overall from a UX perspective

.Node-bullet:before {
    font-size: 6px !important;
}
.Node-self {
    padding-left: 83px !important;
}

It makes bulletpoints smaller, so its overall less distracting, and has better vertical alignment to text in my opinion.

I might have to change up the bulletpoint: collapsed to be a bit bigger or different color down the road though, granted I don’t collapse a lot of items to begin with

Example with changes:

Without changes

I drew an illustration illustrating difference on vertical alignments. Vertical alignment intersects the start of the line now, which is more relevant, than the bulletpoint previously

I’ve been using this change for about 2 weeks and its given me significantly less headaches looking at dynalist.

Its a hybrid between read/edit mode

I cleaned up a lot of theme things that I use on my stylish extension found here (I added the changes here already)

https://userstyles.org/styles/144225/dynalist-simple-colors-for-default-theme

[Kevin_Murray]

Thank you. It does make the screen cleaner, but there does seem to be some slight interference with the border format in PowerPack 2, where the bullet overlaps the border now. It’s liveable, but feels slightly wrong.

[Vincent_Tang]

your right it looks awful

---

---

FIXES

I made a clever workaround for you if you use powerpack V2. Basically, you specify a border color with powerpack V2, you ignore any visual changes PowerPack has made, use the same metadata and make your own changes with Stylish Chrome Extension

How to use it:

Copy all 3 snippets below into stylish.css file

###1:

Add this snippet of code first, place it somenear near the top of your stylish css file. What it does is ignore any visual changes made by powerPack V2 when using border colors. E.g. when you use #s|bl:limegreen you see no visual changes

/* Completely ignore Piotr's PowerPack V2 border colors visual changes */
.Node[style^=border-left]{
    padding-left:0px !important;
    border-left: 0px !important;
}

###2:
Add as many of these as you want below that, for however many colors you normally use. So if you normally use PURPLE and LIMEGREEN, enter those here. Just swap out the color name and copy+paste more times as needed

/* If you specified `#s|bl:LIMEGREEN` you get the new color here*/
.Node[style^="border-left: 3px solid limegreen"] > .Node-children {
    border-left: 2px dashed limegreen !important;
}
/* If you specified `#s|bl:PURPLE` you get the new color here*/
.Node[style^="border-left: 3px solid purple"] > .Node-children {
    border-left: 2px dashed purple !important;
}

###3:
Any other colors you didn’t bother specifying just get a default red colored line (e.g. you use #s|bl:brown , you get a red colored line since you didn’t specify that color. Dump this below everything else

/* If no colors specified above, you get a red border when using `#s|bl:COLORNAME`*/
.Node[style^=border-left] > .Node-children {
    border-left: 1px solid red;
}

also if you want to see different styles you can use asides dashed or solid, check out this image

So you can use stuff like groove or dotted instead. You can increase the size of the line by changing the px values

A chart of colorchoices found here on this image

[Vincent_Tang]

EDIT

Also if you want collapsed bulletpoints with specialized colors add this to your CSS file

.is-collapsed>.Node-bullet:before {
 	color:red;   
}

[Kevin_Murray]

Very impressive. A master of style!

[Naveen_Roy_Vikkram]

Hi there, this looks great, thanks! Sorry, but I’m a newbie with CSS, where can I find the stylish.css file? And is this fix only for the desktop app? How about the android app?

[Vincent_Tang]

hi naveen

I wrote a short guideline for you as a seperate blogpost on medium

Use Stylish to Make Your Favorite Webapp Better

---

And is this fix only for the desktop app?

I suggest you use the webapp, the dynalist desktop app offers no advantages. You can’t use stylish on desktop

checkout this post I wrote here

Dedicated Taskbar icons for Dynalist

If you want a dedicated taskbar icon for dynalist, you can do this natively with chrome. Example, 2 dynalist homepages via chrome here: [image] how to get this to work Pick a dynalist url of interest Chrome → Settings → More Tools → Add to Desktop “OPEN AS WINDOW” Drag it over into your taskbar [image] Things you can do with this I have my hotkeys using phrase-express with the following: F1 → WIN+1 key F2 → WIN+2 key F3 → WIN+3 key F4 → WIN+4 key So i press the following buttons they m…

---

How about the android app?

I don’t use the android app much, but yes there is a way to have stylish installed. You have to use firefox for android, install stylish extension. I’ve tried it before but it requires a good number of workarounds to my knowledge.

Chrome android app does not support stylish / extensions.

[Pch]

EDIT

Also if you want collapsed bulletpoints with specialized colors add this to your CSS file

.is-collapsed>.Node-bullet:before {
 	color:red;   
}

I’m sorry to dig up this topic but, is there a way to apply this to the “bullet” (the tiny triangle) of numbered lists ?

So far I’ve found a way to change the color of the number in a number list but that’s not what I was looking for

If anyone has an idea, I’m all ears

[Lukas]

Try this:

.Node-self.is-collapsed .mod-expand-collapse::before
{
    color: red;
}

[Pch]

Works perfectly !!!

Thank you very much @Lukas !