Custom CSS (Pro feature)

📣Announcements
1

You can find the custom CSS setting under the “Dynalist Pro” tab in settings.

We recommending creating a CSS file on your computer to compile and edit the CSS. Then you can replace the CSS each time.

Place to find CSS inspiration: https://userstyles.org/styles/browse?search_terms=dynalist

Please update your mobile app to 1.2.7+ and your desktop to 1.1.7+ in order for the custom CSS to be applied to all platforms.

P.S. When copying styles from user style, please delete the @-moz-document url-prefix("https://dynalist.io/d/") { part (there’s also a trailing } at the end of the code).

8 Likes
2

Hi Erica,

Sorry i can’t get it worked tried some from user styles CSS must i stripped something from the code, please share or give an simple example CSS, so i can checked it out, on macOS, Web and iOS

Thanx

3

This was the CSS Code i tried

/* i really want this to be global */
.is-currentRoot > .Node-children > .Node-childrenInner:hover > .Node-outer
{
opacity: .2;
transition: 1.5s;
}

.is-currentRoot > .Node-children > .Node-childrenInner > .Node-outer:hover
{
opacity: 1;
}

4

Looks like that underneath CSS Code works this will be start for me to tailor-made this for my needs

/*
Edgeryders Dynalist Userstyle, Version 1.4 (2018-03-06)

Licence: Creative Common Public Domain Dedication (CC0)
Code repository: https://github.com/edgeryders/dynalist-userstyle
Documentation: https://edgeryders.eu/t/7618
*/

/* checked items appearance */
.Node.is-checked .node-link,
.Node.is-checked .node-tag,
.Node.is-checked .node-time,
.Node.is-checked .Node-content,
.Node.is-checked .Node-renderedContent,
.Node.is-checked {
color: #a9a9a9;
text-decoration: none !important;
font-style: oblique !important;
}

/* checked items #completed tag (auto-added) */
.Node.is-checked .Node-content:before,
.Node.is-checked .Node-renderedContent:before {
content: ‘#completed’;
background: #8d929b;
color: white;
font-weight: bold;
font-style: normal !important;
}

/* #username tags for task assignments /
.node-tag[title=“Filter #”] {
background-color: #e5e5e0!important;
color: #51514f !important;
font-weight: bold;
}

/* #important tag */
.node-tag[title~="#important"] {
background: red !important;
color: white !important;
font-weight: bold !important;
text-decoration: none !important;
}

/* #permanent tag */
.node-tag[title~="#permanent"] {
background: green !important;
color: white !important;
text-decoration: none !important;
}

/* #blocked tag */
.node-tag[title~="#blocked"] {
background: black !important;
color: white !important;
text-decoration: none !important;
}

/* #discarded tag*/
.node-tag[title~="#discarded"] {
background: #f6ff00 !important;
color: black !important;
text-decoration: none !important;
}

/* #by-username tags for task authorship /
.node-tag[title="#by-"] {
background-color: #f4f4f4 !important;
color: #646464 !important;
font-weight: normal !important;
}

/* @username tags for mentions /
.node-tag[title=“Filter @”] {
/* Formatting done just as in Discourse. /
background-color: #f4f4f4 !important;
color: #646464 !important;
font-weight: bold;
text-decoration: none !important;
}
.Node-contentContainer .node-tag[title=“Filter @”] {
/* As in Discourse, but only applied to normal items. Font would become too small in notes. */
font-size: 0.93em;
}

/* item bulletpoints */
.Node-bullet:before {
color: #4CB9FF;
}

/* hyperlinks /
.node-link {
/ Formatting done just as in Discourse. */
word-wrap: break-word !important;
color: #08c !important;
text-decoration: none !important;
cursor: pointer !important;
background: transparent !important;
}

/* hyperlinks on the empty page before opening any document */
#blank-slate div ul li a {
text-decoration: none;
}

/* #tags and @tags mouse-over highlighting */
.node-tag:hover {
background-color: #363636 !important;
color: white !important;
}

/* code /
.node-inline-code {
/ Formatting done just as in Discourse. */
color: #333;
background-color: #f8f8f8;
font-family: monospace;
font-size: 1em;
}

