Post your current Custom CSS (with comments)!

šŸŒˆShare & Showcase
106

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

107

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

108

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?

109

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?

110

Whose CSS are you referencing?

111

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

I never saw an answer to this. Anyone?

113

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

114

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?

115

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

1 Like
117

Thanks!

118

i found that you can use images too! haha i had a lot of fun

image
image930Ɨ356 53.3 KB

1 Like
119

Hey, this is a cool thread! Iā€™ve been tweaking my Dynalist CSS for a while now, so hereā€™s what Iā€™ve been working on recently:

/* Custom Background for Better Readability */
body {
background-color: #f4f7f6;
}

/* Modify the Font Style for Titles */
#doc-title {
font-family: ā€˜Arialā€™, sans-serif;
font-size: 22px;
font-weight: bold;
color: #333;
}

/* Add some padding to the items to make them feel less cramped */
ul, ol {
padding-left: 20px;
}

/* Style the checked checkbox for better visibility */
input[type=ā€œcheckboxā€]:checked {
background-color: #4CAF50;
border-color: #4CAF50;
}

/* Darker color for the completed tasks so they are distinguishable */
li.done {
color: #888;
text-decoration: line-through;
}

/* Change the link color to a more subtle blue */
a {
color: #4A90E2;
}

a:hover {
color: #3c78d8;
}

Iā€™ve been focusing on readability mostly. The background color change has been great for reducing eye strain during long writing sessions. Also, making the checkboxes stand out a bit more and changing the color of completed tasks helps me stay organized.

Has anyone else tried something similar? Would love to see other peopleā€™s setups!