CSS for collapsed items

webalstrom

I am wondering how I can change the color for the headers of collapsed groups. In the image, they are white/light grey and hard to read on the medium grey background I have set up for Legend. Once they are open (like the section for “Saturday”) they turn black and are easy to read. I would like to change the closed ones to a dark grey. I’ve looked through the CSS coding options as well as examined the elements on the actual page and I don’t see anything obvious.

Jerud

Not a real answer, but I think you’re going to have to trial-and-error to find the right style to modify.
IF this color isn’t hardcoded (which is possible), then it may be tied to a style that’s used - and named - differently. Maybe it’s connected to the ‘complete’ color for items, perhaps? I suggest scrolling thru the theme stylesheet and just looking for any color assignments that are light grey, and try temporarily changing those to see if they are the right one. If it’s connected to something else you might not be able to do what you want here.

webalstrom

Jerud - thanks for the reply. I’ve been doing some trial and error and I couldn’t find anything that seemed to change those collapsed headings. I may just have to live with the low contrast like it is or break down and change my background color so it is easier to read. But I’ll keep poking around in the Chrome Inspection Pane and the Legend CSS panel and see if I can figure it out. If I do, I will post it here in case it will help others.

Just my thought on CSS mods in general: The preconfigured options of Legend are overall easier to use than the blank slate of Dynalist or having to use Stylish for Workflowy, but it would still be nice to have a user guide on what the different items do, since some of the code names aren’t always clear (what is a “collapser” anyway?). Hopefully once all the bigger issues are worked out, Jay can do a guide on this.

Jerud

Cool, please do share if you find anything.

I’m sure Jay has plans to make the whole Theming functionality more friendly in general. It’s really nice that he pushed it out even in a barebones form for us to play with early on, though.

Jerud

@webalstrom In the course of your experimenting, have you come across the style control that affects the Breadcrumbs portion of the Pane Header?

I found .paneHeading which I can set to font-size: 0em to hide it – but the breadcrumbs remain. I’m wanting to blow away the Pane Headers entirely since they’re so redundant and space-wasting.

webalstrom

Jerud I have not noticed anything that I remember. I went through a lot of the different elements and changed them temporarily to orange (a very noticeable in my set up) and I never saw the pane header change. I haven’t really looked at the Layout options since I have mostly focused on changing the colors. But if I see anything that looks hopeful, I’ll let you know.

Here’s looking forward to a more robust user guide for the CSS, but, as you said earlier, I am grateful that Jay pushed out an early release for us to experiment with. It shows how versatile Legend is and how it will be even more so when all the kinks/bugs are worked out!

Jerud

I think we (the community) could make a big difference by contributing some of these guides/help resources, even if they’re incomplete or need revision. Working from a draft is oodles easier than starting from scratch. Someone’s gotta ‘break the seal’

I used to write product manuals as part of a bigger job. Documentation often suffers because it’s written as a ‘side job’ by someone who’d rather be doing their ‘real job’, and who is actually ‘too knowledgeable’ about the product and thus has a hard time taking the perspective of a new user.

Right now I’m a huge mess and I already spend far too much time fiddling with Legend at the expense of other stuff. But someday I very much intend to jot down a framework for a user guide. Jay may still want to keep the “official” documentation intact, and that wouldn’t hurt my feelings – but a community-generated guide could be very valuable, and I bet if I get something started many here will have lots of input to share on how to improve it.

I’m kinda hoping that by the time I’m able to work on that, collaboration is starting to work. Because that’d be a fantastic way to beta-test collab, eh?

webalstrom

I’d be happy to lend a hand with writing up some code examples or help figuring out what CSS elements control what on the screen. But I am not versed in CSS. I do things by trial and error (and lots of copying/pasting and hacking!). But I can post what I discover as I plod along on customizing my Legend. I would also be happy to post examples of how I use Legend and explain my “system”. I always like hearing about how other people are using the app.

But like you, Jerud, I am overwhelmed with things I have to get down and with the holidays coming up, I don’t need another thing to fiddle with! But perhaps we can start slow and post things as we discover them and then pull them all together after the new year for Jay to use if we wants.

Jerud

webalstrom Well the eyestrain got to me, and I started converting to a grey color scheme. After an hour of playing around I came back to this thread and realized I had basically duplicated your screen shot accidentally! Great minds.

I ran into a few things I can’t find the controls for (in addition to the collapsed headers you mention), wondering if you had already sorted them out? BTW Have you noticed that the newly-updated Headings and Projects don’t go dim when their groups are collapsed, but all the other GB types (tag, contact, etc.) still do?

