Hereās a CSS fix that might be easier for people to read.
I find the vertical lines distracting so I removed all but the first 2 in the current view
Next, I like evernote/ onenote bulletpoint styling. It has different bulletpoint indicators depending on how far deep your bulletpoints are. This is what they look like;
My implementation is a mix of dynalist bullet folding with some evernote/onenote bulletpoint styling
add this to your stylish.css file
/*==================================*/
/* Bulletpoint Styling and Border-Left */
/*==================================*/
/* Remove all Vertical lines except first 2 in current view */
.Node.is-currentRoot .Node .Node .Node > .Node-children {
border-left: 0px !important;
}
/* Make Remaining Lines Green */
.Node.is-currentRoot .Node .Node-children {
border-left: 1px dotted green !important;
}
/* Hide All Bulletpoints (1st and 2nd in current view) */
.Node.is-currentRoot .Node .Node-bullet:before {
visibility: hidden;
}
/* Displays Any Collapsed bulletpoint */
.Node.is-currentRoot .Node .is-collapsed>.Node-bullet:before {
color:red;
visibility: visible;
}
/* Overrides 3rd Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node-bullet:before {
visibility: visible;
}
/* Overrides 4th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node-bullet:before {
content: "āÆ";
visibility: visible;
}
/* Overrides 5th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node-bullet:before {
content: "ā ";
visibility: visible;
}
/* Overrides 6th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node .Node-bullet:before {
content: "ā";
visibility: visible;
}
/* Overrides 7th Bulletpoint in current view */
.Node.is-currentRoot .Node .Node .Node .Node .Node .Node .Node .Node-bullet:before {
content: "ā";
visibility: visible;
}
Iām trying this out @Vincent_Tang and would like to understand the design concept behind it. Why would the first two levels have a line, rather than a bullet? One issue Iāve found is that it is not possible to see if a 1st or 2nd order item is collapsed or not.
Thanks.
I think of the first two lines in any document as if they were a āTable of contentsā . The first level bulletpoint is like the chapter, 2nd bulletpoint is a subchapter.
Everything else is kind of whatever, they behave more similarly to actual traditional ābulletpointsā in something like onenote, evernote, etc.
Also I rarely zoom into things, so thereās that too
I think I forgot to include that fix. I have it on here, mustāve forgotten to put it. I updated the code above so it should work now
@Kevin_Murray -it is possible to see if a 1st or 2nd (etc) order item is collapsed or not. I am posting the CSS in the Share~Showcase forum. I will add a link later.
Thank you @Vincent_Tang for your effort. It helped me investigate a methodology for
customizing the bullets at any level
āwhile alsoā
tracking the tree for allowing to create a visual que on any collapsed bullet, including plus~minus hovering ques.
Concept coding
There are two methods I found for identifying āa levelā, each with its own limitations.
There are two methods I found for identifying/tracking "the āis-parentā (level has children) and ācollapsed-or-notā states.
ISSUE:
I identified a problem where cascading CSS stopped properly propagating the affect when applying a simple ā.Node thru .Nodeā coding method (as Vincent uses above). I was unable to identify why this happens, the .Nodes cascade logically throughout, and the traversing logic is sound.
Thing is, this broke the is-parent/collapsed states tracking no matter what approach I used.
=========================
THEN (ISSUE 2)ā¦
ā¦I worked the problem by tracking the cascade of nodes via explicit parent element (">") identification of the target nodes.
This worked really well, but then it broke the simplified css code application in the āis-parent/collapsed statesā tracking code.
::sigh::
After fiddling with this for way too log a time, what I discovered is that I could use the simplified .Node to .Node traversal code-method (as Vincent does above) for assigning custom bullets to the Levels, and then I used a combination (kludge) of āexplicit parent element (ā>") identification" with .Node-to-.Node tracking logic and achieved a semblance of explicit level tracking that allows āis-parent/collapsed statesā to cascade as deep as you may go.
My CSS skills arenāt what they once were, i.e., a more professional modern-day css coder would likely do better, but the solution is usable now at least.
LIMITATION
At the end of the last ālevel-defined bullet styleā in the CSS code one creates (from what I will post), any levels added in your Dynalist beyond that point have the same bullet icon as that last one in your CSS, but, as mentioned above, the āis-parent/collapsed statesā fully cascade ā¦so you can always readily identify is a node has children or not ;^).
