# Help me with my super simple css file!

**URL:** <https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163>\
**Category:** Devs: Theme Design & Custom CSS\
**Tags:** custom-css\
**Created:** [November 22, 2024, 6:29pm UTC](https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163 "2024-11-22T18:29:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![harrison5](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@harrison5](https://forum.obsidian.md/u/harrison5)\
**Post date:** [November 22, 2024, 6:29pm UTC](https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163/1 "2024-11-22T18:29:39Z")

</div>

### What I’m trying to do

I’m trying to create a CSS snippet that I can use in Obsidian to tweak the default theme headers and folder colors. I want to keep a strictly vanilla Obsidian (no themes or plugins), at least for now. So I’m hoping to just do some minor tweaks to the default theme to make things a little more visually pleasing and make my notes easier to break up with some color.

Here is what I want the header css to do:  
1. Color each header with a different color (working)  
2. Show the color in edit and reading mode (not working)  
3. Have a — line underneath headers 1 and 2 (not working)

Here is what I want the folder css to do:

1. Alternate colors (indefinitely) for each folder that is created.
2. 

### Things I have tried

I’ve searched on reddit and this form and have been able to craft this code so far. The headers code works great but there are a couple problems (noted above) but the folders code doesn’t work at all, I think it’s meant for the Minimal theme.

Here is where I found the folder CSS: [Iterative Rainbow Folder Colors css](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066)  
(I like the [Iterative Rainbow Folder Icons.css](https://forum.obsidian.md/uploads/short-url/mO1tskQ4jYPvg0Je4487EQHpmm4.css) option)

Here is my colored header css:

```auto
 /* Header colors */
.cm-header-1 { color: #B278F2; }  
.cm-header-2 { color: #5E9BE1; }
.cm-header-3 { color: #FFC21F; }
.cm-header-4 { color: #46AC79; }
.cm-header-5 { color: #D07A40; }
.cm-header-6 { color: #D23838; }

```

Thank you so much for your help!

Bonus: if anyone knows of a CSS snippet that would allow me to easier insert callouts that would be awesome, something where I could hit a hotkey then select from a list of all available callouts or something like that!

---

<div class="post-metadata">

**Author:** ![harrison5](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@harrison5](https://forum.obsidian.md/u/harrison5)\
**Post date:** [November 22, 2024, 7:26pm UTC](https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163/3 "2024-11-22T19:26:52Z")

</div>

Oh Actually I found another Obsidian help article that helped with my heading colors showing up in reading view as well as the divider line (code found on reddit). Here is what worked for me:

```auto
body {
    --h1-color: #B278F2;
    --h2-color: #5E9BE1;
    --h3-color: #FFC21F;
    --h4-color: #46AC79;
    --h5-color: #D07A40;
    --h6-color: #D23838;
}
.HyperMD-header-1::after, h1,
.HyperMD-header-2::after, h2,
.HyperMD-header-3::after, h3 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 1px solid gray;
}

```

Still not sure on how to fix the folder css to work on the default Obsidian theme.

---

<div class="post-metadata">

**Author:** ![harrison5](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/h/b4bc9f/32.png) [@harrison5](https://forum.obsidian.md/u/harrison5)\
**Post date:** [November 22, 2024, 7:39pm UTC](https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163/4 "2024-11-22T19:39:41Z")

</div>

And here is a link to CSS that will work on the defualt theme!

> [@Iterative Rainbow Folder Colors css](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/38):
>
> @Lithou. Thanks for your update and offer to help. I got stuck in my last attempt working and finally re-jigged @sailKite’s Rainbow Folder Titles with my own tweaks – and have been happy with this since my last post – attached for what it’s worth. [Sailkites Rainbow Folder Titles-amw.css](https://forum.obsidian.md/uploads/short-url/ed3J2xpWap0AYUvSf2HXphzDxOL.css) (2.5 KB)

I would love to tweak this so it matches more of the icon feel, maybe I will attempt it if I have time…

---

<div class="post-metadata">

**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\
**Post date:** [December 20, 2024, 7:39pm UTC](https://forum.obsidian.md/t/help-me-with-my-super-simple-css-file/92163/5 "2024-12-20T19:39:48Z")

</div>

Closed on December 20, 2024, 7:39pm UTC

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