Post your current Custom CSS (with comments)!

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

I started a “Learn CSS” thread over here if anyone’s interested Dynalist Custom CSS for Dummies

3 Likes

See the full text of breadcrumbs when you hover your mouse, instead of the default truncated…

.DocumentBreadcrumb-item:hover {
overflow: visible;
overflow-wrap: break-word;
white-space: normal;
}
1 Like

Hi, I was wondering if someone could help a noob out? :slight_smile:

I want to change the color of the node-self.is-numbered to match that of the document background. I don’t know how?

I noticed that the built-in Dark theme still uses dark gray instead of black for most of the backgrounds. I prefer true black, and it’s more battery-efficient on OLED devices. So I fixed it.

From this:

to this:

Here’s the complete list of changes:

  • Changes most backgrounds to pure black
  • Changes most borders to light gray
  • Changes some backgrounds to dark gray, for contrast
  • Simplifies checkboxes a bit

CSS, with comments:

:root {
    --color-background: #000000;
    --color-background-light: #222222;
    --color-borders: #555555;
    --color-checkbox-inactive: #666666;
    --color-checkbox-active: #888888;
    --color-test: #0000ff;
  }



/* Main area */
.normal-view {
  background: var(--color-background);
}

/* Main area top border */
.main-container {
  background: var(--color-borders);
}



/* Left sidebar */
.Pane {
  background-color: var(--color-background) !important; 
}

/* Left sidebar risizing border */
.is-desktop .LeftPaneSplitter:after {
  border-right: 1px solid var(--color-borders);
}



/* Right sidebar (shortcuts) */
.ShortcutHelp {
  background-color: var(--color-background); 
}



/* Top bar */
.AppHeader {
    background-color: var(--color-background);
    border: 1px solid var(--color-borders);
}



/* Scrollbars */
::-webkit-scrollbar {
	background: var(--color-background-light);
}



/* "My files" bar */
.Pane-header {
  background: var(--color-background) !important; 
}



/* Currently selected list item */
.pane-item.DocumentItem.is-open > .pane-item-header {
  background-color: var(--color-background-light);
}



/* Checkboxes, unchecked */
.Node-checkbox:before {
	background: var(--color-background);
  border: 2px solid var(--color-checkbox-active);
}

/* Checkboxes, checked */
.Node.is-checked .Node-checkbox:before {
	background: var(--color-background);
  border: 2px solid var(--color-checkbox-inactive);
}



/* Search / view button area */
.DocumentTools-overlay {
  background: none;
	box-shadow: none;
}



/* Context menu */
.ContextMenu {
  background-color: var(--color-background-light);
}



/* Datepicker */
.popover, .datepicker {
    background: var(--color-background-light);
    border: 1px solid var(--color-borders);
}



/* Inline image links */
.node-inline-item {
  background-color: var(--color-background-light);
}
1 Like

node-self.is-numbered { background-color: 000000ff; }

The trailing ff sets transparency to 100%, such that the rest of the digits don’t matter.

1 Like

Hello ! Love your them but I’m only interested to change the color label as you do. What should I do to have this colored icon that you have made in from of the line. It’s very clear and esthetic :slight_smile:

1 Like

Glad to hear it! This should be the styling for just the labels:

:root {
    --transparent: rgba(0,0,0,0);
}

/* change color labels*/
/* red */
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
    background: var(--transparent) !important;
    border-radius: 0;
    padding-left: 6px !important;
    border-left: 5px solid #f20866;
    max-width: 70%;

}

/* orange */    
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2 {
    background: var(--transparent) !important;
    padding-left: 6px !important;
    border-left: 5px solid #f48c46;
    border-radius: 0;
    max-width: 70%;

}

/* yellow */  
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 {
    background: var(--transparent) !important;
    padding-left: 6px !important;
    border-left: 5px solid  #f9d851;
    border-radius: 0;
    max-width: 70%;

}

/* green */  
.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4 {
    background: var(--transparent) !important;
    padding-left: 6px !important;
    border-left: 5px solid #89f279;
    border-radius: 0;
    max-width: 70%;
}

/* blue */  
.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5 {
    background: var(--transparent) !important;
    padding-left: 6px !important;
    border-left: 5px solid  #75dce6;
    border-radius: 0;
    max-width: 70%;
}

/* purple */  
.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6 {
    background: var(--transparent) !important;
    padding-left: 6px !important;
    border-left: 5px solid #c073c1;
    border-radius: 0;
    max-width: 70%;
}

thank you so much !!

Here’s my minimalist, full-width dark theme.

