Style Settings Plugin

One little information that I didnt knew until yesterday.

To input a different style of a Font on Style Settings you have to input the font’s PostScript name .

For example:

  • Georgia have 4 styles:
    • Regular
    • Italic
    • Bold
    • Bold Italic

To use Bold on Style Settings: Georgia-Bold

To find the PostScript name on Mac

I hope this is useful for somebody.

1 Like

Hello,

How can I backup style settings for my current theme?

1 Like

I found this really helpful, thank you!

1 Like

Loving this plugin, thank you for your work!

Is there a way to change the editor font only. I tried changing the Base Font but it changes everything, editor included.

I just want the editor to be monospaced to make vim mode less miserable.

Cheers.

1 Like

Hey! Stopped by to report the plugin’s awesome! I’ve been using it with the Yin and Yang theme with the WYSIWYG option, and damn does it look and feel good to write in. Do you have a list of themes that support the WYSIWYG options by any chance?

@oash This depends on the theme you’re using and how style settings is set up. It is possible in theory, but will need to be accomplished on a per-theme basis.

I do not. Chetachi set this up specifically for Yin and Yang.

I believe there’s a CSS snippet that will get you a WYSIWYG feel in any theme, though. You might try searching the forums for that if you’re interested.

We have both a light theme and a dark theme.
I’d be convenient, useful and hopefully consistent, if we could add some layer modes (multiply, screen, overlay, chroma, ect.) to our fine tuned light theme or fine tuned dark theme inside style settings, to save time to not customize the opposite theme.

I don’t know if this is just sweet theory and if applicable. Maybe a mockup in PS could be useful to find out if this system is practical.

In style settings we would need a drop down menu to select the layer mode to apply, if desired and style settings would do the computation and application of the translation from one theme color to another theme color

I just wanted to let you know my idea. I like your plugin very much, although it’s easy to get addicted to all this fine tuning
Anyway, :+1:t2:

@mgmeyers: Hi, I have the best of Obsidian combined: Minimal Theme and Style Settings. This combination gives me the best of everything I have tried so far.
There is only one thing in Style Settings that bothers me a little bit. I cannot turn off the underlining of links. If I use Minimal Theme Settings plugin to customize the Minimal Theme, it works. With Style Settings plugin it doesn’t. I will definitely stay with Style Settings plugin for customization because it gives me more options. Could you please look into this issue and possibly fix it in one of the next updates :grinning:. It would be very much appreciated.

@SamAdams how about using this snippet:

a.external-link {
  text-decoration-line: none;
}

Hi Klaas, Thanks a lot for the snippet. It works for external links :grinning: and is a good work-around. If I want to use it for internal links as well, can I just extend the snipped like so?

a.external-link {
  text-decoration-line: none;
}
a.internal-link {
 text-decoration-line: none;
}

Hi Klaas,
due to inspiration by your snippet and after some research on the internet I am able to change the properties of internal and external links. Oddly enough, the link-underlining doesn’t work for the internal links. Every other decoration works for both. Hier is an example, that changes the color of both link-types but the none-underlining works only for external links. What am I doing wrong? Is there another way to change the underlining?

a.internal-link {
    text-decoration:
        none;
        color: #75889e;
}

a.external-link {
    text-decoration:
        none;
        color: #c9a073;
}

@SamAdams from the Typomagical theme:

a,
.cm-hmd-internal-link,
.cm-link,
.markdown-preview-view .internal-link {
	text-decoration: none;
	font-variant: small-caps;
}

That covers both internal and external links. Note the small caps transformation for links which I find a nice change, but if you don’t like it just delete that line.

Last but not least, at the risk of seeming immodest, over the past 1½ years I have collected a lot of CSS snippets that someone put in a Github repository - you might find quite a few useful ones. Some of them won’t work in Live Preview, other will.

Click on the Github link in the uppermost comment on this forum page, and it’ll take you there.

Enjoy !

1 Like

Hi Klaas,
the new snippet from the Typological theme work perfectly for the internal links and your snippets collection is fantastic.:+1:
I found another snippet to dim unresolved internals links - very nice :grinning:.
Thank you very much for your help.

@SamAdams you’re welcome, Sam. I have not come across a community like the Obsidian community before. 99% of the people are friendly and helpful, and there are some amazing experts among them. If you go to the Discord #appearance channel and ask questions there you’ll soon encounter them.
Cheers.

1 Like

Ok, thanks for the tip on the discord channel.

1 Like

Super handy plugin!

Slight UI improvement request: allow the text boxes to expand with the width of the settings window. Right now, even if Obsidian and its settings are fullscreen, the text boxes in Style Settings (such as in the Font section) stay super narrow, which makes them difficult to check at a glance and edit quickly. Narrow boxes work well with a narrow window, but when the width is available, it would be great to take advantage of it!

Thanks so much for this must have plugin ! Do you think it could be possible to assign keyboard shortcut to class-toggle elements ?

I can’t seem to find the snippet for the custom background in your github, i’m not too familiar with github so that might be my problem but could you tell me where exactly the custom background snippet is?

Yes, it’s a little confusing. :sweat_smile:

If you click in the box (or circle in my case - it depends on your theme),
you’ll get this pop-up to choose the color. Manually type in the HEX/RGB vaule or click in the color selection area → Save. Your choice should be saved.

Screenshot 2023-03-12 at 7.15.26

The back arrow resets to it to the default value, so no worries!