Need help with userChrome.css for Nightly...
-
- Posts: 19
- Joined: March 1st, 2017, 5:38 pm
Need help with userChrome.css for Nightly...
Hello,
In an effort to better prepare for Firefox 57 and onward, I've taken the liberty of customizing Nightly to replicate my current preferred UI layout.
My personal preference is main toolbar>bookmarks toolbar,tabs bar.
To better illustrate (this is my Firefox UI with CTR customization):
> http://i.imgur.com/cJj2Yiz.png
Thus far, I've been able to get the tabs on bottom to work on Nightly. It looks like this:
> http://i.imgur.com/dTRq3R9.png
As one might be able to notice, there appears to be a small border in between the main toolbar and the tabs bar.
Another issue I've come across is the placement of the bookmarks toolbar.
It isn't shown in the Nightly screenshot above, but the bookmarks toolbar has the default placement of being on top of the main toolbar.
This is the opposite of what I'd like to implement as shown in the first image above.
I've tried to reference valid resources[1][2] to understand how I can get this to work, but I don't know what's valid anymore.
I also tried to install DOM-Inspector but apparently that isn't usable anymore.
To make it more clear: I want to get my UI on Nightly the same as what I have on Firefox currently. I would also appreciate it if there was a way to get rid of that random border in between the main toolbar and the tabs bar.
Can I please get some assistance with this?
TIA
T.R.G.
In an effort to better prepare for Firefox 57 and onward, I've taken the liberty of customizing Nightly to replicate my current preferred UI layout.
My personal preference is main toolbar>bookmarks toolbar,tabs bar.
To better illustrate (this is my Firefox UI with CTR customization):
> http://i.imgur.com/cJj2Yiz.png
Thus far, I've been able to get the tabs on bottom to work on Nightly. It looks like this:
> http://i.imgur.com/dTRq3R9.png
As one might be able to notice, there appears to be a small border in between the main toolbar and the tabs bar.
Another issue I've come across is the placement of the bookmarks toolbar.
It isn't shown in the Nightly screenshot above, but the bookmarks toolbar has the default placement of being on top of the main toolbar.
This is the opposite of what I'd like to implement as shown in the first image above.
I've tried to reference valid resources[1][2] to understand how I can get this to work, but I don't know what's valid anymore.
I also tried to install DOM-Inspector but apparently that isn't usable anymore.
To make it more clear: I want to get my UI on Nightly the same as what I have on Firefox currently. I would also appreciate it if there was a way to get rid of that random border in between the main toolbar and the tabs bar.
Can I please get some assistance with this?
TIA
T.R.G.
Last edited by LIMPET235 on August 15th, 2017, 6:54 am, edited 1 time in total.
Reason: Image tags removed to restore the forum layout.
Reason: Image tags removed to restore the forum layout.
- LIMPET235
- Moderator
- Posts: 39956
- Joined: October 19th, 2007, 1:53 am
- Location: The South Coast of N.S.W. Oz.
Re: Need help with userChrome.css for Nightly...
Moving this to the Builds forum...
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)
-
- Posts: 19
- Joined: March 1st, 2017, 5:38 pm
Got it... almost.
I somehow forgot I was able to move the bookmarks toolbar (I don't change much).
So, essentially, I've been able to achieve my desired UI/layout.
The only problem that still remains (for me) is the random border that separates the main/navigation toolbar with the tabs bar.
I was tipped off by this source that I can actually see the CSS being used on the browser—which incidentally was something I've been looking for.
The particular resource also confirmed that the article that I found on this site is most likely outdated.
Can anyone try and look at the CSS file for Nightly and maybe try and decipher where that random border is coming from?
So, essentially, I've been able to achieve my desired UI/layout.
The only problem that still remains (for me) is the random border that separates the main/navigation toolbar with the tabs bar.
I was tipped off by this source that I can actually see the CSS being used on the browser—which incidentally was something I've been looking for.
The particular resource also confirmed that the article that I found on this site is most likely outdated.
Can anyone try and look at the CSS file for Nightly and maybe try and decipher where that random border is coming from?
- Frank Lion
- Posts: 21177
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: Got it... almost.
You know that your 'source' dates back over 6 years, right? So some of that is also outdated.That Random Guy wrote:I was tipped off by this source
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
.
-
- Posts: 19
- Joined: March 1st, 2017, 5:38 pm
Re: Got it... almost.
First, thank you for telling me that. I'm sure I would've noticed when I looked at the post time-stamp, but since I was able to see what the post was referencing to, I had assumed that was still a valid way to see what was underneath.Frank Lion wrote:You know that your 'source' dates back over 6 years, right? So some of that is also outdated.
Second, knowing this now, what can I do to actually see what's going on (since I can't use DOM-inspector anymore)?
- Frank Lion
- Posts: 21177
- Joined: April 23rd, 2004, 6:59 pm
- Location: ... The Exorcist....United Kingdom
- Contact:
Re: Got it... almost.
To be honest, you and others will have a problem.That Random Guy wrote:Second, knowing this now, what can I do to actually see what's going on (since I can't use DOM-inspector anymore)?
Experienced theme/UI guys can read the code directly, with difficulty, but even that is harder than it should be, as Firefox write their code in the most truly bizarre and over-complicated way ever seen. Plus, those guys will not be around, like the old days. It's one thing to help users with code snippets if you need to check the code anyway, quite another if they are not needing to or even using the browser.
Your best best is to use 56, which possibly(?) still has a proper DOMi which can look at the UI code, remember/write down what you see and hope that 57 hasn't changed it.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
.
-
- Posts: 18
- Joined: August 12th, 2017, 8:52 am
Re: Need help with userChrome.css for Nightly...
You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".
-
- Posts: 19
- Joined: March 1st, 2017, 5:38 pm
Re: Got it... almost.
I guess it's a miracle I even got what I have now then. I'll keep trying.Frank Lion wrote:To be honest, you and others will have a problem.
Experienced theme/UI guys can read the code directly, with difficulty, but even that is harder than it should be, as Firefox write their code in the most truly bizarre and over-complicated way ever seen. Plus, those guys will not be around, like the old days. It's one thing to help users with code snippets if you need to check the code anyway, quite another if they are not needing to or even using the browser.
Your best best is to use 56, which possibly(?) still has a proper DOMi which can look at the UI code, remember/write down what you see and hope that 57 hasn't changed it.
Thanks,
T.R.G.
-
- Posts: 19
- Joined: March 1st, 2017, 5:38 pm
Re: Need help with userChrome.css for Nightly...
Thanks!tauio111 wrote:You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".
-T.R.G.
-
- Posts: 409
- Joined: February 28th, 2008, 3:48 am
- Location: PA
Re: Need help with userChrome.css for Nightly...
Also see: https://developer.mozilla.org/en-US/doc ... er_Toolboxtauio111 wrote:You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".
for an alternative method (the info there about debugging popups might also be useful). Not nearly as useful as DOMi combined with Inspect Context used to be though.
Meta bug for its various deficiencies
https://bugzilla.mozilla.org/show_bug.cgi?id=1090423
-
- Posts: 18
- Joined: August 12th, 2017, 8:52 am
Re: Need help with userChrome.css for Nightly...
ach! Didn't know about the remote debugging on Firefox, this is rather perfect.custom.firefox.lady wrote:Also see: https://developer.mozilla.org/en-US/doc ... er_Toolboxtauio111 wrote:You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".
for an alternative method (the info there about debugging popups might also be useful). Not nearly as useful as DOMi combined with Inspect Context used to be though.
Meta bug for its various deficiencies
https://bugzilla.mozilla.org/show_bug.cgi?id=1090423
Thanks