1
Firefox Customs
64 readers
2 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
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.
3
4
5
6
7
8
10
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!
11
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"]) {
...
}
12
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!
13
14
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!
15
16
17
18
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
How do I get rid of this blue border on focus? Ps: apologies for poor formatting.
19
This colour does not follow my accent colour in KDE plasma. How do I customise it? Edit: I think it appears in focus state.
20
22
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!
23
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. PD: I'm using Firefox beta.
24
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.
25
hi, I'm asking for help to solve this inconvenient when I try to replace the default wallpapers in newtab page. Fist of all I'm using the developer Firefox version that use beta version to do this.
I have activated this preference in about:config page:
browser.newtabpage.activity-stream.newtabWallpapers.enabled to true
after that I replaced the wallpapers thumbnails successfully with the next code:
/* Miniaturas de wallpapers */
/* Dark */
.wallpaper-input.dark-landscape { background-image: url("../newtab/wallpaper-dark.png") !important; }
.wallpaper-input.dark-panda { background-image: url("../newtab/wallpaper-dark2.png") !important; }
.wallpaper-input.dark-color { background-image: url("../newtab/wallpaper-dark3.png") !important; }
.wallpaper-input.dark-sky { background-image: url("../newtab/wallpaper-dark4.png") !important; }
.wallpaper-input.dark-mountain { background-image: url("../newtab/wallpaper-dark5.png") !important; }
.wallpaper-input.dark-beach { background-image: url("../newtab/wallpaper-dark6.png") !important; }
but when I try to replace the wallpaper for the first image in newtab page it don't work with the path I used to use, for example this code:
body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url("../newtab/wallpaper-dark.png") !important;
}
and only works when I use a url for the new image like this:
body:has(#dark-landscape[aria-checked="true"]){
--newtab-wallpaper-dark: url(https://i.imgur.com/It1Ugaa.png) !important;
}
so I wonder if is my mistake or is a Firefox bug, or maybe there is a trick to solve it? cause I would like to use local images and not urls.
view more: next ›