Meta Post - Common CSS Hacks

@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

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?