Stylish code to change note display functioning

❓Help
1

I would personally really like the note of the highest level bullet of the current list (i.e. the note of the title) to always be expanded, even when you have the option for expanded notes turned off generally. This is how note expansion worked in workflowy and I think it made a lot of sense.

This seems like something that MIGHT be modifiable using Stylish code - does anyone have any idea how it might be done?

Thank you!

Stephen

2 
.is-currentRoot > .Node-self .Node-openNote {
    display: none !important;
}

.is-currentRoot > .Node-self .Node-noteContainer {
    display: block !important;
}

.is-currentRoot > .Node-self .Node-note {
    -webkit-line-clamp: inherit !important;
    max-height: none !important;
}
2 Likes
3

Amazing, thank you Piotr!! Oddly enough this doesn’t work when the note is an image. Any idea why?

1 Like
4

I didn’t even know that note can be an image :slight_smile: I will look into it later :slight_smile:

EDIT: you can modify the last part of previous code to this:

.is-currentRoot > .Node-self .Node-note,
.is-currentRoot > .Node-self .Node-renderedNote {
    -webkit-line-clamp: inherit !important;
    max-height: none !important;
}
2 Likes
5

Yes, glorious!!

Perfect :slight_smile:

1 Like
6

Ok one more thing that would be amazing (don’t worry if it’s difficult - I never know not being a techie myself) would be:

Hover over a 1-line image note like this gives a pop up preview like when inline images are not displayed:

7

Is this working for you?

.is-currentRoot > .Node-self .node-displayed-image-link:hover {
    position: relative;    
}
.is-showingNoteFirstLine .node-displayed-image-link:hover {
    position: absolute;
}
8

Oops, there where some glitches with images which are not in note area, use this one instead:

.is-currentRoot > .Node-self .Node-renderedNote .node-displayed-image-link:hover {
    position: relative;    
}
.is-showingNoteFirstLine .Node-renderedNote .node-displayed-image-link:hover {
    position: absolute;
    z-index: 9999;
}
1 Like
9

Absolutely perfect, thank you so much Piotr!!

It looks like a pull-down projector display, how appealing!!

2 Likes
10

Hmmmm, I’m trying this out now with Dynalist’s custom CSS thing, and nothing’s happening … any ideas?

11

Something must be broken with custom css thing, it still works for me.
Or if you have more custom styles and this is on bottom then maybe there is some error before, missing semicolon or something

12

Hmm weird, but thanks for the verification it works Piotr - the tiny box for entering CSS code is such a pain so there might be an error (although the fact we have custom CSS is just amazing)