Meta Post - Common CSS Hacks

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?

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

@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.

1 Like

OK… Responding to my own post, it doesn’t have anything to do with Flexbox…

The problem is that instead of wrapping a section in a <div> – which is what I expected, imagining it would make handling collapses easier (in retrospect I realize why I was wrong) – there is nothing that contains both the header and the subsequent text.

In other words, instead of something like:

<div class="collapsible-h1-block">
   <div class="header-1">My Header Text</div>
   Line 1 of text in the block.
   Line 2 of text in the block.
</div>

The code instead looks like:

<div class="header-1">My Header Text</div>
<div class="cm-line">Line 1 of text in the block.</div>
<div class="cm-line">Line 2 of text in the block.</div>

In the first case I could just modify collapsible-h1-block. But in the second case the <div> containing the header itself would have to change the state for subsequent <div>s.

Is there perhaps a way to do that with php inside the css? I kind of doubt it… I’m guessing the php processor doesn’t run on the style sheet…

It would be great if somebody has tackled this problem, or can at least point me in a direction or tell me that I’m SOL.

I’m a newbie to css and am trying to improve the look of my timeline notes for history class. Is there a possibility to create the effect of tab stops. I have my notes in a “+ date: event structure” but not every date has the same length. therefore i want to indent the text after the “:” to create sort of a two column structure for better readability. Preferably I would only like to have the css snippet respond to files tagged with ‘#timeline’. Is that even possible?

There’s two ways you could do this using CSS combinators. First:

div.header-1 ~ div.cm-line

which select every div with the class “cm-line” underneath an H1. The drawback to this is that you have to have something at the end of the list to break the chain. If you’re going from H1 to H1, that’s perfect. But you couldn’t have a few indented paragraphs, and then one without—the CSS will see them all as the same thing.

Another option is:

div.header-1 + div.cm-line,
div.header-1 + div.cm-line + div.cm-line

The first line selects any .cm-line div directly following an H1, the second line selects the .cm-line directly following that one, and so on, add as many as you like. Drawbacks are that it’s clumsy CSS, and you can only go down as many levels as you define in the CSS. If you know your lists only have ten items or less, for example, that works, but if they vary from 5 to 15, then you’ve got to add in that many lines in the CSS, which is going to get fugly in a hurry. Better to use this one if your lists will be short, probably.

1 Like