Change colour of reference headings

Questions & Help
1

I’d like a toggle to switch references on or off, but in lieu of that it would be nice if I could change the colour of the linked and unlinked headings at the bottom of the page. An almost imperceptible grey would be ideal.
If anyone knows how to do this I’d appreciate it!

2

I would have to take a look to pull up the exact css selectors (not on my desktop right now), but you can hit ctrl-shift-i and inspect that element to see what the relevant selector is and set the color to gray, semitransparent, or completely hide the entire div. If the one you’ve clicked (using the little cursor in the top left of the developer tools window) doesn’t seem like the element you’re looking for, just go up or down in the tree. It’ll already have a set text-color (whereas the box it’s in will just have rules defining size or other non-text styles).

For testing, you can open the custom.css file in an external editor (I’ve used Github’s atom), which allows you to have both logseq’s main window and sidebar on test pages, so you can see how everything looks each time you save a change.

1 Like
3

Thanks for the reply! I’m on a Mac, and this seems a little beyond my abilities unfortunately…

4

I looked today, sort of took a shortcut and looked at the code for one of my installed themes —

To target the heading for linked refs, unlinked refs, and hierarchies (and their corresponding collapse/expand arrows), use:

.foldable-title h2, 
.foldable-title .rotating-arrow {
opacity: .2  /* or whatever */
color: gray;
}

To target linked and unlinked without messing with the hierarchy appearance, use .references .foldable-title h2 instead, and prepend the arrow one similarly. The CSS selector for the hierarchy header is .page-hierarchy .foldable-title h2 .

If you really prefer to hide the linked/unlinked references,

.references {
display: none; 
}

is all you need. Or use .references, .page-hierarchy {display: none} to hide hierarchies with it (you may not use or care about hiding namespaces, but I figured I’d throw it in just in case).

5

So if I understand, should I be pasting this in the Edit custom.css in settings?

6

Yes! Also, today I learned that posts have a character minimum :sweat_smile: - but yes, it goes right in your custom.css.

The code should work, but if this or any future change seems not to, try adding !important before the semicolon, e.g. display: none !important; – it forces your rule to take precedence over any added theme (it should do so by default, but there are occasional exceptions, so this is an easy first troubleshooting step).

7

I added this but it didn’t work… restarted the app a few times and tried different notes:

.foldable-title h2,
.foldable-title .rotating-arrow {
opacity: .2
color: gray !important;
}

8

Sorry, I forgot a very important semicolon after opacity: .2; — there should be a semicolon at the end of every line!

(okay, there is one exception, but it’s why I forgot to add the ;, so better to ignore it)

9

That worked! Thanks a lot. I changed the opacity to .04 and that’s perfect for me now :slight_smile: