I’m experiencing some unexpected behavior with the theme I’m using (Nord) and I’m not sure where to look for the cause.
I have some notes that start with an emoji. When I put the title of that note in a link, the emoji either disappears, or gets centered on its own line with the rest of the title left-justified on a new line. See the screenshot below for details.
Changing the theme to (none) makes things display as expected (each linkleft-justified on its own line)
Where should I look for the bit of CSS that’s making this happen?
Thanks for the advice. Unfortunately that’s like telling me to look under the hood when my car won’t start, but I’m not a mechanic
The links you posted are for Chrome dev tools, so that’s already confusing. I managed to open the inspector panel in Obsidian and drill down to the relevant HTML elements, but the Styles window below isn’t helping me isolate the problem because I don’t know what I’m looking for.
—Edit
I figured it out! It’s cool that I can toggle items off and see what works.
Fortunately it’s a bit easier to take the parts out of an app (vs. a car) to see what they do!
Adding a snippet in your Appearance settings can change how that bit of CSS works. Copy and paste the following into a text file, save it as “inline emoji.css” (or whatever), save that file in the vault’s Snippets folder (see the little folder icon on that section in Appearance), then toggle the snippet on.
img {
display: inline-block !important;
}
The above might not work right away, but I’m sure a bit of experimentation will lead to what you’re hoping for.
Oh, good point. You just have to then add the !important on any overrides. Edited the CSS above to reflect that.
Re: emoji vs images. You’re asking about selector specificity. Mind taking a screenshot of what you see in the devtools after you’ve inspected the emoji?