Hi everyone,

I'm currently using the awesome WaveFox theme. One of its features is a colored line that appears on top of the active tab to easily visualize which one is selected.

By default, this line is a cyan/light blue color, but I would really like to change it to white (#FFFFFF).

I've been tweaking my userChrome.css for a while, but I can't seem to find the right selector or variable to modify it.

Here is what I know so far:

1. The developer mentioned that: > "The color is taken from the theme context. The system theme - accent, light/dark - blue/cyan, and the AMO - fill color of the tab."

2. How to disable it: The developer provided this snippet to completely remove the line (sharing it here as a clue for the selector, though my goal is to change the color, not delete it):

.tabbrowser-tab[visuallyselected] .tab-background
{
    box-shadow: none !important;
}

Does any of you guys have some idea on how to change the line color?

Be it changing it only for this line, or be it changing globally the color from which the line takes the color from, I'm fine with both ways.

Hello,

I had this snippet of code for the menuBar for ages (the menuBar is the bar that appears when pressing alt), but FF149 update apparently broke it?

/* Replaces menubar items text ("File Edit etc.") with icons */

#main-menubar > menu {
  fill: currentColor;
  height: var(--uc-menubaritem-height, 28px);
  width: var(--uc-menubaritem-width, 30px);
  -moz-context-properties: fill;
  padding: 3px !important;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px !important;
}
#main-menubar > menu > :is(.menubar-text, .menu-text) {
  display: none;
}

#file-menu {
  background-image: url("chrome://devtools/skin/images/tool-storage.svg");
}
#edit-menu {
  background-image: url("chrome://browser/skin/customize.svg");
}
#view-menu {
  background-image: url("chrome://devtools/skin/images/command-frames.svg");
}
#history-menu {
  background-image: url("chrome://browser/skin/history.svg");
}
#bookmarksMenu {
  background-image: url("chrome://browser/skin/bookmark.svg");
}
#profiles-menu {
  background-image: url("chrome://browser/skin/device-desktop.svg");
}
#tools-menu {
  background-image: url("chrome://global/skin/icons/developer.svg");
}
#helpMenu {
  background-image: url("chrome://global/skin/icons/help.svg");
}
#tabSharingMenu {
  background-image: url("quickactions.svg");
}

The icons where supposed to be white, but now they appear to be black.

Does anyone know what happened/what changed?

Hello,

I was using this:

#appMenu-fxa-separator { border-image: unset !important; }

to make the separator between account and the rest of the menu (circled in red) look consistent with the other separators, but after the update it stopped working.

I thought that the ID may have been changed so I checked, but ID is still use so I don't know how to fix it :/

Also what happened to the separator between find page and translate (circled in green)? It's the only one what is longer than the rest, would there be a way to make it look consistent with the rest as well?

Hello,

I just got a mba air m4 and was doing my usual userchrome.css/js configuration. I trasnfered all the config files, but noticed that some elements in the context menu that I had hided in my windows laptops were present in the macos firefox.

I thought no big deal, I'll just select the macos selector via browser toolbox, but after enabling the browser toolbox and ticking on disable popup auto hide the context menu still disappears.

This basically bans me from any userchrome coding as I can't see the selector names of elements.

Anyone has any solution? this has been driving me insane for the last 3 hours.

Firefox uses OS native context menus on MacOS, so the context menus cannot be styled with css.

Hi,

Been using iconized menubar since ages, and it never broke.

I'm wondering if FF update broke it or if it is only me having issues with it due to a slight add on the code? (just added an icon for the entry that appears on google meet and other videocall website)

Hello,

I'm looking for a pair of hiking boots to walk on snow without slipping or losing grip. I rarely go in the woods, I'm planning to buy these boots mostly for city/urban walking when there's snow out there. I live in Italy, so USA stuff is hard/impossible/expensive to get.

USAGE: For example, when it's snowing I'd like to bring my nephews/nieces to play outside, launch snowballs to each other, build snowman's etc We'd usually stay in an urban enviroment but sometimes we also go near a more off-road, very small little mini woods.

Another occasion I'd like to have them is to walk around with my partner while it's snowing to enjoy it.

Basically the time usage would be one afternoon length usually, afternoon till mid evening at max.

The last usage would to actually commute around during snow days/heavy rain days.

They'd be use at best 1-5 times a year

In case you may think "You don't need hiking/snow boots for this": While I understand that some may say that for these activities I don't even need hiking boots, but I'd feel more at ease to have then on my feet rather than not. I used to use full leather boots, blackstone ones, and they're hella good, but I slipped once and broke an arm last year, it was painful and I got pretty scared. I'm clumsy so it may as well have been my fault, but I'd just feel more safe with some more sturdy, grippier hiking boots in these situation after that experience.

I was about to purchase Lowa Renegade Evo GTX Mid, then I discovered about PU midsole and read the hydrolysis page on their website and got hella scared of making the wrong purchase...am I overreacting?

Could you guys help me pick a pair that fits my needs?

Hello,

I've already hided the preview of tab name on hover when they introduced it back then with: /* disable preview of a tab name as you hover over it */ #tabbrowser-tab-tooltip { display: none !important; }

but I can't seem to find the selector to hide this new feature as well, so I was wondering if I could get some help :D

Thanks in advance!

Hello,