“New item”, “type / to see options” – various white text on Pane background. Must be automatic because I started with the Light theme yet my text is white, but it must have been black before I changed Pane bg color.
Email (and other attachments) backgrounds
Breadcrumbs text
Tally box (and probably also the “+” button in a circle that appears for blank items on-hover)
GB-Pane group headings, borders, collapser, item counts, and heading secondary-date text (the actual date listed after day-of-week).

Also, there’s a few that don’t seem to do anything at all, I set them to a bright color and see it nowhere:

.inlineCode (not .codeBlock) … do we actually have inline code? I tried wrapping text in up to three backticks, nothing
.format
.paneHeading
.board
.blockHeader
.blockHeader.collapsed (in a completely different location from .blockheader)
.priority

webalstrom

Jerud Either great minds or we’re just the crazy ones trying to change our CSS in ways we shouldn’t be!

To be honest, I haven’t played around much with CSS since I asked that question. I never did find out what controls the color/style of the collapsed groupings. I just decided to live with it. It is strange that it doesn’t happen to all group headers. For me, GB tag headers don’t go dim, but I have changed my tag styling to blue. Maybe that is a clue that there isn’t a CSS style for the headers themselves, but for what is in the headers? So that is why Headings and Projects aren’t that light gray color?

I don’t use email in Legend, so I can’t help you there. I’m not bothered by the lack of contrast for the "new item:, breadcrumbs and tally box, so I’ve never investigated. And I’ve played around with some of the elements you list (as well as others) and some don’t seem to make any difference, at least not on the what I’m showing on my screen.

I’m hoping @Jay will someday make a list of all the various elements and what they do. Making it a visual chart with pointers to an actual Legend Pane would be most helpful! Or maybe other people have used CSS enough to discover which elements control what and can answer our questions!

Jerud

Heh, sorry to say but I think you and I might be the “bleeding edge” on this one…patience I suppose.

In the meanwhile it’s just fantastic to have control over as much as we do. I solved some of the white-on-grey by just darkening down everything across the board. I don’t use emails (much), but I gave that as an example of attachments since we don’t discuss them by name very often. In my case it’s largely OneNote pages, and they really stand out now, as white-on-grey. I suspect that is hard-coded and can either be white or black depending on the starting theme…Not willing to test that out right now though. The most glaring issue is with the Notes Editor, which is also bright white. Thankfully I’m not working in them all day long, as I was on a previous project. But one day… I do really like the contrast this creates though: I have always disliked the way Notes blended into the Pane behind them. It’d be perfect if the existing controls for .popup were used for the Notes editor as well – it would make the look very consistent with Settings, Help, and Poppup panes (in my case a slightly lighter shade of grey).

Gotta think that Jay has it somewhere in his Legend Plan that lists out where each style element is used. That’d be a fantastic application for #tags!

webalstrom

I’m hoping Jay knows what’s going on! If he doesn’t, who does? 😀

Jerud, what do you mean when you say having each style element listed out would be a fantastic application for #tags? Are you thinking that #tags could somehow influence how the CSS is parsed? Or that the CSS can effect #tags? I can think of some ways this could work, but it sounds rather “fantastical” to me right now.

Your suggestion for having the background of notes popups is good, but I would rather see notes totally reworked. I don’t like the popup window. I would rather have notes inline, similar to Workflowy, or even better yet, Dynalist. In Dynalist, you can have the notes fully visible, just show the first line or be totally hidden (with just a small icon to indicate there is a note). They seem much more part of the node instead of something tacked on. And having the option to keep them visible makes them more useful as an accessory or “mini-child” where the info doesn’t quite warrant a full node to itself, but is still readable while browsing the outline. One way I used this feature in the those other two apps was to keep my organization tags in the notes (such as @context tags and #time tags). I could still do this in Legend, but the popup window adds that step or resistance so I’ve chosen not to organize in tis way (and Legend doesn’t have @tags… it would be nice though!)

Jerud

webalstrom Oh, I just meant that if you were using Legend to manage a project, applying #tags to link individual items to the resources they depend upon would be a good way to keep that documented. If Jay wanted to see a list of all the UI elements that pull their color from a particular style element (so he could update the code), it would be a simple filter/search.

Notes could probably be fleshed out with more flexibility, for sure. They’re actually a good fit for my usage right now, though – their characteristics force me to use them consistently. The extra friction is (for me) pretty much eliminated by the shift+enter hotkey.