Post your current Custom CSS (with comments)!


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

#2

What do you use to insert this CSS?


#3


#4

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


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


CSS to make date picker highlighting darker
#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;
}

#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%
}

#9

This is my full CSS file with comments on it


#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.


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

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


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


#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


#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!