/* Additional spacing between lists */
.Node-self.is-noteEmpty .Node-content,
.Node-self.is-noteEmpty .Node-renderedContent,
.Node-note,
.Node-renderedNote {
padding-bottom: 3px;
}

/* Fix the redo button position in the mobile version. /
/ (Not that useful, as the only option to use it is mobile Firefox with the Stylus extension, and it’s really slow.) */
.MobileHeader-optionContainer .MobileHeader-option–undo {
right: 175px;
}

/* Distinctive Headings small */
.is-smallFont .Node-self.is-heading1 .Node-contentContainer {
font-size: 32px;
color: #825ce8;
}

.is-smallFont .Node-self.is-heading2 .Node-contentContainer {
font-size: 22px;
color: #0d8bdc;
}

.is-smallFont .Node-self.is-heading3 .Node-contentContainer {
font-size: 16px;
color: #40e618;
}

/* Distinctive Headings medium */
.is-mediumFont .Node-self.is-heading1 .Node-contentContainer {
font-size: 32px;
color: #825ce8;
}

.is-mediumFont .Node-self.is-heading2 .Node-contentContainer {
font-size: 22px;
color: #0d8bdc;
}

.is-mediumFont .Node-self.is-heading3 .Node-contentContainer {
font-size: 16px;
color: #40e618;
}

/* Distinctive Headings large */
.is-largeFont .Node-self.is-heading1 .Node-contentContainer {
font-size: 32px;
color: #825ce8;
}

.is-largeFont .Node-self.is-heading2 .Node-contentContainer {
font-size: 22px;
color: #0d8bdc;
}

.is-largeFont .Node-self.is-heading3 .Node-contentContainer {
font-size: 16px;
color: #40e618;
}

/* Fixing font size in the desktop version. */

/* It has to be small enough in the desktop version even when “large” is selected in the settings, which is
needed to make the mobile version usable for touch input. We use px font sizes as in original Dynalist CSS,
so you may need to adapt it for your screen display density to be comfortable. So:

EDIT HERE to adapt font sizes, if your setup needs it. */
.is-desktop .is-smallFont .Node-contentContainer {
font-size: 13px;
}
.is-desktop .is-smallFont .Node-contentContainer .node-inline-item,
.is-desktop .is-smallFont .Node-contentContainer .node-inline-code {
font-size: 12px;
line-height: 14px;
}
.is-desktop .is-smallFont .node-line {
line-height: 16px;
min-height: 16px;
}
.is-desktop .is-smallFont .Node-noteContainer {
font-size: 12px;
line-height: 13px;
}

.is-desktop .is-mediumFont .Node-contentContainer {
font-size: 14px;
}
.is-desktop .is-mediumFont .Node-contentContainer .node-inline-item,
.is-desktop .is-mediumFont .Node-contentContainer .node-inline-code {
font-size: 13px;
line-height: 15px;
}
.is-desktop .is-mediumFont .node-line {
line-height: 17px;
min-height: 17px;
}
.is-desktop .is-mediumFont .Node-noteContainer {
font-size: 13px;
line-height: 14px;
}

.is-desktop .is-largeFont .Node-contentContainer {
font-size: 16px;
}
.is-desktop .is-largeFont .Node-contentContainer .node-inline-item,
.is-desktop .is-largeFont .Node-contentContainer .node-inline-code {
font-size: 15px;
line-height: 16px;
}
.is-desktop .is-largeFont .node-line {
line-height: 19px;
min-height: 19px;
}
.is-desktop .is-largeFont .Node-noteContainer {
font-size: 13px;
line-height: 14px;
}
.is-desktop .is-largeFont .Node-noteContainer .node-inline-item,
.is-desktop .is-largeFont .Node-noteContainer .node-inline-code {
font-size: 12px;
line-height: 14px;
}

/* Fixing list density in the desktop version. */

/* It has to be compact enough in the desktop version even when “comfortable” is selected in the settings, which is
needed to make the mobile version usable for touch input. */
.is-desktop .is-compactDensity .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}

.is-desktop .is-cozyDensity .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}

.is-desktop .is-comfortableDensity .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}

/* Fixing the horizontal scrollbar in the desktop version. */

