Post your current Custom CSS (with comments)!

I really like the idea with the filled and empty bullets! This has to be the most extensive custom css posted here yet.

For me checklists get intended a little bit to the left. Is that by design?

image

Thanks Philipp!

In short: no, unfortunately, it isn’t. It’s something that just happens. ( I too, don’t like it and am trying to fix it).

It is strange though: in your screen shot, it only happens on the first parent. I’ll investigate!

1 Like

With these you can add #q or #h to the end of an image url to display the image at quarter or half size. I think it’s a nice hack since the markdown syntax doesn’t work.

.node-displayed-image[src$="#h"]
 { 
    max-width: 50%;
    max-height: 50%; 
 }
.node-displayed-image[src$="#q"]
 { 
    max-width: 25%;
    max-height: 25%; 
 }
11 Likes

That’s smart!

1 Like

WHOA. Dude! That’s awesome!

1 Like

Amazing work! Dynalist gained new freshness! Thank you @Napier. I’m curious though how do you use tags that are defined in the stylesheet ("@read", “@time”, “@est”, “@waiting”, “@inProgress”, “@dnf”, “#:money_with_wings:”, “#:star:”, “#:fire:”, “#5/5”, “#4/5”, “#3/5”, “#2/5”, “#1/5”, “#?/5” ) from you workflow perspective? Could you share you approach?
Thanks a million

Thank you! Glad others are finding it useful.

Here’s an example of my inbox this morning for reference:

I’ve concocted a sort of digital bullet-journal-esque system (tried using an actual notebook for this several years back, but it took too much time to upkeep and the information didn’t feel accessible or organized enough).

There are a few sentences worth of ‘action plan’ at the top (not pictured) where I write out observations of what I need to focus on from my previous monthly review.
Most tasks are grouped into ‘focus’, ‘next’ and ‘later’ categories (‘later’ normally lives with the other two, temporarily collapsed to make things a bit more manageable for myself during a busy time). Any recurring/scheduled tasks go in the ‘future log’ (except daily recurring, which go in focus, though I’ve found it’s better to have most of those daily tasks in the habit tracker I keep in my spreadsheet timelog, so I have them as an overview of the month).

For larger tasks I keep devlogs and/or a burn-list in the task itself:

I’ve found this sort of system gives me an intuitive way to have everything in one place and go from overview to a more focused task view very quickly.

Labels are arranged as such:


Fun side-effect of the rainbow colour scheme was that the ordering can change and still be in order. E.g. tasks could be listed as ‘1, 4, 5, 6’ or ‘5, 6, 1, 4’ and still be in nice rainbow order.

And the special tags I’m using are:


Normal #tag tags are being used for genres/areas of work, essentially.
The emoji tags are still evolving, and vary from use case to use case. Primarily I use them to tag things in my dev tasklists (bugs, may or may not be working and need stesting, refactor, core feature, etc.). The lil’ money tag is for commissions. :'D
@est0H and @time0H are for time tracking, @est for my estimate of what it will take and @time for actual hours spent. I timetrack in a spreadsheet for an overview, however I found that trying to track there in more detail was annoying. I suppose I’m tracking ‘my’ time in the spreadsheet and ‘task’ time here.
@dropped and @inProgress were for media lists (see below). @waiting is for tasks when the task is paused while I’m waiting for someone/something else. Also using @inProgress for aforementioned dev tasklists.
The ratings at the bottom were for my media lists (books, movies, etc.), however I recently moved those out to Goodreads and Trakt.

When a task is complete I move it to an archive list (not sure how useful this actually is, but meh).

tl;dr The whole point of all of this was to create a colour-coded, single-page task management system. This design just so happens to tickle my brain. Your mileage may vary.
I think the most important takeaway is that the ability to customize dynalist tags/labels with CSS means you can basically design your own systems inside dynalist.

Hopefully that answers your question. xD

5 Likes

Thanks for sharing this. I’m curious what your “burn-list” represents. A quick Google brought up some dubious uses of the term. :face_with_raised_eyebrow:

Amazing, very thoughtful explanation, Thanks :beers:

1 Like

Task-list, to-do list, burn-list… the mental imagery of ‘tasks burning that need to be finished before they burn out’ was amusing to me.

Very welcome!

I’m trying to automatically generate header styles for the top two levels, i.e., something like:
1st level: font-size: xx-large
2nd level: font-size: large

Can someone help me on how to specify the CSS selectors?

Joao_Antunes’s question got me thinking. Is there a tutorial on how to use custom CSS for Dynalist? Either on the Dynalist site or made by one of us users? I know there are general CSS tutorials on the web and I’ve read through many of those, but I would like to know how to specifically modify things in Dynalist.

It would be great to have a list of the different nodes/selectors/options (I’m not sure what to call them, I’m not a coder!) specific to Dynalist with an explanation of how to modify them. That way I could easily look up how to modify the first level font size or how to put boxes around nodes.

Has anyone put together a collection of custom CSS configurations? Beyond searching through the forum, I haven’t seen a place we can find examples of how to modify different parts of Dynalist. I’ve started to copy and paste all the examples into my Dynalist just for future reference. It isn’t really organized in any way, but I guess I could share the document if people were interested.

3 Likes

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.

4 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:

3 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; } }
2 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;
}
1 Like