Content of callout won't stay aligned to the right in reading mode

Hi, I have the following css snippet.

.callout[data-callout="m-quote"] {
  --callout-color: transparent;
  border: none;
  padding: 0;
}

.callout[data-callout="m-quote"] .callout-title {
  display: none;
  padding: 0;
}

.callout[data-callout="m-quote"] .callout-content {
  font-size: 100%;
  text-align: center;

}

.callout[data-callout="m-quote"] .callout-content p:first-child{
  font-size: 100%;
  text-align: center;
  font-style: italic;
  font-family: 'lora';
}

.callout[data-callout="m-quote"] .callout-content p:last-child{
  font-size: 100%;
  text-align: right;
  font-style: normal;
}

.callout[data-callout="m-quote"] .callout-content::after {
  content: "--- § § § ---";
  color: var(--text-accent);
}

When I type the following callout in obsidian (using the previous snippet):

> [!m-quote]
> “All warfare is based on deception”
> 
> — Sun Tzu

This is how it looks like in editing mode:


However if I change to reading mode, this happens:

It is not only the alignment, If I change anything else in the .callout-content p:last-child block, it will be ignored in reading mode e.g. if I change the font size it will only be reflected in editing mode.
Thanks in advance for any help.

It looks alright over here. It could be your theme or some other CSS jamming things up. I’d investigate in that direction.

Obsidian_NC0CYhfNO3

Hi, sorry it was my mistake. I had the following snippet enabled

/* reading mode */

.markdown-preview-view p {

text-align: justify;

text-justify: inter-word;

}

/* source view and live preview */

.markdown-source-view.mod-cm6 .cm-line {

text-align: justify;

text-justify: inter-word;

}

I use it to justify text. And it was messing with the callout snippet.
By any chance, do you happen to know how could I justify the text in obsidian without affecting the callout in question. Thanks.

Hmm. Not sure. Even with the justify snippet above enabled, the original callout still looks the same as my gif.

You have text-align: center in these anyway, so the justify isn’t affecting this callout.

.callout[data-callout="m-quote"] .callout-content {
  font-size: 100%;
  text-align: center; }

.callout[data-callout="m-quote"] .callout-content p:first-child{
  font-size: 100%;
  text-align: center;
  font-style: italic;
  font-family: 'lora'; }

Good luck!

Ok, this was a weird one to figure out.
The justify text snippet fixed it for me, but only until I reopened obsidian. After some time, I ended up figuring out the actual problem.
I had the callout saved as a new custom Admonition callout. Removing the callout from the list of custom admonition callouts fixed the issue. I don’t really understand how did that caused such a seemingly unrelated problem to happen. But well. I will report the bug to the admonition GitHub.
Thanks for all the help @ariehen

Hi, one question, what is the snippet to change the icon/background color of the reading/editing mode button.

image

Have being looking on the internet but found nothing.
Thanks.

Found it. Here is the snippet I implemented in case it helps somebody.

[data-mode='source'] .clickable-icon.view-action[aria-label^="Current view"]{

    background-color: color;
    /*color: color;*/

}

/* [data-mode='preview'] for reading mode*/

Yeah, you got it. That’s it.

In my test vault (the green “LP”), I do it a little differently because I wanted to hide the default icon and replace it with whatever (the content:' ' part). Silly and totally unnecessary, but fun.

[data-mode='source'] .clickable-icon.view-action:nth-child(2) {
    background-color: pink;
    border-radius: 6px;
    text-decoration: none;
    padding: 2px 4px;

    & > svg { 
        display: none; }
    &::before {
        content: '👽';
        padding-inline: 1px; }    
}

Hi, thanks for the awesome snippets :slight_smile:
It is amazing the stuff that you can do with css in obsidian

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.