Post your current Custom CSS (with comments)!

Please do. I have done the same maybe we can collaborate on it.

I think you can inspect an element in Chrome to see what it is called and thereby see the element you must write the css for .

Here is the link to the CSS code examples I have been saving: Dynalist CSS Examples

I hope it is helpful. As I said, it doesn’t have any order to it but perhaps I’ll do that sometime. (The librarian in me says I really need to organize everything!) I have not attributed where I got the various bits of code. If someone wants their contribution recognized, please let me know. I will give a big thanks to everyone who has shared their knowledge of CSS and code examples. I have learned a lot from what you all have posted.

Kenneth_Aar: I do know about the inspect element panel in Chrome and I do use it. I’ve learned quite a bit poking around there but it can be hard to find the exact element your looking for unless you know what it is and it takes a lot of time. Having a tutorial (as well as examples) would make things much easier.

5 Likes

Here is my CSS:

/ *Replace @@@Project tag with :construction: */
a[title=“Filter @@@Project”]::before {
visibility: visible;
content: “:construction:”;
font-size: 18px !important;
background-color: none
!important;
color: white !important;
font-weight: normal;
text-decoration: none;
filter: grayscale(100%);
}
a[title=“Filter @@@Project”] {
visibility: hidden;
font-size: 0%;
}

Woah, that looks really useful for someone who’s looking to start tinkering with CSS! :slight_smile:

5 Likes

Tremendous. Thanks. :slight_smile:

Here’s some custom CSS that prevents the backlink counters from showing up when printing a document:

/* Don't print backlink counters. */
@media print { .node-backlink-counter { display: none; } }
3 Likes

The most minimalistic theme I use on Dynalist - so I share for those who might need.
Here the CSS I use in Dynalist - just make it look so clean and focus for writing. I use Stylus for CSS so that I can open and turn of so that in some case I will need the setting (it’s hidden when turn on CSS). And here the screenshot and code (messy but hope it help).

  • You can completely show or hide the notes with the setting - no icon for “hide notes”
  • Hide a lot of distractions such as left hand bar (you can open them on the top corner left - just hover there), setting icon, notification icon and more, you can try the theme, I feel really like writing when turn it on.
  • I don’t use the “+” icon a lot, so I remove it to focus on writing the content and use the shortcuts, if I want to collapse or open I can right click the node - not regularly so I choose that option.
  • just notes with chilren being hide under will show the blue dots to show there are contents in this node.
  • change of title, header and breadcrumb for better look (personally)
  • and something more I can’t remember, you can try and adjust


.is-desktop .LeftPaneSlidebarContainer {
    box-shadow: none;
}

.is-desktop .main-container {
    margin-top: -32px;
}

.DocumentTools-overlay {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

.is-compactDensity.is-article-view .Node-self {
    padding-top: 5px;
    padding-bottom: 5px;
}

.is-desktop .main-container {
    margin-top: -32px;
}

.is-desktop .DocumentTools {
    margin-top: 32px;
}

.DocumentTools-overlay {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}







.is-desktop .AppHeader {
    height: 32px;
    visibility: hidden;
}

.mindmap-topbar {
    display: flex;
    z-index: 2;
    cursor: default;
    position: fixed;
    right: 2px;
    top: -20px;
    width: 100%;
}

.node-inline-item, .node-link, .node-tag {
    cursor: pointer;
    outline: none;
    position: initial;
    z-index: 2;
}

.normal-view {
    height: 100%;
    /* position: absolute; */
    top: -28px;
    width: 100%;
}

.Node-openNote {
    display: none;
}

.Node-self:hover .node-menu-icons-container {
    display:inline;
}

.Node.is-currentRoot > .Node-self .node-icon.mod-bookmark {
    display: none;
}


.Node-children {
    padding-left: 2px;
    margin-left: 28px;
    border-left-style: dashed;
}
.is-mediumFont .Node-self.is-heading3 .node-line {
    font-size: 18px;
}

.Node.is-checklist .Node-checkbox {
    display: none;
}

.Node-self.is-heading .Node-content, .Node-self.is-heading .Node-renderedContent {
    font-weight: bold;
    padding-left: 1px !important;
    padding-right: 5px !important;
    margin-left: -5px;
    border-left: solid #fff0;
    max-width: 90%;
    border-radius: 0px;
    width: fit-content;
    text-decoration: overline;
    text-decoration-color: #7a7a7a !important;
    color: #000000f2;
    background-color: #008aff47;
    font-size: 16.8px !important;
    letter-spacing: 1px;
}
.Pane {
    font-size: 18px;
}

.Node-note, .Node-renderedNote {
    color: #4e4e4e;
    font-size: 15px !important;
}
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
    background: #ff300038 !important;
    padding-left: 1px !important;
    margin-left: -1px;
    border-left: solid #fff0;
    border-radius: 0;
    width:  fit-content !important;
}