FEATURES:

  • Text style: Cochin
  • True black background and off-white text
  • Larger text
  • Parent bullets look like WorkFlowy
  • Text takes up the full page (while preserving the option for narrow document layout)
  • Headings are smaller
  • and H2 is italic
  • Hide sidebars except on mouseover
  • Checkboxes take the place of bullets and are circles (and blue when checked)
  • Inline items are blue and have full text wrapping (also works in notes)
  • Dates are borderless and blue, future dates are darker
  • H3 gives column-style layout with sidescrolling when root node
  • Breadcrumbs are smaller and expand on mouseover
  • Root node text is smaller
  • Sub-bullet text is bigger
  • Notes text is not greyed out and bigger
  • Backlinks display right after bullets
  • Searches hide notes except on mouseover (also in backlinks)
  • CSS Code box is larger

Thanks to this forum—Bullets like WorkFlowy, Hide Opacity, and some other snippets were taken from people here.

Check it out at my Dynalist, https://dynalist.io/d/H282O62PaS1PvBAyO8KrgDPC, or the code here.

/* GENERAL */

 /*stops scrolling to the right, and fixes bottom margin - disable if using columns */
.is-desktop .DocumentContainer {
    max-height: 97% !important;
}

/* column view on wide layout, accomodates up to 10 columns */
.is-desktop .Node.is-currentRoot > .is-heading3 ~ .Node-children {
    width: 10200px !important;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .is-heading3 ~ .Node-children > .Node-outer {
    display: inline-block;
    vertical-align: top;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .is-heading3 ~ .Node-children > .Node-outer > .Node {
    width: 500px;
    margin: 10px;
}
.is-desktop .Node-isCurrentRoot > .is-heading3 {
    max-width: 10000px !important;
}

/* CHANGE FONT */

/* change to Cochin */
.node-line, .Node-note, .Node-renderedNote, node.inline-item, .DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter, .search-ui-container, .search-ui-searchbar, .search-ui-document-title {
    font-family: "Cochin";
}

/* change color of notes to off-white */
.Node-note, .Node-renderedNote {
    color: #DFDCDA;
}

/* inline items are blue and unbordered and wrap fully */
.node-inline-item {
    border: none;
    color: #82CFFF;
    background-color: transparent !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* RESIZING FONTS */

/* basic font and line size */
.node-line, .Node-note, .Node-renderedNote {
    font-size: 180%;
    line-height: 125% !important;
}

/* slightly more space between bullet and note */
.node-line {
    padding-bottom: 0.1em;
}

/* title font smaller and bold */
.Node.is-currentRoot > .Node-self > .node-line {
    font-size: 130%;
    font-weight: bold;
}

/* inline item text size and alignment */
.node-inline-item {
    font-size: 80% !important;
    line-height: 125% !important;
    vertical-align: middle;
    margin-bottom: 0.2em;
    padding: 0px;
}

/* make space for first-line note display */
.Node:not(.is-currentRoot) > .Node-self.is-showingNoteFirstLine:not(.is-noteEmpty) .Node-renderedNote {
    height: 1.25em !important;
}

/* breadcrumb text size smaller */
.DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter {
    font-size: 100%;
}

/* SMALLER HEADINGS */
.Node-self.is-heading1 .Node-content, .Node-self.is-heading1 .Node-renderedContent {
    font-size: 150% !important; /* is 26px vs 20px */
    font-weight: bold;
}

.Node-self.is-heading2 .Node-content, .Node-self.is-heading2 .Node-renderedContent {
    font-size: 150% !important; /* is 24px vs 20px */
    font-style: italic !important;
    font-weight: 100 !important;
}

.Node-self.is-heading3 .Node-content, .Node-self.is-heading3 .Node-renderedContent {
    font-size: 165% !important; /* is 22px vs 20px */
    color: blue !important;
    font-weight: bold !important;
}

/* COLOR LABELS */

.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 {
    background: gold !important;
    color: #fdfdfd !important;
}

.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
    background: #a11b1b !important;
    color: #fdfdfd !important;
}

/* FIXING VERTICAL PLACEMENTS */

/* checkbox height and alignment */
.is-desktop .Node.has-checkbox > .Node-self > .Node-checkbox { margin-top: 0.8em; }
.is-desktop .Node.has-checkbox > .is-heading1   > .Node-checkbox { margin-top: 1.5em; }

/* backlink counter vertical placement */
.is-desktop .node-backlink-counter { margin-top: 1em; }
.is-desktop .is-heading1 .node-backlink-counter { margin-top: 1.7em; }

/* plus sign vertical placement (margin top) */
.is-desktop .node-icon { margin-top: 1.4em; }
.is-desktop .is-heading1 .node-icon { margin-top: 2.6em; }

/* bullet placement */
.is-desktop .Node-bullet { margin-top: .5em; }
.is-desktop .is-heading1 .Node-bullet { margin-top: 1em; }

/* MOBILE */

/*line height on mobile */
.is-mobile .node-line, .is-mobile node.inline-item, .is-mobile .is-largeFont .Node-note, .is-mobile .is-largeFont .Node-renderedNote {
    line-height: 125% !important;
}

/* title font mobile */
.is-mobile .node-line {
    font-size: 125%;
}

/* note font mobile */
.is-mobile .Node-note, .is-mobile .Node-renderedNote {
    font-size: 150%;
}

/*stops scrolling to the right - MOBILE */
.is-mobile .DocumentContainer {
    overflow-x: hidden;
    max-width: 100%;
}

/* ENLARGE CSS CODE BOX */

/*change size of custom CSS input box in settings */
.js-update-setting.setting-text-field[data-key="custom_css"] { height:25em; }

/* make it wider */
.setting-left { width: 25%; }
.setting-right { width: 75%; }

/* BULLETS LIKE WORKFLOWY */

.is-desktop .Node-self.is-collapsed.is-parent > .Node-bullet:before {
    content: "\e90d"; 
    border-radius: 50%; 
    background-color: rgba(43,45,47,255);
    color: rgba(168,160,149,255);
}
.is-desktop .AppContainer.is-using-bullet-to-zoom .Node-bullet:before {
    background-color: transparent;     
    color: rgba(168,160,149,255);
}

/* on mobile */
.is-mobile .Node-self.is-collapsed.is-parent > .Node-bullet:before {
    content: "\e90d"; 
    border-radius: 50%; 
    background-color: rgba(43,45,47,255);
    color: rgba(168,160,149,255);
}
.is-mobile .AppContainer.is-using-bullet-to-zoom .Node-bullet:before {
    background-color: transparent;     
    color: rgba(168,160,149,255);
}

/* Hover colours */
.is-desktop .AppContainer.is-using-bullet-to-zoom .Node-bullet:hover:before {
    background-color: #aaa;
}
.is-desktop .Node-self.is-collapsed.is-parent > .Node-bullet:hover:before {
    content: "\e90d";
    background-color: #aaa;
}
.is-desktop .Node-self.is-collapsed > .Node-bullet:hover:before {
    content: "\e90a";
    background-color: #aaa;
}

/* Size of bullet */
.Node-bullet:before {
    font-size: 18.5px;
}

/* CHECKBOXES */

/* don't render bullet if checkbox exists */
.Node-outer > .Node.has-checkbox >
.Node-self > .Node-bullet {
    display: none;
}

/* keep notes from pushing over */
.Node.has-checkbox > .Node-self .Node-renderedNote, .Node.has-checkbox > .Node-self .Node-note {
    margin-left: -20px;
}

/* checkbox alignment left/right */
.Node.has-checkbox > .Node-self > .Node-checkbox {
    display: inline-block;
    vertical-align: top;
    margin-left: 3px;
    margin-right: 3px;
}

/* checkboxes are transparent and circular */
.Node-checkbox:before {
    border: 1px solid #636363;
    background: transparent;
    opacity: 1;
    border-radius: 30px; 
}

/* when checked it turns blue */
.Node.is-checked .Node-checkbox:before {
    border: 1px #529cca !important;
    background: #529cca !important;
}

/* DATE STYLE */

/* dates in future are dark blue and show full text */
.Node-contentContainer .node-time, .Node-noteContainer .node-time {
    font-style: normal;
    font-weight: bold;
    font-size: 90% !important;
    vertical-align: top;
    margin-top: 0.1em;
    color: #498AB3;
}

/*remove calendar icon from date icons*/
.node-time:before, .node-time.is-overdue:before { content: none; }

/* overdue dates are light blue */
.node-time.is-overdue {
    color: #82CFFF !important;
}

/* LINK STYLE */

/* Don't show icon for Dynalist links. */
.node-link-internal.is-displayed:before { 
    content: none; 
}

/* SEARCH BACKLINKS BREADCRUMBS APPEARANCE */

/* breadcrumbs are longer and colored */
.DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter {
    cursor: default;
    color: #DFDCDA;
}

/* max width desktop */
.is-desktop .DocumentBreadcrumb-item, .is-desktop .DocumentBreadcrumb-delimiter, .is-desktop .flat-search-breadcrumb-item, .is-desktop .flat-search-breadcrumb-delimiter { max-width: 33%; }

/* max width mobile */
.is-mobile .DocumentBreadcrumb-item, .is-mobile .DocumentBreadcrumb-delimiter, .is-mobile .flat-search-breadcrumb-item, .is-mobile .flat-search-breadcrumb-delimiter { max-width: 40%; }

/* Breadcrumb shows full name on hover */
.DocumentBreadcrumb-item:hover, .flat-search-breadcrumb-item:hover { 
    overflow: visible; 
    overflow-wrap: break-word; 
    white-space: normal;
}

/* no header in search */
.search-ui-header, .search-ui-document-title-note {
    display: none;
}

/* full width searchUI searchbar */
.is-desktop .search-ui-searchbar {
    width: 40%;
}

.is-desktop .document-backlinks-container {
    margin: 0 0 0 -15px !important;
}

/* search container is full width */
.is-desktop .search-ui-container {
    padding: 5px 10px;
}

/* keep note lines in search */
.search-ui-container .node-line, .search-ui-container .Node-renderedNote {
    font-size: 125% !important;
}

/* no notes in search */
.search-ui-container .Node-noteContainer, .is-searching ~ .Document-rootNode .Node-noteContainer, .document-backlinks-container .Node-noteContainer {
    display: none;
}

/* show notes on hover */
.search-ui-container .Node-self:not(.is-noteEmpty):hover .Node-noteContainer,  .is-searching ~ .Document-rootNode .Node-self:not(.is-noteEmpty):hover .Node-noteContainer, .document-backlinks-container .Node-self:not(.is-noteEmpty):hover .Node-noteContainer {
    display: inline-block !important;
}

/* wider left margin on search */
.is-searching 

/* nodes are closer together */
.search-ui-container .Node-self {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* bullet placement */
.is-desktop .search-ui-container .Node-bullet {
    margin-top: 0em;
}

/* no plus signs for backlinks */
.document-backlinks-container .node-hover, .search-ui-container .node-hover {
    display: none;
}

/* no pointer if you mouse over a breadcrumb which has a link */
.is-desktop .flat-search-breadcrumb-item .node-inline-item {
    cursor: default;
}

/* hide "referenced in" text */
.document-backlinks-container .search-ui-summary {
    display: none;
}

/* no margins for backlinks */
.is-desktop .document-backlinks-container {
    margin: 0px 45px; 
}

/* no blue hover when you mouse over backlinks */
.document-backlinks-container .Node.has-hover, .search-ui-container .Node.has-hover {
   background-color: transparent;
}

/* keep pointer on hover */
.document-backlinks-container .Node {
   cursor: pointer !important;
}

/* HIDE MOD MENUS AND HOVERS */

/* Hide the mod menu hover */
.is-desktop .node-icon.mod-menu { 
    display: none; 
}

/* node icon appearance (+/- sign) */
.node-icon {
    font-family: "IcoMoon", sans-serif !important;
    font-size: 100% !important;
}

/* hiding backlink counter on root node */
.Node.is-currentRoot > .Node-self > .node-hover, .Node.is-currentRoot > .Node-self > .node-backlink-counter {
    display: none;
}

/* WIDTH */


/* fixes node width */
.Node-self {
    width: 100%;
    padding-left: 0;
    margin-left: 0;
}

/* removes bottom space before backlinks */
.Document-bottomSpace {
    min-height: 0px;
}

/* remove left and right margins */
.is-desktop .DocumentContainer:not(.is-centerDocument) .Document-rootNode, .is-desktop .DocumentBreadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* document width adjusted so it doesn't spill over */
.is-desktop .DocumentContainer:not(.is-centerDocument) .Document {
    padding 0 !important:
    margin: 0 0 0 0 !important;
    width: calc(100% - 5px) !important;
}

.is-desktop .DocumentContainer:not(.is-centerDocument) {
    padding-left: 17px;
    padding-right: 5px;
}

/* allows for narrow document layout */
.is-desktop .DocumentContainer.is-centerDocument .Document, .is-desktop .DocumentContainer.is-centerDocument .DocumentBreadcrumb {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* BACKGROUNDS */

/* black search tools background */
.DocumentTools-overlay {
background: transparent;
box-shadow: 0 0 3px 3px transparent;
}

/* black search backgrounds */
.AppContainer, .DocumentSearch, .search-ui-container, .search-ui-searchbar, .search-ui-sort-options, .search-ui-document-title, .search-ui-document-title-icon {
    background: #000000;
}

/* HIDE OPACITY */

.leftPaneContainer, .leftPaneContainer-nav, .leftPaneContainer-panes, .TagPane-tags, .FilePane-files, .BookmarkPane-bookmarks, .Pane-header  {
   background-color: #000000 !important;
}

.LeftPaneSlidebarContainer.is-closed {
    display: none;
    width: 0px;
}

/* hides sidebars' opacity when not moused */
.LeftPaneContainer-nav,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon,
.status-bar
 {
    opacity: 0;
}


/* show sidebar opacities on hover */
.AppHeader:hover, .LeftPaneContainer,
.DocumentTools-icon:hover,
.status-bar:hover, .LeftPaneContainer-panes
{
    opacity: 1 !important;
    -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;
    background: #000000 !important;
}
2 Likes

Hi guys. Is it possible to make visible both of bookmarks and files panels at the same time?

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)

1 Like

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.

1 Like