Your CSS gave me the idea to use column-style when I have H1 and a color-label enabled or an certain tag in the parent node, but I havenât managed to do this. Would you like to help me, please?
Hi, I havenât figured out how to do the tags, but I think the selector would be Node.is-currentRoot > Node-self.is-heading1 node-line.mod-color-label-3 (or whatever number label you want)
I donât think so; that would need modifying the HTML architecture.
Thank you for your reply! I tried many variants of the css below, but unfortunately it didnât workâŚ
You somehow know whatâs wrong?
.is-desktop .Node.is-currentRoot > .Node-self.is-heading1 .node-line.mod-color-label-3 ~ .Node-children {
width: 10200px !important;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .Node-self.is-heading1 .node-line.mod-color-label-3 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .Node-self.is-heading1 .node-line.mod-color-label-3 ~ .Node-children > .Node-outer > .Node {
width: 500px;
margin: 10px;
}
.is-desktop .Node.is-currentRoot > .Node-self.is-heading1 .node-line.mod-color-label-3 {
max-width: 10000px !important;
}
Oh yes, I remember this now. Because the color-label property is assigned to .node-line, you canât affect .Node-children after selecting it because .Node-children is actually nested above .node-line, and CSS doesnât allow selection of parents based on their children. So unfortunately I donât think color label / tag column view is possible with CSS.
Ok, thank you alot, good to know!
I think there may be another wayâŚif you go to âInspect Itemâ when on the main node, you can see the HTML architectureâit should look like the picture above. Any of the properties on âNode-selfâ can be mapped via ~ to âNode-children,â but none of the ones below âNode-selfâ can.
Thank you for your suggestions, @Joshua_Reinier! I managed to make what I wanted using H1, Add checkbox and Check off variables (letâs name them like that). The below CCS make children of any bullet which have H1 and checkbox or check off or another combination of that variables to be arranged in 2/3/4/5 or 6 columns. Itâs configured for my display, so maybe if someone want to use it, they should modify the width of the columns. I use it in conjunction with AutoHotKey shortcuts (posted below). Also, be aware that I sacrificed the checkbox usability, but it remains the âcheck offâ to be used.
.is-heading1 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.is-heading1 ~ .Node-children > .Node-outer > .Node {
width: 172px;
}
/*============================================================================== */
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children > .Node-outer > .Node {
width: 344px;
}
.Node.has-checkbox.is-checked > .is-heading1 .Node-checkbox { display: none !important; }
.Node.has-checkbox.is-checked > .is-heading1 .Node-content,
.Node.has-checkbox.is-checked > .is-heading1 .Node-renderedContent,
.Node.has-checkbox.is-checked > .is-heading1 .Node-note,
.Node.has-checkbox.is-checked > .is-heading1 .Node-renderedNote {
color: white !important;
text-decoration: none !important;
}
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children .Node-content,
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children .Node-renderedContent,
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children .Node-note,
.Node.has-checkbox.is-checked > .is-heading1 ~ .Node-children .Node-renderedNote {
color: white !important;
}
/*============================================================================== */
.Node.has-checkbox > .is-heading1 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.Node.has-checkbox > .is-heading1 ~ .Node-children > .Node-outer > .Node {
width: 255px;
}
.Node.has-checkbox > .is-heading1 .Node-checkbox { display: none !important; }
.Node.has-checkbox > .is-heading1 .Node-content,
.Node.has-checkbox > .is-heading1 .Node-renderedContent,
.Node.has-checkbox > .is-heading1 .Node-note,
.Node.has-checkbox > .is-heading1 .Node-renderedNote {
color: white !important;
text-decoration: none !important;
}
.Node.has-checkbox > .is-heading1 ~ .Node-children .Node-content,
.Node.has-checkbox > .is-heading1 ~ .Node-children .Node-renderedContent,
.Node.has-checkbox > .is-heading1 ~ .Node-children .Node-note,
.Node.has-checkbox > .is-heading1 ~ .Node-children .Node-renderedNote {
color: white !important;
}
/*============================================================================== */
.Node.is-checked > .is-heading1 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.Node.is-checked > .is-heading1 ~ .Node-children > .Node-outer > .Node {
width: 207px;
}
.Node.is-checked > .is-heading1 .Node-content,
.Node.is-checked > .is-heading1 .Node-renderedContent,
.Node.is-checked > .is-heading1 .Node-note,
.Node.is-checked > .is-heading1 .Node-renderedNote {
color: white !important;
text-decoration: none !important;
}
.Node.is-checked > .is-heading1 ~ .Node-children .Node-content,
.Node.is-checked > .is-heading1 ~ .Node-children .Node-renderedContent,
.Node.is-checked > .is-heading1 ~ .Node-children .Node-note,
.Node.is-checked > .is-heading1 ~ .Node-children .Node-renderedNote {
color: white !important;
}
/*============================================================================== */
.Node.has-checkbox > .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.Node.has-checkbox > .Node-children > .Node-outer > .Node {
width: 512px;
}
.Node.has-checkbox > .Node-self .Node-checkbox { display: none !important; }
/*============================================================================== */
.is-mediumFont .Node-self.is-heading1 .Node-contentContainer {
font-size: 18px;
}
.is-mediumFont .Node-self.is-heading1 .node-line {
line-height: 22px;
min-height: 22px;
font-weight: 1;
}
.is-heading .Node-contentContainer {
text-shadow: 0 0 0px;
}
AutoHotKey script (! = alt, # = windows key, ^ = ctrl, + = shift)
!#6:: sendinput ^+h
!#3:: sendinput ^+h^+c^{enter}
!#4:: sendinput ^+h^+c
!#5:: sendinput ^+h^{enter}
!#2:: sendinput ^+c
Translation:
if node set to checkbox, then make it 2 children per line.
if h1 and checkbox and checked, 3 children per line.
if h1 and checkbox, 4.
if heading1 and checked, 5.
if h1, 6.
Itâs weird combinations youâve chosen, but clearly you could do this for any combination of checkbox, checked off, number-children, color, heading level by matching up the CSS.
I think color1-6 plus a thing might be simpler (no autoHotkey required), and if you take out the bullets this might be a cool table making scheme. Really, this CSS deserves its own post for adding something new to DynaList.
One more tip: if you use % instead of px you can make it independent of display width. There are a few measurement units that could be considered.
I made it as fast as I could, so indeed it can be polished. Itâs not working with color labels, see above comments. Iâm not sure about the number-children, but for my use case anyway would not be convenient, because I need numeration in any context.
I was thinking at the table scheme too. Maybe I will post it separately after my exams are over.
Thank you for the tip!
ASAP!! DUDE! I used your theme and now the right side toolbar is GONE! How do I get this back? or access it?
PS
Iâm using opera, when I insert the script the dynalist website keeps from loading and it gets stuck. I tried it 3x and all three the script caused the same problem. How can we solve this?
Is it buggy. The left sidebar keeps disappearing
Haha. That is on purpose. Everything disappears until your mouse is over it. Itâs intended to eliminate distractions while I write. See where it says left pane ease in and out 0.2 seconds on hover? Google âdistraction free writingâ, its a popular style of app.
If you want to delete the CSS, just bring your mouse to the top right corner and click the gear that will fade in to view.
Thanks, zo I can change the value from 0.2 to letâs say 1?
The issue is that the left sidebar will keep flashing (dissappearing and RE appearing) preventing me from being able to click on the pages or create a new page or folder
It shouldnât flash. Maybe you combined too many peopleâs CSS and they conflict.
I am so confused. The idea of columns for nodes sounds neat but I canât really decipher this post/screenshot. Can anyone make a simpler version?
I love this, but it has some issues that Iâm not sure how to resolve myself. Iâm curious if you or anyone else can.
If I hover over a sidebar, it reappears as it should. However, if I right click or try to drag a file or folder on the sidebar, then the sidebar will disappear again while the right click or drag actions are still ongoing. This is especially troublesome for dragging, because you need to see all the files.
Any ideas for ways to fix this?
Whose CSS are you referencing?
Sorry, I guess I used the reply feature incorrectly. I was referencing the first post in this thread which used this CSS to make sidebars invisible unless hovered over:
/* Hides all the sidebars and icons until you mouse over them, for max minimalism */
.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon
{
opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.AppHeader:hover,
.DocumentTools-icon:hover
{
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}