This is my full CSS file with comments on it
I like the different colours for alternative link sources. But Iām not sure what you are doing with the color labels. Whatās your aim?
Different color labels for different things. I prefer less distracting colors for 1st and 2nd color tags
Refined my CSS a bit, posting here just in case I accidentally lose it
.node-inline-item {
background-color: #ffffff;
border: none;
display: inline;
vertical-align: middle;
border-radius: 0px;
text-decoration: underline;
margin-top: 0px;
font-size: 16px;
}
.node-link-internal.is-displayed:before {
content: "";
}
.node-time{
text-decoration: none;
}
.node-italics {
color: #aaaaaa;
font-style: normal;
}
.node-displayed-image
{
max-width: 50px;
max-height: 50px;
vertical-align:top
}
/* Disappear tags */
.Node-openNote{ display: none; }
.ref .Node-openNote{ display: block; }
.node-tag[href="#"] { display:none; }
.ref .node-tag[href="#"] { display:block; }
.Node-self.is-collapsed.is-parent > .Node-bullet:before
{
content: "\e90c";
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-collapsed.is-hovering > .Node-bullet:before
{
content: "\e90c";
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-hovering > .Node-bullet:before
{
content: "\e90c";
}
.node-displayed-image:hover
{
max-width: 100%;
max-height: 100%;
position: relative;
top: -15px;
}
.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.DocumentBreadcrumb,
.AppHeader,
.Node.is-currentRoot > .Node-self,
.DocumentTools-icon
{
opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.DocumentBreadcrumb:hover,
.AppHeader:hover,
.Node.is-currentRoot > .Node-self:hover,
.DocumentTools-icon:hover
{
opacity: 1;
-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;
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-collapsed.is-hovering > .Node-bullet:before
{
content: "\e90c";
opacity: 1;
}
.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-hovering > .Node-bullet:before
{
content: "\e90c";
opacity: 1;
}
.Document-rootNode.node-bold
{
opacity: 0;
}
.Node.is-currentRoot > .Node-self .Node-contentContainer, .Node.is-currentRoot > .Node-self.is-heading .Node-contentContainer {
font-size: 16px;
}
- Resized tags
- Rounded āPillā tags
- Tag background color
- Example colored tag
- Material Icons for Bookmarks, ReadItLater, and References
- Render material icon at start of line no mater tag text placement (this is true to the rendered line, so a multiline entry wont move the icon to the start of the first line)
- Moved the Files icon to the bottom of the screen out of the way
- Moved the Bookmarks and tags icons up (needs some tweaking)
- Changed the highlight color for Bookmarks, Tags, Files
- Changed the color on the collapsed node icon
CSS
/* Set Up standard tag format */
.node-tag[title*="@"]
{
font-weight: normal;
color: white !important;
background-color: #666!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 8px 1px 4px;
font-size: 0.8em;
opacity: 0.4;
font-size:60%;
word-wrap: normal;
white-space: nowrap;
}
.node-tag[title*="#"]
{
color: black !important;
background-color: #ccc!important;
border-radius: 10px;
text-decoration: none;
padding: 1px 8px 1px 4px;
font-size: 0.8em;
font-weight: bold;
opacity: 0.4;
font-size:60%;
word-wrap: normal;
white-space: nowrap;
}
.is-collapsed>.Node-bullet:before
{
color: darkturquoise;
}
/* Set up Material Icons */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400!important;
src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
a[title^="Filter #bookmark"] {
visibility: hidden;
position: relative;
margin-right: -50px;
float: left;
}
a[title^="Filter #bookmark"]:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
visibility: visible;
/* position: absolute; */
top: -5px;
left: 0;
content: " \e866";
font-size: 22px;
color: cornflowerblue;
float: left;
}
a[title^="Filter #readlater"] {
visibility: hidden;
position: relative;
margin-right: -50px;
float: left;
}
a[title^="Filter #readlater"]:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
visibility: visible;
/* position: absolute; */
top: -5px;
left: 0;
content: " \e85d";
font-size: 22px;
color: cornflowerblue;
float: left;
}
a[title^="Filter #reference"] {
visibility: hidden;
position: relative;
margin-right: -50px;
float: left;
}
a[title^="Filter #reference"]:after {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
visibility: visible;
/* position: absolute; */
top: -5px;
left: 0;
content: " \e86d";
font-size: 22px;
color: cornflowerblue;
float: left;
}
/* Set up colored tags */
.node-tag[title*="#high-"]
{
font-weight: normal;
color: white !important;
background-color: red !important;
border-radius: 10px;
text-decoration: none;
padding: 1px 8px 1px 4px;
font-size: 0.8em;
opacity: 0.4;
font-size:60%;
word-wrap: normal;
white-space: nowrap;
}
/* Move Files, Bookmarks, and Tag icons */
.LeftPaneContainer-navItem--myFiles
{
top: 95%;
}
.LeftPaneContainer-navItem--bookmarks
{
top:-10%;
}
.LeftPaneContainer-navItem--tags
{
top:-10%
}
.is-desktop .LeftPaneContainer-navItem.is-active, .is-desktop .LeftPaneContainer-navItem:hover {
background:#283c6e;
}
box shadow for inline images to make them stand out a little more
.node-displayed-image {
border: 1px solid;
padding: 5px;
box-shadow: 2px 2px;
}
That image thing is a pro feature?
Yes I believe so. Or maybe itās just for uploads. If you host the image elsewhere (or use base64 url) you can probably embed images even without pro
Love the bookmarks,
reference
and readlater
, is there a way normalize spacing?
Thanks
Thatās a great question. You can try playing with the margin settings a bit but there has to be a better way of doing it. I did start using percents instead and itās lined up better, but not sure how it will work across different devices (phone, web, desktop app, etc).
a[title^=āFilter #readlaterā] {
visibility: hidden;
position: relative;
margin-right: -4%;
float: left;
a[title^=āFilter #bookmarkā] {
visibility: hidden;
position: relative;
margin-right: -4.5%;
float: left;
}
a[title^=āFilter #referenceā] {
visibility: hidden;
position: relative;
margin-right: -4%;
float: left;
}
Great thread guys and gals!
/* checkbox on mobile does not trigger zoom */
.is-mobile .Node-bullet {
pointer-events: none;
}
I use this CSS to hide the little infinity icon on Dynalist links. Not because I donāt like it, but because I need the room!
/* Don't show icon for Dynalist links. */
.node-link-internal.is-displayed:before {
content: none;
}
Before coming to Dynalist I spent a lot of time customizing Todoist with Stylish, but every week or so theyād push an updating breaking my CSS! I had sworn off customizing for awhile, but seeing how customization-friendly Dynalist seems to be I finally put together a custom style for myself again.
Thanks to many that have posted in this topic and on this thread! Iāve used many snippets!
At first I was just happy to change tags to pill-format, but then I realized that being able to customize formatting on individual tags is completely game changing for me. Right now Iām experimenting with using it for time tracking (not that this couldnāt be done without the special formatting, I suppose, but this just fits my brain so much better).
Script: https://userstyles.org/styles/177309/dynalist-candy
Post Sawyer pic
Wow this is the most polished theme I saw in while! I especially like the color labels. Thanks for sharing!
Thank you, and youāre very welcome!
WOW! Iām so impressed with your CSS solutions and I sort of copy-pasted my own one togetherā¦ Can anybody please HELP me and tell me how to achieve the following:
After completing a node with a certain #tag, I would love that #tag to change its color (e. g. from a bright red to grey). Thank you so much!
That would be easy if the CSS class or id would change when completed, but this is not the case. I hope somebody can prove me wrong but for that to happen it needs some JavaScript or jQuery.