.CurrentLineHighlight {
    background-color: #02b4d726; 
    mix-blend-mode: color;
}
#77d70270

::selection {
    background: #33bad975;
}
#90f16b

::-webkit-scrollbar {
    display: none;
}


a[href^="https://dynalist.io/d/Jn4VL7Y9Ax92QFTpLCRemWVk#z=U6J4HEPG6fH_vwESSGbux-Rg"] {
 	color:#1bb01b;
}

.Node-self.is-numbered > .Node-bullet:after {
    background-color: #fff0;
}


.Node-self {
    width: calc(100% + 100px);
    transition: margin-bottom 200ms ease-in-out;
    padding-top: 2px;
    padding-bottom: -0px;
}

.node-tag, .Node-contentContainer.has-color .node-tag {
    color: #000 !important;
    text-decoration: none;
}

body {
    color: #000;
}

.is-mediumFont .Node-noteContainer .node-inline-item, .is-mediumFont .Node-noteContainer .node-inline-code, .is-mediumFont .Node-noteContainer .node-multiline-code {
    font-size: 15px;
    line-height: 20px;
}

.node-inline-item, .AppContainer.is-highlighting-overdue .Node.is-checked .node-time.is-overdue {
    background-color: rgba(0, 0, 0, 0.01);
    border: 0px solid #ccc;
}

.DocumentTools-icon {
    margin-top: 10px;
}

.Node.is-currentRoot > .Node-self .node-line, .Node.is-currentRoot > .Node-self.is-heading .node-line, .Node.is-currentRoot > .Node-self .node-line-strict, .Node.is-currentRoot > .Node-self.is-heading .node-line-strict {
    font-size: 30px !important;
    font-weight: bold;
}


.Node.is-selected {
    background-color: #abe7f1;
}

#a6db66
.Node-bullet:before {
    color: #fff0;
}

.DocumentBreadcrumb-item {
    max-width: 350px;
    font-size: 19px;
    font-weight: bold;
    color: #1b1b1ba6;
}

.node-link-internal.is-displayed {
    max-width: 95%;
}
.node-time, .node-link-internal.is-displayed {
    white-space: unset;
}

.Node-bullet:before {
    /* color: #c1b5b5ed !important; */
}

.Node-self.is-collapsed.is-parent > .Node-bullet:before {
    content: "\e90c";
    color: #a1d4ff;
}

.is-desktop .Document-rootNode {
    padding: 0 0px;
}
.LinkSuggestions {
    max-width: 400px;
}
.Suggestions {
    min-width: 100px;
}

.DocumentBreadcrumb {
    padding: 40px 0 0 0px;
}

.Node-self.is-numbered > .Node-bullet:after {
    counter-increment: node;
    content: counter(node) !important;
}
.Node-self.is-numbered > .Node-bullet:after {
    background-color: rgba(7, 133, 223, .25);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    color: #1988e6;
    width: 29px;
    height: 29px;
    font-size: 16px;
}
.Node-self.is-numbered.is-parent.is-collapsed > .Node-bullet:after {
        border:2px solid rgba(34, 25, 28, .18);

    background-color: #0b86ddb5;
    color:#ffffffe6;
}


.AppHeader {
    user-select: none;
    height: 56px;
    position: initial;
    z-index: 101;
}


.Node-checkbox:before {
    background: #9990;
    border: 0.11rem solid #999;
}

.Node-checkbox:before {
    width: 16px;
    height: 16px;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    content: '';
    border-radius: 1px;
    z-index: 1;
}

.pane-item-header {
    text-indent: -0px;
}
.pane-item-icon {
    display: none;
}

.pane-item-header {
    cursor: pointer;
    display: inline-block;
    transition: background-color 100ms;
    min-width: 100%;
    padding: 4px 5px 4px 20px;
}




/* mấy cái icon tệp với bookmark */
.is-desktop .LeftPaneContainer-panes {
background:#fff0 !important;
}
.is-desktop .LeftPaneContainer-nav {
    background: #fff0;
        margin-left:-5px !important;
}
.is-desktop .LeftPaneContainer-navItem {
    color: #84848400;
    background:#fff0;
}





.Node-bullet:before {
    color: rgb(255, 255, 255);
}


