CSS Fixes Part 2 - Onenote/Evernote Style bulleting

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;
}

3 Likes

Nice touch. It would be great to develop this further. Thank you.

1 Like

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

1 Like

@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 ;^).

You may check out the code here: Readily Identify Any Collapsed Level while also Allowing Custome Bullet-Icons

Cheers.