1
Firefox Customs
4 readers
10 users here now
Post your unsupported Firefox customizations here!
From the makers of r/FirefoxCSS
Links
Related
Rules
- Posts must have flair!
- Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
- Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
- When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
- Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.
founded 1 year ago
MODERATORS
2
4
Tested in Firefox developer edition
Hi, I used this two files (window_control_placeholder_support.css + hide_tabs_toolbar.css) for tree-tabs but seems like they will need an update. The window controls only shows when press Alt and the menubar shows behind the urlbar.
3
4
Issue in Firefox beta
hi, I set a z-index in 2 elements but don't work and I can't solve it.
I have this code to move the hamburger menu to left top side:
:root:not([chromehidden~="toolbar"]) #PanelUI-button {
position: fixed;
display: flex;
top: var(--windowed-top-padding, 0px);
left: 0px !important;
z-index: 3 !important;
}
and I have this code to move higher the Firefox Sidebar:
:root:not([sizemode="fullscreen"]):has(sidebar-main:not([expanded])) {
& #sidebar-main {
/* Bakground-color necessary for gradient line color */
background-color: var(--lwt-frame) !important;
/* Top-bottom margins */
padding-top: var(--padding-top-left-sidebar) !important;
/* Gradient line */
margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) -
var(--Space-before-gradient-line)) !important;
border-inline-end: 1px solid red !important;
z-index: 2 !important;
}
}
the problem is the hamburger menu stay behind the Sidebar, I wonder why the z-index don't work.
5
6
7
8
9
11
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!
12
hi, I would like to know how to Apply margin to web content but not when a video is in fullscreen? and keep the margin when Firefox is in fullscreen. I mean I would like to apply a margin to web content that not affect when a video is in fullscreen. I used this code:
:root:not([chromehidden~="toolbar"]) {
/* Web content */
& #appcontent{
margin-inline-start: var(--my-vertical-toolbar-width) !important;
}
/* Sidebar + sidebar content */
& #sidebar-box[checked="true"] {
margin-inline-start: var(--my-vertical-toolbar-width) !important;
}
/* Sidebar + sidebar content + web content */
& #sidebar-box[checked="true"] ~ #appcontent {
margin-inline-start: 0px !important;
}
}
but that applies a margin when a video is in fullscreen, I tried too this code but removes the margin when Firefox is in fullscreen:
:root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) {
...
}
13
Hello. When you open the browser toolbox theres a popup message that says if you want to allow the connection and there are three buttons: Accept, deactivate and Cancel. I'm trying to change the style of the deactivate button and I'm not being able to do it. I've tried with this:
button[dlgtype="accept"]:hover,
button[dlgtype="deactivate"]:hover,
button[dlgtype="cancel"]:hover {
color: var(--color) !important;
background-color: black !important;
}
And it looks like this:
I don't know if there's a way to disable that message so that it always enters the browser toolbox.
Thanks for any help!
14
15
Hello! I am trying to move the windows buttons (min, max, close) in the top right corner. I changed my tabs to be under the urlbar. It looks like this:
Thanks for any help!
17
18
19
I tried to set the background colour for my urlbar with
#urlbar-input-container { border: none !important; border-radius: 5px !important; background: light-dark(#ffffffff, #1b1e20ff) !important; }
this works fine for the most part, except on focus it creates some corner effects, which I think might be from the border that gets overlapped somehow.
And this is how it looks on focus without my code
20
This colour does not follow my accent colour in KDE plasma. How do I customise it?
21
23
5
Hello! I was wondering how can I change the colors that appear when you inspect an element. They look like this: And also was wondering how can I change the popup that appears when you right click the style sheets in the style editor in the toolbox. It looks like this: https://imgur.com/a/S47spyg
Thanks!
24
Hi, I used this code and it used to work perfectly, but I tried it just now and I'm having some visual issues like in the screenshot.
1.- the url border (not open, not focus) display 1px inside the url default border.
2.- when urlbar is open the border don't expand properly.
25
hi,
I wonder if is possible to fix this rare behavior when I apply the next css in the new-tab:
body{
backdrop-filter: brightness(99%);
}
if I don't add the filter there isn't a scroll.
view more: next ›