# "How to achieve" CSS code snippets

**URL:** <https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474>\
**Category:** Themes & CSS snippets\
**Tags:** custom-css\
**Created:** [November 12, 2020, 3:29pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474 "2020-11-12T15:29:49Z")\
**Posts on this page:** 20\
**Page:** 12

<div class="post-metadata">

**Author:** ![NomarCub](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/n/bbe5ce/32.png) [@NomarCub](https://forum.obsidian.md/u/NomarCub)\
**Post date:** [September 1, 2022, 2:52pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/222 "2022-09-01T14:52:36Z")

</div>

There used to be a way to have icons for notes in the file explorer.

> [@How to set the icon for a note on right side bar](https://forum.obsidian.md/t/how-to-set-the-icon-for-a-note-on-right-side-bar/18004):
>
> Things I have tried What I’m trying to do I have several “special” notes that I’ve added to the right side bar (e.g. Goals.md). Since the title isn’t displayed, I rely on the icons to differentiate between the tabs in the side bar. But my 4 special notes all have the same icon. Is there a way to set the icon for a specific note when it’s on the side bar?

However, this is broken in the latest v0.16 insider version. Can someone help me out with this? Should that post be reopened / should I make a new post?

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [September 1, 2022, 3:51pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/223 "2022-09-01T15:51:17Z")

</div>

You could ask in the Discord `#appearance` channel.

---

<div class="post-metadata">

**Author:** ![zensei1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/e68b1a/32.png) [@zensei1](https://forum.obsidian.md/u/zensei1)\
**Post date:** [September 2, 2022, 11:55am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/224 "2022-09-02T11:55:35Z")

</div>

I want to get minimal theme to look like this on windows with the titlebar hidden. I’ve been told it is doable with some css magic.  
 ![Screenshot 2022-08-22 132800](https://forum.obsidian.md/uploads/default/original/3X/4/b/4bfbb3ba4d2001ddbca6f22ce5ed2bb15a2ee21a.png)

Does anyone have css to move the close, max, and min buttons to this position, below the titlebar?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [September 2, 2022, 2:17pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/225 "2022-09-02T14:17:48Z")

</div>

Note: from Obsidian 0.16 on this is a togglable setting. If you don’t want to wait till 0.16+ goes public, try this:

```css
.titlebar {
  background: var(--background-primary);
}
 
.titlebar-text {
  display: none;
}

```

Note 2: if you use the Hider plug-in (made by the Minimal dev), it is a togglable setting.

---

<div class="post-metadata">

**Author:** ![zensei1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/e68b1a/32.png) [@zensei1](https://forum.obsidian.md/u/zensei1)\
**Post date:** [September 2, 2022, 5:11pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/226 "2022-09-02T17:11:26Z")

</div>

> [@Klaas](#):
>
> ```auto
> .titlebar {
> background: var(--background-primary);
> }
>  
> .titlebar-text {
> display: none;
> }
> 
> ```

Sorry I worded my question badly, I already have hider (with the minimal theme) installed but I loose the min, max and restore buttons which I use all the time.

I wanted to move the buttons into the sidebar like in the picture. I’ve dipped my toes into css already and got this which only changed the position within the titlebar (which I have hidden).

I hope my question is clearer now!

```auto
.titlebar-button-container.mod-right {
  left: -100px;
  top: 5px;
  position: absolute;
}

.titlebar-button.mod-close{
  left: 25px !important;
  position: relative;
}

.titlebar-button.mod-minimize{
  left: 140px !important;
  position: relative;
}

.titlebar-button.mod-maximize{
  left: 140px !important;
  position: relative;
}

.titlebar-button-container.mod-left{
  display: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [September 3, 2022, 4:17am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/227 "2022-09-03T04:17:13Z")

</div>

You could/should ask in the Discord `#appearance` channel.

---

<div class="post-metadata">

**Author:** ![zensei1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/z/e68b1a/32.png) [@zensei1](https://forum.obsidian.md/u/zensei1)\
**Post date:** [September 3, 2022, 8:14am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/228 "2022-09-03T08:14:46Z")

</div>

Ok thanks for the help!

---

<div class="post-metadata">

**Author:** ![edgirishan](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/e/b5ac83/32.png) [@edgirishan](https://forum.obsidian.md/u/edgirishan)\
**Post date:** [December 17, 2022, 1:48pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/229 "2022-12-17T13:48:39Z")

</div>

Is there any css snippet for enabling collapsing app ribbon after the 1.0 update?  
I know I can hide the left ribbon using the Hider plugin but I wanted to retain the option of accessing upon hovering.

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [December 17, 2022, 3:34pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/230 "2022-12-17T15:34:56Z")

</div>

I don’t know, sorry. Your best best is to ask in the `#appearance` channel on Discord, where there are some amazing CSS gurus.

---

<div class="post-metadata">

**Author:** ![extraMangosPlease](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/e/7feea3/32.png) [@extraMangosPlease](https://forum.obsidian.md/u/extraMangosPlease)\
**Post date:** [January 21, 2023, 4:38pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/231 "2023-01-21T16:38:08Z")

</div>

Is there a snippet to hide the View mode icon? I never change this setting, and it seems not to be hideable by Hider.

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [January 21, 2023, 4:51pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/232 "2023-01-21T16:51:53Z")

</div>

I don’t know what you mean by “View mode”. There is Reading mode and Live Preview mode. I assume you mean the icon in the top right corner of a note. If so, try this:

```css
/* Hide Edit/Preview icon in inactive panes only */
.workspace-leaf:not(.stayopen) .view-action[aria-label*="Preview"], .workspace-leaf:not(.stayopen) .view-action[aria-label*="Edit"] {
    display: none;
}

/* Hide Edit/Preview icon in all panes */
.view-action[aria-label*="Preview"], .view-action[aria-label*="Edit"] {
    display: none;
}

```

---

<div class="post-metadata">

**Author:** ![gapmiss](https://forum.obsidian.md/user_avatar/forum.obsidian.md/gapmiss/32/32136_2.png) [@gapmiss](https://forum.obsidian.md/u/gapmiss)\
**Post date:** [January 27, 2023, 6:42pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/233 "2023-01-27T18:42:58Z")

</div>

Snippet to shrink “pinned” tabs and add a border.

```css
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) {
  width: 55px !important; 
  max-width: 55px !important; 
}
div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) .workspace-tab-header-inner {
  border: 1px solid hsla(var(--color-accent-hsl), .33);
}

```

When a “pinned” tab is also “active”, the tab’s width reverts to it’s original. Removing the `:not(.mod-active)` section of the rule will keep the “pinned” width.

---

<div class="post-metadata">

**Author:** ![holroy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/holroy/32/77699_2.png) [@holroy](https://forum.obsidian.md/u/holroy)\
**Post date:** [January 27, 2023, 8:53pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/234 "2023-01-27T20:53:07Z")

</div>

> [@gapmiss](#):
>
> ```auto
> div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) {
> width: 55px !important; 
> max-width: 55px !important; 
> }
> div.workspace-tab-header:has(div.mod-pinned):not(.mod-active) .workspace-tab-header-inner {
> border: 1px solid hsla(var(--color-accent-hsl), .33);
> }
> 
> ```

What do you need for this to become active? I can’t get it to work in Obsidian 1.1.9 on macOS.

---

<div class="post-metadata">

**Author:** ![gapmiss](https://forum.obsidian.md/user_avatar/forum.obsidian.md/gapmiss/32/32136_2.png) [@gapmiss](https://forum.obsidian.md/u/gapmiss)\
**Post date:** [January 28, 2023, 12:11am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/235 "2023-01-28T00:11:14Z")

</div>

For myself, it works as expected on default Obsidian theme. Have you disabled your current theme and seen if it works?

---

<div class="post-metadata">

**Author:** ![holroy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/holroy/32/77699_2.png) [@holroy](https://forum.obsidian.md/u/holroy)\
**Post date:** [January 28, 2023, 12:14am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/236 "2023-01-28T00:14:51Z")

</div>

Didn’t work in default theme nor minimal theme.

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [January 28, 2023, 5:24am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/237 "2023-01-28T05:24:20Z")

</div>

It works for me on MacOS.

By “active” @gapmiss means the pinned tab is in focus, i.e. you are working on that particular note. When you move to another note tab and therefore leave the pinned tab, the latter shrinks.

---

<div class="post-metadata">

**Author:** ![gapmiss](https://forum.obsidian.md/user_avatar/forum.obsidian.md/gapmiss/32/32136_2.png) [@gapmiss](https://forum.obsidian.md/u/gapmiss)\
**Post date:** [January 28, 2023, 12:56pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/238 "2023-01-28T12:56:42Z")

</div>

@holroy What version of Obsidian are you using?

I am on macOS w/

Current version: v1.1.12  
(Installer version: v1.1.9)

The pinned tabs CSS, posted above, uses the CSS selector `:has()`. This is only available on the latest Obsidian versions, w/ an upgraded Electron engine, which has the latest Chrome CSS features.

Please note, the `CSS` posted above has not been tested thoroughly and is meant as a starting point for further exploration and refinement.

---

<div class="post-metadata">

**Author:** ![holroy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/holroy/32/77699_2.png) [@holroy](https://forum.obsidian.md/u/holroy)\
**Post date:** [January 28, 2023, 3:12pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/239 "2023-01-28T15:12:16Z")

</div>

Obsidian version 1.1.9, with a newish installer. Electron 21, chromium 106. I’ve already tested in another context, and I do have the `has:` selector, so that is not my issue.

---

<div class="post-metadata">

**Author:** ![kadmos](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/439d5e/32.png) [@kadmos](https://forum.obsidian.md/u/kadmos)\
**Post date:** [February 21, 2023, 9:40am UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/240 "2023-02-21T09:40:34Z")

</div>

Is it possible to reduce the opacity of the bold and italics tokens (in editor view)? See these images for what I want to achieve:

![not-reduced](https://forum.obsidian.md/uploads/default/original/3X/6/4/645cb494791ea2c86d7fd4c34ef688f1a8960651.png)

→

![reduced](https://forum.obsidian.md/uploads/default/original/3X/f/c/fc959975c63ef7067c4dac7db5f4438f2ca98b48.png)

I’m using the minimal theme btw.

---

<div class="post-metadata">

**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\
**Post date:** [February 21, 2023, 12:30pm UTC](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/241 "2023-02-21T12:30:32Z")

</div>

@kadmos Try this:

```css
/* for bold */
.cm-formatting.cm-formatting-strong.cm-strong {
  font-weight: 300;
}

/* for italics */
.cm-em.cm-formatting.cm-formatting-em {
  font-weight: 600;

}

```

Adjust the numbers as per your wishes.

[Previous page](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474.md?page=11)

[Next page](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474.md?page=13)