I'd like to center the address bar and make it so it resizes itself to the length of the URL so that all the side buttons it contains are always right next to URL. (Like bookmarks star, zoom indicator, notification etc.) Any ideas?

Github:

https://github.com/Bali10050/FirefoxCSS

To get some life into the new sub or what they call it

Client: https://wefwef.app

Userstyle (userContent.css):

@-moz-document url-prefix(https://wefwef.app){
.css-wpk5zl{margin: 0 -12px !important}
.toolbar-background{ border-radius: 10px !important; border: none !important}
main.inner-scroll.scroll-y, .item-native, ion-content.ios.content-ltr > div > div > div > div, ion-tabs > div.tabs-inner > ion-router-outlet > div.grey-bg.ion-page > ion-content.ios.content-ltr > div{background: #060606 !important}
ion-item-sliding{border-bottom: 8px solid #060606 !important}
ion-item.item.ios > div.css-1n7bavo{background: -moz-Dialog !important; border-radius: 10px !important; border-bottom: none !important}
ion-tab-bar{ order: -1 !important; }
.button-native{background: none !important}
.ios.in-toolbar, .toolbar-background{background: #0d0d0d !important}}

Hello! I want to change the color of the icons when hovering over them in the depuration toolbox zone, currently I can change the background color but not the color of the icon itself. Here's an image:

The one in red is an example of a button I would like to change.

I have changed other buttons but I don't know why it's different in this zone.

Thanks!

Hello! I want to change the color of the buttons when hovering over them in the toolbox, I have managed to change the background-color but for some reason I cannot change the color of the actual button. Here's an image to show it:

I changed the background to yellow but the button is white still. I used this code:

.devtools-togglebutton:hover, .devtools-button:hover {
  background: yellow !important;
}

Hope someone can help. Thanks!

(Sorry for any mistakes it's my first time using Lemmy)

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

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!

Perhaps not fitting exactly for this community because it's about a website, but hey c'mon its customizing :) Apply via userContent.css or Stylus or something.

Only tested with "darkly-red" style that you can select from your user settings.

Let's have this post here also...

As a part of the front-end technical modernization the old xul box model is being replaced with modern flexbox all around the UI. Relevant bug 1820534

Previously, just about everything used display: -moz-box but in Firefox 113 the default display model was changed to modern display: flex instead.

What this means first-hand is that all legacy box model -related properties will not do anything anymore so things like -moz-box-ordinal-group, -moz-box-orient, -moz-box-direction, -moz-box-align, -moz-box-pack or -moz-box-flex won't have any effect.

The suggested way to deal with this is to just update your styles to use equivalent flexbox properties. Additionally, the old display: -moz-box is treated as invalid property value

Some examples of conversions:

• display: -moz-box -> display: flex
• -moz-box-ordinal-group: 0 -> order: -1
• -moz-box-orient: vertical -> flex-direction: column
• -moz-box-direction: reverse -> flex-direction: row-reverse
• -moz-box-align: center -> align-content: center or align-items: center depending on what you are doing.
• -moz-box-pack: start -> justify-content: flex-start or justify-items: flex-start
• -moz-box-flex: 10 -> flex-grow: 10

Notes about order vs. -moz-box-ordinal-group: order supports negative values, whereas ordinal-group does not. Default value of order is 0 but default of ordinal-group is 1 so you might need to change what value to apply for it to have any effect.

Also, see this firefox-dev post for more information.

Will anyone think to simply go elsewhere?

Hello! I have changed a few websites appearance with the userContent.css, but I'd like this to only apply to normal browsing, and not to private browsing. the UserChrome instead I'd like to be applied for both normal and private browsing. Is this possible? searching the web didn't give me any useful result... thanks in advance!