A bit of CSS help needed
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
A bit of CSS help needed
Just did my yearly ESR update from the 91.12 to the 102.1. At least so far, the only problem with the 102.1 is with the tab.
Tab on the 102 looks like this - no outline and extends beneath the toolbar:
Would like it to look like this - from the 91:
Once I have the basic CSS for this, I can play around with it.
Thanks
Tab on the 102 looks like this - no outline and extends beneath the toolbar:
Would like it to look like this - from the 91:
Once I have the basic CSS for this, I can play around with it.
Thanks
-
- Posts: 848
- Joined: February 12th, 2005, 8:33 pm
Re: A bit of CSS help needed
Have you tried to look at Aris css modifications? They work on all computer platforms. I don't know how my setup would look on a Mac, but I definitely have well defined tabs.
For information, visit: https://github.com/Aris-t2/CustomCSSforFx
and download here (link at the bottom): https://github.com/Aris-t2/CustomCSSfor ... /tag/4.2.0
For information, visit: https://github.com/Aris-t2/CustomCSSforFx
and download here (link at the bottom): https://github.com/Aris-t2/CustomCSSfor ... /tag/4.2.0
Michel Gagnon
Montréal (Québec, Canada)
Montréal (Québec, Canada)
- BruceAWittmeier
- Posts: 3076
- Joined: June 9th, 2008, 10:53 am
- Location: Near 37.501685 -80.147967
Re: A bit of CSS help needed
I am not on a MAC, however try this and see what you get.
Select from the main Menu:
Help > Trouble Shoot Mode > Restart
Troubleshoot Mode option will disable:
- extensions
- themes
- custom settings applied through about:config
- tweaks from userChrome.css file
- tweaks from userContent.css file
After viewing the troubleshooting mode you can revert right back to your customized mode just by restarting your browser.
Select from the main Menu:
Help > Trouble Shoot Mode > Restart
Troubleshoot Mode option will disable:
- extensions
- themes
- custom settings applied through about:config
- tweaks from userChrome.css file
- tweaks from userContent.css file
After viewing the troubleshooting mode you can revert right back to your customized mode just by restarting your browser.
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Thanks both. Actually, besides the tabs issue, seeing some more things now that need attention - among them, URL/Search field outlines are too thick. Aris has been a very big help over the years, and will see what's up with https://github.com/Aris-t2/CustomCSSfor ... /tag/4.2.0
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Awaiting help from Aris. But any help here still appreciated. In the meantime, just discovered that with the 102esr the login here has reverted to the all yellow background. Unable to find my original post asking for a fix to return this to the all white background ("View your posts" errors out).
This was the fix that someone suggested and which was working perfectly in the 91esr until now.
All yellow background again, instead of white. (Note, as a test, if I try a different color for the background, e.g. a total black, it ends up blending the yellow with the black, resulting in a dark plum color, but doesn't remove the original yellow). Maybe someone can suggest a new fix.
The CSS that was working until now:
@-moz-document url-prefix("http:"), url-prefix("https:") {
input:autofill {
color: #0d0a09 !important;
background-color: f6f2f1 !important;
filter: none !important;
}
}
This was the fix that someone suggested and which was working perfectly in the 91esr until now.
All yellow background again, instead of white. (Note, as a test, if I try a different color for the background, e.g. a total black, it ends up blending the yellow with the black, resulting in a dark plum color, but doesn't remove the original yellow). Maybe someone can suggest a new fix.
The CSS that was working until now:
@-moz-document url-prefix("http:"), url-prefix("https:") {
input:autofill {
color: #0d0a09 !important;
background-color: f6f2f1 !important;
filter: none !important;
}
}
- dickvl
- Posts: 54164
- Joined: July 18th, 2005, 3:25 am
Re: A bit of CSS help needed
There is a pref on the about:config page to set the background color of a form that is auto-filled.
ui.-moz-autofill-background = rgba(255, 249, 145, .5)
ui.-moz-autofill-background = rgba(255, 249, 145, .5)
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Many thanks dickvl, set to 255, 255, 255, .5 and now background is white with black text. The way it used to be in the 91.
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Have been trying in vain to get a border outline around tabs in the 102esr, which if not against a dark background just blur together.
Elsewhere, it was suggested to enter, in userChrome.css:
But this is having zero effect, which I'm told is most likely due to some other css causing interference - have tried everything I can think of but unable to find what that might be.
Maybe nothing else, but wonder if there might be some different css for tabs border outlining to try. This is Mac, but apparently OS is not supposed to make any difference.
Elsewhere, it was suggested to enter, in userChrome.css:
Code: Select all
/* tabs border */
.tab-background {
border: 1px solid Black !important;
}
Maybe nothing else, but wonder if there might be some different css for tabs border outlining to try. This is Mac, but apparently OS is not supposed to make any difference.
- dickvl
- Posts: 54164
- Joined: July 18th, 2005, 3:25 am
Re: A bit of CSS help needed
Multiselect seems to be using box-shadow and outline.
https://searchfox.org/mozilla-release/s ... bs.css#554
Did you check this in the Browser Toolbox ?
https://developer.mozilla.org/en-US/doc ... er_Toolbox
https://searchfox.org/mozilla-release/s ... bs.css#554
Did you check this in the Browser Toolbox ?
https://developer.mozilla.org/en-US/doc ... er_Toolbox
- ltsnow
- Posts: 1173
- Joined: March 23rd, 2006, 1:49 pm
- Location: Valdosta, GA
Re: A bit of CSS help needed
I use the Aris custom css as my core and if you want other modifications for your "my_userChrome" file you can go to this website:
https://www.reddit.com/r/FirefoxCSS/
Just do some searching and you can usually find anything you want. I have found a ton of great code there.
https://www.reddit.com/r/FirefoxCSS/
Just do some searching and you can usually find anything you want. I have found a ton of great code there.
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
@Itsnow: Thanks, already know about the redditCSS. In fact, that's where I got the tabs border code, plus some great help for 2 other issues.
Posted almost a week ago to Aris discussions, with no reply; seems to be away, and recently only present very sporadically. The other problem I have is that I'm still using a very early Aris-t2 release, from 2018, which at the time employed a central XML repository to which all the @ settings refer, now discontinued. With his help and others over the years, even with the older release I'm still using, I've always been able to resolve any UI issues with new Firefox versions ...until now.
I suppose I could just wipe everything and use the latest 4.2.0 release, but that would mean finding equivalents to my original settings in the XML release, 99% still working, with some additions over the years, and require an enormous amount of trial and error. Not to say I haven't been going through an enormous amount of trial and error for this damn tabs border outline issue. (Have gone through all the code I can see in my userChrome.css that might have any relationship to the tabs border missing, deleted it, saved and restarted, but no dice). Have even tried adding various CSS from the 4.2.0, but that has gone nowhere, at least for the tabs problem.
@dickvl: Went to the searchfox link you provided, but apart from trying out some various CSS from there that I thought might be related to the tabs border problem, I have no idea what to do with searchfox. Not really sure what to do with "Multiselect seems to be using box-shadow and outline". Not finding it in searchfox, nor anywhere in my userChrome.css. Plus, for the browser toolbox, besides not knowing what I'd be looking for there, the items I should be checking in advanced settings appear with no checkboxes next to them, even in the completely working 91.13esr. Thanks, but unable to jump right in to this without a bit more help.
Posted almost a week ago to Aris discussions, with no reply; seems to be away, and recently only present very sporadically. The other problem I have is that I'm still using a very early Aris-t2 release, from 2018, which at the time employed a central XML repository to which all the @ settings refer, now discontinued. With his help and others over the years, even with the older release I'm still using, I've always been able to resolve any UI issues with new Firefox versions ...until now.
I suppose I could just wipe everything and use the latest 4.2.0 release, but that would mean finding equivalents to my original settings in the XML release, 99% still working, with some additions over the years, and require an enormous amount of trial and error. Not to say I haven't been going through an enormous amount of trial and error for this damn tabs border outline issue. (Have gone through all the code I can see in my userChrome.css that might have any relationship to the tabs border missing, deleted it, saved and restarted, but no dice). Have even tried adding various CSS from the 4.2.0, but that has gone nowhere, at least for the tabs problem.
@dickvl: Went to the searchfox link you provided, but apart from trying out some various CSS from there that I thought might be related to the tabs border problem, I have no idea what to do with searchfox. Not really sure what to do with "Multiselect seems to be using box-shadow and outline". Not finding it in searchfox, nor anywhere in my userChrome.css. Plus, for the browser toolbox, besides not knowing what I'd be looking for there, the items I should be checking in advanced settings appear with no checkboxes next to them, even in the completely working 91.13esr. Thanks, but unable to jump right in to this without a bit more help.
- ltsnow
- Posts: 1173
- Joined: March 23rd, 2006, 1:49 pm
- Location: Valdosta, GA
Re: A bit of CSS help needed
I played around with this and here is some code that will definitely change the borders of the tabs:
#navigator-toolbox {
--lwt-tabs-border-color: transparent !important; }
#tabbrowser-tabs {
--lwt-tab-line-color: transparent !important; }
Transparent, of course, is for no color and you can just change the color to whatever you want. Not sure if that's what you're looking for.
BTW. why don't you just have the tabs on top, which of course is the default? It would eliminate part of your problem (extending beneath the toolbar.
#navigator-toolbox {
--lwt-tabs-border-color: transparent !important; }
#tabbrowser-tabs {
--lwt-tab-line-color: transparent !important; }
Transparent, of course, is for no color and you can just change the color to whatever you want. Not sure if that's what you're looking for.
BTW. why don't you just have the tabs on top, which of course is the default? It would eliminate part of your problem (extending beneath the toolbar.
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Oh man, thanks, I had my hopes up, but that didn't work. Used the following:
This may in the end turn out to be something ridiculously simple that I'm overlooking. Btw, tabs beneath toolbar fixed using this from Aris 4.2.0
Code: Select all
#navigator-toolbox {
--lwt-tabs-border-color: Black !important; }
#tabbrowser-tabs {
--lwt-tab-line-color: Black !important; }
Code: Select all
/* make tabs look like tabs again */
.tab-background {
border-radius: 0px !important;
margin-block: 0px !important;
}
.tab-background[multiselected=true],
.tab-background[selected=true] {
background-color: var(--toolbar-bgcolor) !important;
background-image: var(--toolbar-bgimage) !important;
}
- dickvl
- Posts: 54164
- Joined: July 18th, 2005, 3:25 am
Re: A bit of CSS help needed
I use code like this to get some separators:
Code: Select all
*|*:root {
--panel-font-size: 1em !important;
--tab-min-height: 30px !important;
--tab-border-radius: 4px !important; /*4px*/
--tab-block-margin: 0px !important; /*4px*/
}
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 3px !important;
}
.tabbrowser-tab {
padding-inline: 0px !important;
}
.tabbrowser-tab .tab-content {
padding-block: 0px 0px !important;
}
.tab-background:is([multiselected="true"],[selected="true"]) {
border-top-color: var(--tabs-border-color) !important;
border-top-style: solid !important;
border-bottom-color: transparent !important;
}
.tab-background:not([selected=true],[multiselected=true]) {
border: 1px solid rgba(0,0,0,.20) !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
}
.tab-background {
border-radius: var(--tab-border-radius) !important;
margin-block: var(--tab-block-margin) !important;
}
/* userContext - tab-context-line */
.tab-context-line {
-moz-box-ordinal-group: 1;
margin-inline: 10px !important;
}
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--identity-icon-color) !important;
margin: 0 0 !important;
}
-
- Posts: 968
- Joined: December 30th, 2008, 3:59 pm
Re: A bit of CSS help needed
Thanks dickvl, will try that code as soon as I get a chance.