Post your current Custom CSS (with comments)!

George_Vasilache · June 9, 2021, 10:22am

Ok, thank you alot, good to know!

Joshua_Reinier · June 12, 2021, 2:10am

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.

George_Vasilache · June 17, 2021, 5:13pm

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

Alan · June 12, 2021, 5:18pm

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.

George_Vasilache · June 12, 2021, 5:44pm

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!

Sylvia · June 28, 2021, 6:51am

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?

Sylvia · June 28, 2021, 12:56am

BigChungus:

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

Is it buggy. The left sidebar keeps disappearing

BigChungus · June 28, 2021, 2:34am

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.

Sylvia · June 28, 2021, 6:53am

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

BigChungus · June 28, 2021, 7:56pm

It shouldn’t flash. Maybe you combined too many people’s CSS and they conflict.

Kenneth_Aar · July 2, 2021, 2:13pm

@Erica Any chance this columnbusiness could make it into regular Dynalist?

BigChungus · July 3, 2021, 6:01pm

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?

Ryan_Conti · July 14, 2022, 11:18pm

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?

Alan · July 16, 2022, 2:05am

Whose CSS are you referencing?

Ryan_Conti · August 16, 2022, 10:07pm

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

Sam_Radcliffe · January 19, 2023, 9:38pm

I never saw an answer to this. Anyone?

Alan · January 25, 2023, 2:34am

.Node-self.is-heading1 { font-size: whatever; }

Sam_Radcliffe · January 25, 2023, 2:39pm

I may have mis-interpreted the question by Joao. I differentiate “levels” and “headings”. “Levels” refers to the hierarchy of the outline:

level 1
- level 2
  - level3
    - etc.

“Headings” refers to the ability to apply heading1, heading2, or heading3 formatting to any node at any level.

My question: is it possible to differentially format levels?

Alan · January 25, 2023, 9:06pm

.Node.is-currentRoot .Node .Node .Node-bullet:before {
content: “◆”;
/* level2- diamond /
color: deepskyblue
}
.Node.is-currentRoot .Node .Node-bullet:before {
content: “■”;
/ level1- big square */
color: blue;
}

Sam_Radcliffe · February 9, 2023, 12:40pm

Thanks!