# Customizing Firefox's UI with CSS

**URL:** <https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656>\
**Category:** Operating Systems, Editors, and Tools\
**Tags:** firefox\
**Created:** [June 4, 2021, 7:06pm UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656 "2021-06-04T19:06:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [June 4, 2021, 7:06pm UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656/1 "2021-06-04T19:06:14Z")

</div>

Firefox just rolled out a redesign and some people want to change the looks of the tabs. It’s easy to do with CSS:

> **[Firefox 89 tab appearance](https://amitp.blogspot.com/2021/06/firefox-89-tab-appearance.html)**
>
> Firefox 89 has a new appearance, removing features (ugh) and annoying some people while delighting others. It can be disabled by setting...

All of Firefox’s UI can be modified with CSS. To view the styles, open the browser console (right click and choose “inspect element” or ctrl+shift+i). Find the settings and turn these checkboxes on:

 ![Firefox dev tools settings](https://forum.codeselfstudy.com/uploads/default/original/2X/2/2e8bf56b6af15489630a9f145624927f7dd90a9f.png)

Then press alt to open the menu on the top of the screen. (On Mac it’s probably already in the top bar.) Choose: Tools → Browser Tools → Browser Toolbox. Accept the request for “remote debugging”. A browser inspector will then open, which gives you access to inspect and modify the browser’s UI.

Save the custom CSS in a [userChrome.css file](https://www.userchrome.org/how-create-userchrome-css.html) to persist any changes made with the “Style Editor” tab in the Browser Toolbox.

See also: [How to view a browser's default CSS styles](https://forum.codeselfstudy.com/t/how-to-view-a-browsers-default-css-styles/1975)

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [June 4, 2021, 10:07pm UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656/2 "2021-06-04T22:07:13Z")

</div>

I followed [the tutorial](https://amitp.blogspot.com/2021/06/firefox-89-tab-appearance.html) and am happy with the results. These are my current `userChrome.css` settings while using the new dark theme. ([Fira Code](https://fonts.google.com/specimen/Fira+Code?preview.text=ligatures%20-%3E%20%3E%3E-%20%3E%3E%3D%20%3C%3D%20%3D%2F%3D&preview.text_type=custom) is the font I use in my editor and terminal.)

 ![Firefox UI customization](https://forum.codeselfstudy.com/uploads/default/original/2X/e/e17cd81f989abad02ab305633344afefbfbf2db9.png)

```css
/* Makes the current tab stand out. */
tab {
    font-family: Fira Code !important;
}

.tabbrowser-tab[selected] .tab-label {
    color: black !important;
}

.tabbrowser-tab[selected] .tab-content {
    background: #fcb731 ! important;
}

.tabbrowser-tab:not([selected]) .tab-content {
    background: #585060;
}

/* Turns off a lot of the UI animation */
*, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [June 4, 2021, 11:27pm UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656/3 "2021-06-04T23:27:39Z")

</div>

Actually, that code above doesn’t take into account [Firefox container tabs](https://forum.codeselfstudy.com/t/firefox-configuration-tips-thread/665).

Some of the comments on [Hacker News](https://news.ycombinator.com/item?id=27392685) explain how to show the container colors:

```auto
  /* Make the tabs not blend into the background */
 .tabbrowser-tab:not([selected]) .tab-content {
     background: #58506040;
     border-radius: 4px 4px 4px 4px !important;
     margin-bottom: 4px !important;
     margin-top: 4px !important;
 }

```

> Setting transparency on the _background_ element doesn’t cover up the container color.

There are also some rules to revert the changes using CSS here:

[https://twitter.com/Mailia/status/1399776195345006593](https://twitter.com/Mailia/status/1399776195345006593)

and here:

[https://kevincox.ca/2021/06/03/firefox-proton-tweaks/](https://kevincox.ca/2021/06/03/firefox-proton-tweaks/)

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [June 5, 2021, 3:29am UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656/4 "2021-06-05T03:29:03Z")

</div>

Here’s an updated version that works with container tabs:

```css
*, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

tab {
    font-family: Fira Code !important;
}

.tabbrowser-tab[selected] .tab-label {
    color: black !important;
}

.tabbrowser-tab[selected] .tab-content {
    background: #fcb731 ! important;

    /* This line creates space for container tab indicators. */
    margin-top: 4px !important;
}

.tabbrowser-tab:not([selected]) .tab-content {
    background: #585060;
    margin-top: 4px !important;
}

```

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [June 6, 2021, 5:17am UTC](https://forum.codeselfstudy.com/t/customizing-firefoxs-ui-with-css/2656/5 "2021-06-06T05:17:07Z")

</div>

Another interesting thing those settings I mentioned in the top post will do is show all the code for any installed browser extensions. Just go to the “Debugger” tab and scroll down in the “Sources” on the left.

 ![image](https://forum.codeselfstudy.com/uploads/default/original/2X/c/c14ae5890fc442965be7ee5b036c35f90c40ccfa.png)