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


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