/* Due to a Dynalist bug, a horizontal scrollbar will appear when disabling the advanced setting “Document Border”. */
.is-desktop .Document {
width: calc(100% - 67px);
}

/* Narrow content area in main content due to change in horizontal scrollbar*/
.DocumentBreadcrumb {
width: calc(100% - 87px);
}

/*****************************************/
/ EDIT HERE TO HIGHLIGHT YOUR OWN STUFF */

/* Adapt the selectors below with your name as used on Dynalist.
You’ll have to do this after every update of this Stylish library stylesheet.
Alternatively copy&paste this to a new stylesheet applied on dynalist.io. */

/* tasks I am assigned to /
.node-tag[title~="#username"] {
background: #fe7a15 !important; / heatmap-high color from Discourse */
color: black !important;
}

/* tasks I created /
.node-tag[title~="#by-username"] {
background: #dcc8b2 !important; / similar to heatmap-low color #9b764f from Discourse */
}

/* own mentions /
.node-tag[title~="@username"] {
background: #dcc8b2 !important; / similar to heatmap-low color #9b764f from Discourse /
}
/*****************************************/

/* #tags and @tags mouse-over highlighting */
.node-tag:hover {
background-color: #363636 !important;
color: white !important;
}

5

Thanks for the great update, I love it. Right now I’m use Darknest Hour v.1.2 by Олег «Rokinso» Сорокин, I don’t know who you are, but thank you very much, you make highlight look so much better.

6

I’am not so good in CSS so I copycat somebody CSS Code and try to modified for my needs

What is the CSS Code to change the entire row change the textcolor “light gray” when this has the tag #someday so i can quickly see my Next actions and skip my someday tasks, can somebody help me with this.

Thanx in Advance

Dimitry

7

I’ve tried using some custom CSS from the resource site you suggested, but nothing seems to be changing on Dynalist. I’ve tried hard reload, but still the same. Is there a particular tweak we need to be aware of?

8

Make sure you click outside of that box somewhere. That will trigger the automatic save. From there the changes are instant from what I see. If you’re just pasting and closing the window, your changes may not be getting applied.

9

Please see the P.S. I added to the OP.

That part is used to limit the CSS to the Dynalist site – that’s not necessary with Dynalist custom CSS.

1 Like
10

Can someone help me how to CSS the following requests

  1. When something is BOLD to give an different text color
  2. When the tag is #ref to make the whole node give the text color light gray…

There must be somebody in this Forum who can help me with this

Thanx in Advance
Dimitry

11

This is a really great addition, thanks Dynalist team!

12

It’s very small, but I use this snippet to turn back on the pretty underlines in Chrome:

* {
    text-decoration-skip-ink: auto;
}
3 Likes
13

I’m having trouble adjusting the spacing between items using this CSS. When I inspect the Dynalist site, I see a style in operation app.css, which includes the code:

.is-smallFont .node-line {
line-height: 20px;
min-height: 20px;
}

If I try to change this in the custom CSS, it doesn’t seem to have any effect. Any advice about changing Dynalist density would be heartily appreciated.

14

You’re using the small font option, right?

Also, try adding " !important" before the semicolon so the rule becomes “line-height: 20px !important;”, that will make the rule override everything else.

15

What color exactly? (In RGB or hex code)

That’s not possible, sorry. In CSS it’s not possible right now to change the appearance of the parent item based on attributes of the child items.

16

Quick answers on your response :slight_smile:

  1. Hex code
  2. Maybe you can find to trick this in CSS for me it was for me an “Nice to Have” feature request
17

Uh, I meant what color would you like, it can be either in RGB or hex. For example, give me answers “#212121”, not “hex code”…

From my few years of experience with CSS, it’s just not possible. It’s the limitation of CSS.

Others have asked the same question before: Complex CSS selector for parent of active child - Stack Overflow

Sorry :frowning:

18

Where do people post their custom CSS? Is there a snippets area of this forum?

19

Not really, I think you can find them in the Share & Showcase category. Try to search for CSS.

You can also search in userstyles.org with the keyword “Dynalist”. Make sure to read this help article when adopting styles from userstyles.org though.

1 Like