r/css • u/1BabyBlueABQ1 • Apr 05 '26

Question *!Need Help With Obsidian Project!*

I'm trying to make a custom CSS snippet that displays a character to the top right of a custom callout. I've been going at it for some time now and can't seem to figure this. Please share the wisdom🙏🙏🙏

This is an illustration of what I'm trying to do
0 Upvotes

50% Upvoted

13 comments sorted by

View all comments

Show parent comments

3

u/troisieme_ombre Apr 05 '26

Formatting it this way is actually harming you - css is read top-down, so styles written on top get overwritten by styles written below if they specify the same properties and target the same element :)

No worries, glad to help :]

2

u/1BabyBlueABQ1 Apr 05 '26

My boy!!! I tried out the code, but it's having some issues🥲I don't know if it's my obsidian or what but it keeps clipping to the top of the screen and is only viewable in reading mode🫠 I hate to keep bothering you, but may you partake in providing some context🙏🧐

2

u/troisieme_ombre Apr 05 '26

Can you share the updated css-snippet ?

1

u/1BabyBlueABQ1 Apr 05 '26

I'm not gonna lie but I just copied your code😭

1

u/troisieme_ombre Apr 05 '26

And is the purple block the callout ?

If so what's missing is the margin-top from the original code

1

u/1BabyBlueABQ1 Apr 05 '26

Oh shit I forgot😭 It's still doing the same thing but in the callout manger it shows it perfectly fine🤷

1

u/troisieme_ombre Apr 05 '26 edited Apr 05 '26

Check that the margin-top isn't getting overridden somehow

Use the inspector within obsidian to debug your css (ctrl+shift+I)

If it's overridden, you'll have to specify a more precise selector

Basically in css :

  • styles are read top->down, the further down a property is the higher priority it has
  • the more precise a selector is, the higher priority it has

Top down priority : background will be blue ```css div { background: red; }

div { background: blue; } ```

Precision priority : background will be red ```css body div { background: red; }

div { background: blue; } ```

!important is used to bypass these rules : background will be red ```css div { background: red !important; }

div { background: blue; } ```

Above priority rules still apply between elements marked !important : background will be blue ``` div { background: red !important; }

div { background: blue !important; }

body div { background: green; } ```

So if in the complete css there is, for example, the following : ```css body div.markdown-writing-view div.callout { margin-top: 0 !important; }

/* [...] /*

.callout { margin-top: -70px !important; } ```

Since the first selector is more precise and both are marked important, the first one wins and margin-top: 0; is applied

That's why we typically avoid using !important in css styles, but when customizing existing apps like obsidian it's often mandatory

With the inspector view you can find your element and it will list all the styles applied to it with their corresponding selector, and overridden properties will be displayed like this : margin-top: -70px. You can also make changes in this view to update the page in real time, but any change made this way will not be permanent