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 .
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.
Here is my CSS:
/ *Replace @@@Project tag with */
a[title=“Filter @@@Project”]::before {
visibility: visible;
content: “”;
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!
Tremendous. Thanks.
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; } }
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).
.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;
}
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?
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
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.
Thaks for sharing!
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
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.
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.