Custom css not working

I use default theme. and want to adjust line height.

:root {
–ct-text-size: 32px;
–ct-line-height: 3;
}

I found some css code and put it on custom css. And it doesn’t work.
andy help?

Have you tried this?

:root {
font-size: 32px !important;
}

Oh, that work, for font size. Is there any way to change line height also?

I would try this first -

Hm… it doesn’t work, line-height is still same but font size changed.

Just as a note for the future, this should be in Questions & Help, not Bug Reports.

When you use :root, everything that goes inside the brackets is a --custom-variable. The reason --ct-text-size worked for someone else and not for you is because someone was using a theme that uses the --ct- prefix to distinguish its custom selectors (I’m guessing Cobra Theme or Craft Theme), and somewhere outside of the :root that theme defined several textual elements with font-size: var(--ct-text-size);.

For example, I’ve been using Solarized Extended (now named Awesome Styler), and the old version used --sol-ext- as its prefix and now names its variables things like --awSt-font-size. I recommend this theme, actually, as it comes with a section in Plugin Settings that makes it easy to change font size and add your own custom colors, in addition to other features.

The benefit of :root is that most people put it at the top of their code and use variables they’ve given descriptive names to define rules below, so that it’s easier to update later. But if nothing below references that --custom-variable, they have no effect. The only purpose of :root {} is to be a list of --custom-variables with easy names and corresponding values, so that multiple elements you think should always have the same value don’t need to be individually changed, or so that long/annoying values are easier to type. I have a few named colors in mine, so I don’t have to remember the hex code for it whenever I want to reference it.

If you want to change the line-height of all text elements,

span, .block-content {
line-height: 3em; /* this would be triple the default */
}

is probably the code you’re looking for.



Here’s an example of everything I’ve said, plus all the sections I can think of where line-height is relevant:

:root {
--my-lh-so-i-dont-have-to-scroll-later: 2em;
--s: 2px 2px 5px #fc5151; 
}


span,          /* paragraphs/text chunks generally */
textarea,      /* block as you're editing it */
.block-content /* blocks, not being edited */
.inline,       /* blocks, not being edited. does not affect blocks after a soft line break (shift-enter) */
.is-paragraph  /* block paragraphs, not in edit mode, that are separated by a soft line break */
{
line-height: var(--my-lh-so-i-dont-have-to-scroll-later); 
text-shadow: var(--s); 
}

Your custom.css takes precedence over any installed theme and over Logseq’s default CSS, so another option is to take the --custom-variables from the :root section of Logseq’s default CSS (or any installed theme), put it in the :root section of your custom CSS, and redefine those variables. Again, this only works because these variables are associated with actual rules and specific sections of the app somewhere else in the code.

So if you want to use :root without having to write CSS declarations that use them, Logseq’s default stylesheet has --ls-page-text-size: 1em; in its :root which you can overwrite, but I don’t think it has set any --custom-variable for line height.

1 Like