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.