I've been using this script for ages, up to the point I forgot that ctrl-f to open and close the findbar wasn't a native behavior. Today I noticed it doesn't work anymore and I think it's FF128 that broke it...but I can't seem to see how to fix it.

Anyone's got ideas?

Hello,

basically title.

I often found such icons in CSS snippets, but never truly understood where I could see them all and now that I'm trying to do stuff with icons for my style I would truly benefit understanding how to find all these icons and how I could properly use them.

Thanks in advance to anyone who will try to help me :D

Hello,

I like separators would love to have them everywhere, just kidding, kinda and I was wondering if it was possible to have one between firefox view button and the first tab (like in the shown picture altough the FF view icon is missing there) and another one between the last tab and the "+" to open a new tab.

The code I'm currently using is this one

/* Bring back tab separator lines that were removed in Proton */

.tabbrowser-tab {
  border-inline-start: 1px solid transparent !important;
  border-image: 0 1
    linear-gradient(
      transparent 25%,
      color-mix(in srgb, currentColor 40%, transparent) 20%,
      color-mix(in srgb, currentColor 40%, transparent) 80%,
      transparent 80%
    ) !important;
}

.tabbrowser-tab:hover,
#tabbrowser-tabs:not([movingtab])
  .tabbrowser-tab:hover
  + .tabbrowser-tab:not([first-visible-unpinned-tab]),
.tabbrowser-tab:first-child,
.tabbrowser-tab[selected],
.tabbrowser-tab[multiselected],
#tabbrowser-arrowscrollbox[overflowing]
  > .tabbrowser-tab[first-visible-unpinned-tab],
#tabbrowser-tabs:not([movingtab])
  .tabbrowser-tab[multiselected]
  + .tabbrowser-tab,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[selected] + .tabbrowser-tab {
  border-image: none !important;
}

Which is basically this with less transparency.

Ideally it would be very nice to have a way to get the desired look without altering too much the code above, as I'm using it at the same time with another extensive css sheet and despite the latter being huge (and having it's own separators - which I have currently disabled due to reasons) the code above never gave me headache or trouble, it just worked and was very easy to have the desired amount of transparency set.

Thanks for reading this till the end and thanks in advance to whoever will give this a shot!

Hello, basically title.

I find it very weird that in my profile page I can see "1 post" and "3 comments" near my username, but I'm not able to see them in my profile page.

I have "show read posts" ticked on in the settings, so that's not the issue.

Can anyone help?

Hello guys!

Since I'm really hoping for the whole r/firefoxcss community to move here, I thought about making some content. However, I'm not someone who really knows how to CSS, so my best bet is actually pointing out the stuff I use when I try to do something.

First of all, the ToyfoCSS guide - link

This is a really great guide to learn how to customize FF via CSS. I have learned a lot by reading this, and even if I can't say that I'm now capable of putting every info there into use, I can for sure say that it has helped me a lot understanding other people code and suggestions that were gave to me.

On a post about resources, this deserve the first mention. Of course, as you'll notice by the guide's link, the author is exactly the one who you'd imagine him to be!

Moving to actual code repositories, and keeping the same author, there's MrOtherGuy's FF CSS hacks repo - link

It really has a lot of different customizations, all mostly up to date and working. More over, at least in my use case, the part where I used any of his code hardly conflicted with anything else, and the CSS I use on my FF ain't small. I see this repo as a monolith, something you can build around without having fear.

Speaking of monoliths, a well-deserved mention goes to uc.css,js by Aminomancer - link

This repo contains an extremely huge FF theme that has been pretty useful in my css journey. Every code there is supposed to be used with nightly, but what I really want to focus on with this repo isn't really the theme. This repo, in fact, has been mostly used to me to discover the existance of userchrome.js. I highly suggested anyone to give it a look.

NOTE: this isn't the only uc.js for FF repo out there (eg. xiaoxiaoflood and Alice0075), but it's the one that has had scripts I liked the most and still use, without issue, after years.

Speaking of js, one has to talk of a js loader for FF, and, if you ask me, nothing will ever beat MrOtherGuy's fx-autoconfig - link

::: spoiler spoiler Recurring author, isn't it? :::

From my experience, this is extremely robust and safe loader. It never gave me a problem, even on different systems, and it's a breeze to set up and use.

Going back to CSS customization, I can't help, but mention my favorite FF theme (of which I use a large part of it in my personal FF setup) which is WaveFox by QNetITQ - link

It's a very nice modular theme, has a lot of customization options and the Dev is very responsive. 10/10, nothing else is needed to be said here.

Since the FF113 release isn't too old, I'll also point out my two holy grails that helped me making my setup usable even after the big changes introduced with 113. I'm speaking of these MrOtherGuy's & Aminomancer commits - link 1 & link 2

Lastly, I'll point out SVG Gobbler - link

It is an add-on I used really a lot, especially in the creation of icons (I'm a weirdo and like to replace icons with others I like more, but this often requires me making some modification to other existing icons).

As for other sites where you can find .svg and stuff, the web is your friend. Really, there's an ocean of .svg out there.

I hope I've done some decent content that may turn useful to someone out there.

I'll end this saying that I'm sorry to not have include EVERYTHING that I've stumbled upon and used, but that would've been an infinite list. However, I'd be very happy if, in the comments, people would share their own favorite repo and stuff about FFCSS to compensante the ones I didn't mention!