With the help of @efemkay’s banner image code in this thread, I managed to make a snippet that enables banner images (which come in 3 styles that can be toggled with the Style Settings plug-in). The banner height can be changed with Style Settings as well.
In addition, the snippet allows circular profile-esque images, page icon images (Warning: experimental feature that is commented out by default, and also glitchy), and floating images to the left or right.
I highly recommend leaving the icon features alone if you’re using a mobile device, because the icons end up in weird positions on mobile.
How it Works
Css Classes
obsidian-banner - type this in the frontmatter after cssClasses to enable the banner image.
obsidian-icon - type this in the frontmatter after cssClasses to enable the icon image.
Image Alts
Example of an image alt (banner):
banner - makes the image the banner image.
higher - positions the banner image higher.
lower - positions the banner image lower.
circle, profile, or round - typing any of these will make the image circular in shape, like a profile picture.
left - floats the image left.
right - floats the image right
icon - turns the image into a title icon.
A Warning About the Icon Feature
The icon features is…not very well-programmed. I apologize. When viewing multiple panes at the same time, or viewing the note on a mobile device, it drifts into a weird position, and a theme with a custom readable line length may disrupt its placement on the page.
You can still use the icons feature, but be warned: it can act a bit wonky.
Well, I’m really still a beginner and hadn’t touched css before December. Like I said above, I was only able to make the banners with @efemkay’s code.
If you want to get started learning css though, I’d recommend you start experimenting by tweaking existing themes’ code and looking at other people’s css. I started by messing with the Mado Miniflow theme. The result of my tweaking was an abomination, but it gave me a feel for how css works. After that, and a few hours of pasting css from Wikipedia, I’ve been able to make simple themes from scratch.
Sololearn has a free course on css that you can also view if you like. However, I think the fastest way to learn is by observing, replicating other people’s css tricks, and experimenting.
I’d also recommend reading these posts. They’re a great introduction to making css for Obsidian.