.DocumentBreadcrumb-delimiter {
    margin:0px;
    visibility:hidden;
}

.node-icon:before {
    visibility: hidden;
}

.Node.is-checked > .Node-self .Node-content,
.Node.is-checked > .Node-self .Node-renderedContent {
  text-decoration: none;
}

.Node.is-checked > .Node-self > .Node-checkbox {
}
.Node-checkbox {
    margin-left: 0px;
}
.Node-checkbox:before {
    border: 0.01rem solid #9999;
}
.Node-checkbox:after {
    border-color: #abababad;
}

.pane-item {
    margin-left: -5px;
}
.Pane-content {
    margin-left: -15px;
}
.pane-item.DocumentItem.is-open > .pane-item-header {
    background-color: #ebebeb2e;
}
.Node-note, .Node-renderedNote {
    color: #4e4e4ed6;
    font-size: 18px;
    font-style: italic;
}
2 Likes

I just went through this post and combined some stuff useful to me, use it in the deafult dark theme.
2 Likes

Nice. I like this template. Thanks.

got rid of all the animations to make it feel snappier

/* disable all node animations */
.Node {
transition: none !important;
}

/* always hide crossed out nodes rather than animating their crossout for a second*/
.Node.is-checked {
display: none;
}

focus mode (everything is faded except the node you are editing)

.Node-self.is-contentRendered {
color: #555555;
}

Anybody know how to make the active line darker?

image

4 is active. I want a darker gray background. I can’t find the item that makes that background.

Inspect Element it, and then click it, and then a different node,back and forth, to see what div class shows up and goes away. I see is-contentRendered disappears. So maybe it’s the only .Node class that’s not a is-contentRendered class.

.Node:not(.is-contentRendered)

And then with it selected look in styles for the color or something that might mean background
image

So lets try

.Node:not(.is-contentRendered){
background:#ffffff
}

yikes, that did NOT work

oh, the node was Node-self not Node lets try

.Node-self:not(.is-contentRendered){
    background:#ffffff;
}

that’s pretty close. background color is shifted weird tho.

I give up. Let us know if you figure it out.

Found it!
.CurrentLineHighlight {
background: rgba(0, 0, 150, 0.3);
}

Still working on the color.

1 Like

Thaks for sharing! :ok_hand:

1 Like

Here’s a sort of post-it-note style

.Node-contentContainer{
    border: 1px solid;
    border-color: black;
    padding: 15px 25px;
    border-radius: 8px;
    position: relative;
    max-width: 350px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #333333
}

Not sure if already posted but…

Here’s how to use any font

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');

.Node{
font-family: 'Comic Neue', cursive;
}

You can get the codes on fonts.google.com

1 Like

Recently, I have found that you can use gradients instead of colors. Here are my gradients (but you can do other wild things with them):

The code:

.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 { 
background: linear-gradient(145deg, rgba(250,146,168,1) 0%, rgba(254,229,185,1) 100%);}

.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2 { 
background: linear-gradient(145deg, rgba(255,215,99,1) 0%, rgba(254,246,185,1) 100%);}

.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 { 
background: linear-gradient(145deg, rgba(242,255,126,1) 0%, rgba(253,255,199,1) 100%);}

.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4 { 
background: linear-gradient(145deg, rgba(144,238,144,1) 0%, rgba(211,254,185,1) 100%);}

.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5 { 
background: linear-gradient(145deg, rgba(126,218,255,1) 0%, rgba(199,255,245,1) 100%);}

.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6 { 
background: linear-gradient(145deg, rgba(205,183,255,1) 0%, rgba(255,199,247,1) 100%);}

You can create your own gradients there: https://cssgradient.io/
The service will generate the code which you can copy and paste in your CSS.

9 Likes

Custom CSS per device (as long as each device uses a different browser width in pixels)

/* dont run if browser 600px wide */
@media screen and (max-width: 598px) and (min-width: 0px), (min-width: 602px) {

}

For a tall-narrow placement on your screen.

Remove the left and right margins (dead space), and put the hover icons on the right. To make this functional (because the icons may be far from the text), also setting the line background to a pale green. If the line is long, text will wrap to avoid the icons when they appear.

  • /* Float Right */
    • .node-hover { float: right; }
    • .node-backlink-counter { float: right; }
    • .is-desktop .Document-rootNode {
      • padding: 0;
      • }
    • .Node-self.is-hovering .Node-renderedContent {
      • padding: 0 100px 0 0;
      • background : rgba(0,150,0, 0.1);
      • }

1 Like