Need to draw a rounded rectangle around selected headings

[looney.apache]

Hi All,

I need to make a rounded rectangle around headings, but I’m not familiar with Obsidian or CSS.
Please guide me on what I may do.

Thank you!

What I’m trying to do

[efemkay]

you’ll need to do some homework for you to play around with css. do explore links below. i’ll give you a snippet to help u get started for that rounded rectangle headings

h1, h2, h3 {
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px;
}

Customizing CSS

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

[looney.apache]

Thank you!!!

That was indeed what was I needed. Also, thank you for putting me in the right direction.

Good day!

[looney.apache]

There was an unexpected side effect, but a pleasant one. Now all headers have a prominent Yellow rectangle around them.

It was an immense help, Thank you once again! :))

[efemkay]

yes. since obsidian is an electron app, most of the app control is html-based. but if u want to have different look for app control than the notes themselves, i suggest u give more specificity to the css snippet. for example you can have two separate snippets

---

to affect only the settings control

.vertical-tab-content h1,
.vertical-tab-content h2,
.vertical-tab-content h3 {
    ...
}

---

to affect only the notes

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
    ...
}

---

here’s screenshot to show that my h2 element is being subject slightly different css snippet, where the settings has text-align attribute

[looney.apache]

That too works like charm!!!

I’m really happy with the initial option; it worked perfectly. As I could tell a heading by a glance (Including headings in settings).

I don’t know how to thank you enough!!!