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