Meta Post - Common CSS Hacks

Can you zoom in on the image after hovering for a second?

Hello there! I’m a newbie with Obsidian and I also love justified text 'cos I find it’s more readable, where should I put the “text-align” snippet? I guess in my theme css but don’t know how could somebody help me at dummies level? Thx!

1 Like

@nestorito it depends on which element of the theme you want to justify the text of, e.g. a blockquote, aside note, etc.

So, then you define the class (e.g. .aside) and set text-align: justify;

Did you ever figure out a solution to this? Maybe another plugin? I’m trying to embed goals into other notes, but it’s not a good solution for me if there’s a big empty box surrounding every embedded text.

1 Like

hello Klaas, been out for a while so sorry for not answering. Actually I’d like to have justified text in every text which is body text but I’m a CSS-dummy: how can I set/modify my theme to have justified text as default text-align property for body? Thx!

You have not mentioned if you want it for the Edit/Live Preview mode, or for Reading mode, or for both.

Here is the code for both Edit (= CM5) and Reading mode:

.cm-s-obsidian, .markdown-preview-view {
  text-align: justify;
  hyphens: auto;
}

If, instead of Edit/CM5 you want Live Preview/CM6, you can replace .cm-s-obsidian by .markdown-source-view.mod-cm6.is-live-preview.

Having said that (last paragraph), it might not be sufficient (I have not checked), in which case you might also have to add the .cm-s-obsidian.

2 Likes

Thanks a lot @Klaas I’ll have a look!

Text alignment with links, images, formatting using markdown, etc.

1 Like

thank you!

Hello!

Thanks for your snippet! I checked: it works fine on Windows on the latest version of Obsidian. I also tested this snippet on Android and the result is identical to what I see on Win.

However, on iOS, I was unable to achieve the same result in Live Preview mode, as well as in edit mode with CM5 (source mode). On the iPhone, this text alignment only works in view mode. Can you please tell me how to achieve the same result on Apple devices?

@ayli.voltok : I would love to do that, unfortunately I am by no means a CSS expert, I got most of my snippets from others.

Furthermore, I do not have an iOS device.

Your best bet is to ask this on Discord in the #appearance channel. There are a number of amazing experts among the very friendly, helpful community, and I am sure you will get it sorted out.

1 Like

Thanks for your reply! Then I will try to do as you suggest. :slight_smile:

1 Like

Is there a trick to getting this working in Live Preview?

2 Likes

Did you find a solution?

Is there a way to keep the header hashes visible in Live Preview mode?

Issue resolved. I found the right code there: obsidian-css-snippets/Headers.md at master · Dmitriy-Shulha/obsidian-css-snippets · GitHub

1 Like

@ANP you consulted a good source there :wink:

1 Like

I needed it to check this problem: A part of the text to the left of the cursor is removed from the headers when editing headlines

@uzerper

Late reply to this topic and the question of adjusting the text color. I was facing the same issue (gray-ish text on tags) that could not be edited in the css you provided.

It turns out it was overridden by my theme (minimal), so I added the !important exception:

.tag {
    background-color: var(--text-accent);
    border: none;
    color: white!important;
    font-size: 20px;
    padding: 1px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px;
    cursor: pointer;
    border-radius: 14px;
  }

I’m a total CSS noob and I don’t know if this is a best practice or can further mess with your setup.

I wonder if anyone has pointers about the CSS needed to control indentation of text located within a collapsible block.

My hope is to be able to do nested indentation of sections.

I know some CSS, but it’s been picked up in an as-needed way. With some effort I could probably figure out collapsible Flexbox (I think that is what is being used here…), but it would be great if someone has already thought the problem through.

2 Likes