Easily change font properties

Questions & Help
1

Hi. Just wonder is there a way for me to change the following on font properties?:

  • Font size
  • Font type
  • Italics
  • Bold
  • Color
  • Underline
    These are something that is so common in many text editor. So kind of like to use those properties.
    Thanks.
2

The ‘Awesome Styler’ theme provides a spot within Plugin Settings to change the colors of basic elements along with a few other tweaks, and a familiarity with basic CSS principles enables you to change just about anything in Logseq via the custom.css file.

You can go to any theme’s CSS file via Github or after installation on your hard drive, read the code, and copy and paste whatever you want, changing whatever you want. Google as you go if you’re confused, or feel free to ask specific questions here.

1 Like
3

Logseq Mac allows for easy changing of font properties with custom.css file. But Logseq iPad is a different story. Anyone had any success currently with latest version of Logseq iPad changing font sizes?

4

You can use CSS media queries to change styles only on specific device types. Here’s an example of what I’m preparing for use on my iPhone, you should look up what the values for iPad would be (I think it’s a max of 1167px or so):

/* MOBILE  styles */
@media only screen 
/* and (min-device-width : 375px) */
and (max-device-width : 667px) {

  :root {
    --ls-page-text-size: 10px !important;
  }

  span, .block-content, .ls-block {
    font-size: 10px;
    font-weight: 200; 
  }
  a.page-title, .title, .page-title, a.page-ref,
span.page-reference {
    font-size: 11px !important;
  }

}

I commented the minimum out because it seemed unnecessary for my smallest device, but if you want to code for iPad and also iPhone, then your min should be my max. But basically, sticking normal rules inside the @media brackets should get you what you want.

Here’s a link to Logseq’s default CSS on Github, so you can copy variables from the :root and hopefully have an easier time (since I’m not sure how you’d inspect the code directly). But any rules you already have in custom.css can be copied between the @media brackets to adjust for mobile-specific usage. This code piece goes in the same file (and I’d put it close to the top, as scrolling is more annoying on mobile than desktop).

3 Likes
5

I really appreciate what you have suggested here. Thanks so much. I’ll try it out.

1 Like
6

I guess I can’t speak for the OP, but what if I don’t want to change the color across the whole theme?

Sometimes I just want to type a block (or series of blocks) in red, or blue, or #fcb103. Sometimes I want to set just a few words to be a different color than the surrounding text. I don’t want to highlight them, and I don’t want to be limited to a pre-determined set. I just want to be able to decide, on the fly, “This text should be #fcb103” and have it be that color.

How do I do that?

7
1 Like