Post your current Custom CSS (with comments)!

🌈Share & Showcase
1

I want to see what people use.

/* Images are shrunk to 50 pixel thumbnails */

.node-displayed-image {
    max-width: 50px;
    max-height: 50px;
}

/* Hovering over an image thumbnail enbiggens it */

.node-displayed-image:hover { 
    max-width: 100%;
    max-height: 100%;  }

/* Hides all tags (though they still respond to search) */

.Node-openNote{ display: none; }
.ref .Node-openNote{ display: block; }
.node-tag[href="#"] { display:none; }
.ref .node-tag[href="#"] { display:block; }

/* Prevents pregnant bullets from transforming into + on mouseover */

.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";
}

/* Hides all the sidebars and icons until you mouse over them, for max minimalism */

.LeftPaneSlidebarContainer,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon
 {
    opacity: 0;
}
.LeftPaneSlidebarContainer:hover,
.LeftPaneSplitter:hover,
.AppHeader: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;
}
12 Likes
2

What do you use to insert this CSS?

1 Like
3

image
image874×772 53.5 KB

3 Likes
4

Thank you very much for these CSS Snippets!!! I especially LOVE the minimalism hack :wink:

3 Likes
5

I did not play with it myself but thank you for showing your snippets. They are awesome!

6

The only thing I’m using it for is to make the highlighting of the active item higher-contrast.

.Node-content:focus,
.Node-renderedContent:focus,
.Node-note:focus,
.Node-renderedNote:focus
{
color: rgba(0, 0, 0, 1);
background: rgba(0, 0, 0, .09);
}

4 Likes
7

Shrink #!, #_ & @_ tags by 50%

.node-tag[title^="Filter #_"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

.node-tag[title^="Filter #!"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

.node-tag[title^="Filter @_"] { 
 color: blue;
 # background-color: red;
 font-size:50%;
 text-decoration:none;
}

Make container width a bit bigger

.DocumentContainer.is-centerDocument .Document, 
.DocumentContainer.is-centerDocument .DocumentBreadcrumb {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

Bold Titles

.Node.is-currentRoot > .Node-self
{
font-weight: bold;
}

Pretty Underline

* {
    text-decoration-skip-ink: auto;
}
7 Likes
8

I use Notes a lot. Sometimes I write a complete article inside. I just made some basic tweaks to make the text bigger.

.Node-self.is-contentRendered .Node-content, .Node-self.is-noteRendered .Node-note, .Node-renderedNote, .Node-noteContainer
{
font-size: 115%;
font-weight: normal;
line-height: 130%;
}
.Node-note.needsclick
{
font-size: 120%;
font-weight: normal;
line-height: 130%
}
3 Likes
9

This is my full CSS file with comments on it

5 Likes
10

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?

11

Different color labels for different things. I prefer less distracting colors for 1st and 2nd color tags

12

For those coming over from Workflowy, here’s my Workflowy emulation CSS.

2018-10-07%2015_03_15-WorkFlowy%20-%20Dynalist
2018-10-07%2015_03_15-WorkFlowy%20-%20Dynalist2304×1582 121 KB

10 Likes
13

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;
}
2 Likes
14
  • 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;
}

image
image2384×1424 134 KB

8 Likes
15

image

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;
}

2 Likes
16

That image thing is a pro feature?

17

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

18

Love the bookmarks, reference and readlater, is there a way normalize spacing?

image

Thanks

4 Likes
19

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;
}

20

Great thread guys and gals!