[!] GENERAL discussion, feedback, questions belong here! (v9)

[Aris-t2]

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163, https://github.com/Aris-t2/CustomCSSforFx/issues/189 and https://github.com/Aris-t2/CustomCSSforFx/issues/211.

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

• a CTR like plugin/application to generate ready-to-use CSS
• curved tabs (thanks those are finally gone!)
• old complete themes

Things not possible with CSS

• more toolbars like add-on/status bar (CSS can not create new toolbars)
  • displaying full sized status popup below window content is possible
  • bookmarks toolbar at windows bottom is possible (simulated addon-bar)
• new buttons (CSS can not create new buttons)
• additional menuitems (CSS can not create new items)
• custom/new/different functions for buttons/menuitems/menus
• activity indicator (see 'custom JS scripts')
• preference/options window
• additional location bar
• favicon in location bars identity box (see 'custom JS scripts')
• moving menubar items to a different toolbar
• restart button (see 'custom JS scripts')
• ... many more

[Aris-t2]

Sorry, you are using OS titlebar, try this:

#main-window #nav-bar-customization-target ,
#main-window[tabsintitlebar] #nav-bar-customization-target {
  -moz-margin-start: -30px !important;
}

[jmcken1]

@Aris-t2 That works, thanks! All good now.

[gashtal]

@Aris-t2 Great, thank you for pointing me in the right direction. I have a hard time finding relevant info because I don't really know the names of all these different buttons and bars in Firefox's interface.

[Yaron10]

Hello Aris,

Is it somehow possible to set the width of .urlbarView to that of the address bar? That is: I don't want the results all over the window width but rather bind it to the address bar.

---

.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
}

This has some glitches on my machine.

Go to https://github.com/Aris-t2/CustomCSSforFx and then press "Issues" (https://github.com/Aris-t2/CustomCSSforFx/issues). The title of "Issues" is shorter and i occasionally see some "leftovers" from the previous longer title. Hovering over the title (or refreshing it in some other way), those "leftovers" disappear.

---

.searchbar-textbox { direction: ltr !important; }

If I'm not wrong, prior to FF 71 I was able to press Ctrl+Shift and change the text direction. It won't work now.

.searchbar-textbox { text-align: left !important; }
.searchbar-textbox[dir=rtl] { text-align: right !important; }

results in a partially hidden caret.

---

Thank you. I'd appreciate your help.

[Achille-Grs]

Hi @Aris-t2!
You gave me a code a few months ago for the new tab button background. Now with Firefox 71 stopped working. (see pic 1) Can you make something for this please? (see pic 2) Thank you a lot!

[Speravir]

Regarding preferences_alternative_appearance_aero.css:

I will look into that.

Edit This should cover it again:

Mmh, I was too fast with the thumb. This did not work that good, but it gave me some hints.

(Side remark: I should have been more self confident first, I just was confused by these page elements I do not see in the inspector.)

This works here (moz-document part left out):

window > stack > hbox,
.navigation,
page,
page .dialogBox .groupbox-title {
  background: linear-gradient(to bottom right, #edf6ff,#dbeaf9,#edf6ff,#dbeaf9) !important;
}

I do not know whether the first selector group is necessary that special, but given these generic names I wanted to make it as specific as possible. The .navigation could be omitted, but it looks better this way in my opinion.

I intentionally left out the .sticky-container. Instead I made this slightly darker here, but this is just a matter of taste.

You also added #preferences-stack which I cannot find, too. Is this in a nightly?

[Aris-t2]

@Yaron10

Is it somehow possible to set the width of .urlbarView to that of the address bar?

You can force both to have the same width, but there is no way to detect the width of one and use it on the other in CSS.

This has some glitches on my machine.

Might be related to your tab with, font settings, dpi setting etc. No difference here for long tab titles.

If I'm not wrong, prior to FF 71 I was able to press Ctrl+Shift and change the text direction.

Can say anything about that. Never used text direction changes.

@Achille-Grs You have to play with the used values in this code snippet to adjust the button/icon size:

:-moz-any(.tabs-newtab-button,#tabs-newtab-button) .toolbarbutton-icon {
  padding: 4px !important;
  margin: 0px !important;
  width: 26px !important;
  height: 26px !important;
}

@Speravir The mods I made were done on Nightly, true. I added your fix for Fx 71.

[Speravir]

The mods I made were done on Nightly, true. I added your fix for Fx 71.

If you’ve found #preferences-stack in a nightly and it looked better, then add it, as well. So we do not have to bother in the future (it is just possible that it gets removed again in a final version).

Edit: I think this change for the sticky container looks quite good:

.sticky-container {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, rgb(228,240,252), transparent) !important;
}

rgb(228,240,252) or #E4F0FC is exactly between the 2 other colours you have in the other linear gradient. If you think this still could be improved, do it.

[Achille-Grs]

@Aris-t2 I forgot to tell you.... I want the new tab button grey background bigger when mouse go above and hover.

[Yaron10]

Thank you Aris. I appreciate it.

[Infernoflower]

@Infernoflower

If you do not need the "appbutton in titlebar", disable the corresponding option in your userChrome.css file. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L345

Once the option is disabled you can use the options for the "button on navigation toolbar": https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L314

Thank you very much. I'd like to have "appbutton in titlebar" enabled, but I want to know how to fix the problem involving the app button going offscreen that I documented above. Is there any way to do this in the current userChrome?

[albino1]

Quick question, I'm trying to switch to using all Dark Themes and I'm getting this bright highlight edge at the top of all my tabs, which is really distracting with multirow. There's so many different tab related CSS options that I thought I would just ask which is the right one to edit rather than trial and error.

I'm using classic_squared_tabs.css and here's a screen shot of the bright edge I'm talking about:

Also, you can't see it in this screenshot because the tab titles are short, but the tab gradient/fade where the tab title gets darker and fades out from left to right is really aggressive in dark mode. It makes them look smudged or dirty. If you have any idea idea where I can throttle that down like 50-75% I'd love to fix that while I'm at it. Thanks!

Edit: And while I'm at it, if you know of a way to tone down those addon buttons on the toolbar that would probably be nice to do as well :)

[Aris-t2]

@Achille-Grs

On hover only? Try this:

:-moz-any(.tabs-newtab-button,#tabs-newtab-button):hover .toolbarbutton-icon {
  padding: 4px !important;
  margin: 0px !important;
  width: 26px !important;
  height: 26px !important;
}

@Infernoflower Edit the file you are using for the Fx71 workaround and edit the margin values until they match your config:

e.g. appbutton_in_titlebar_fx71_fix.css

#main-window[tabsintitlebar] #nav-bar #PanelUI-button {
  position: relative !important;
  margin-top: -26px !important;
  margin-bottom: 34px !important;
}

@albino1 Look here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/classic_squared_tabs.css#L138

[Achille-Grs]

@Aris-t2 Thank you so much! You fixed again!!! :-D

[albino1]

@albino1 Look here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/classic_squared_tabs.css#L138

I tried changing that line and it looked the same. I even changed it to:

border-top: 1px solid red !important;

And:

border-top: 1px solid rgba(255,0,0,0.5) !important;

And there's no visual difference for any of the tabs, selected or otherwise. Am I missing something obvious?

[krystian3w]

Are you having real dark text in your theme?

:-moz-lwtheme-darktext

I suppose this is problem, why won't work!

[Infernoflower]

@Infernoflower Edit the file you are using for the Fx71 workaround and edit the margin values until they match your config:

e.g. appbutton_in_titlebar_fx71_fix.css

#main-window[tabsintitlebar] #nav-bar #PanelUI-button {
  position: relative !important;
  margin-top: -26px !important;
  margin-bottom: 34px !important;
}

Thank you so much for your help.

[krystian3w]

https://www.w3schools.com/css/

[albino1]

Are you having real dark text in your theme?

:-moz-lwtheme-darktext

I suppose this is problem, why won't work!

Hmm, well I have these tab text lines changed to white so I can read them against the dark tabs:

https://github.com/Aris-t2/CustomCSSforFx/blob/6ac8997c850aa161bd4bbc4f12b88804737d27df/classic/config/custom_tab_text_settings.css#L10

In Firefox customization (right-click, customize) I have Themes set to dark, and then in Windows I have both Default Windows Mode and Default Apps Mode set to Dark.

[krystian3w]

Try use red on:

.tabbrowser-tab[selected]:-moz-lwtheme-brighttext .tab-content {

[albino1]

That worked! So it seems I needed to edit the -moz-lwtheme-brighttext, thanks @krystian3w!

I don't suppose you know where to modify this left-to-right dark fade/gradient on the tabs:

Also, any idea how to change the background color of the active tab? When using the Default Theme and with Windows set to Light Apps the active tab background is brighter than the other tabs, which makes it much more obvious which is active. Right now I'm just outlining it in light grey to make it stand out, like in my gradient screen shot example above.

[Aris-t2]

To remove the blur from tab title enable tab_titles_remove_blur.css.

Most colors have to be set by editing the variables inside config/color_variables.css file, if you are using the complete package.

[albino1]

Enabling tab_titles_remove_blur.css works, thanks @Aris-t2! I actually like the blur on the light theme, but in the dark theme it's just too much. Out of curiosity is there any way to keep like 50% of the blur? Looking in that file it's just unset, so there's no obvious way to modify it.

I actually forgot color_variables.css even existed. However, I changed this line:

--classic_squared_tabs_active_tab: linear-gradient(to top,#f9f9fa,#f9f9fa,#f9f9fa) !important;

To:

--classic_squared_tabs_active_tab: linear-gradient(to top,red,red,red) !important;

And it still looks identical. When using the Default Theme and Light Apps the Active Tab is a different color, so I'm not sure why with the Dark Theme the background of the Active Tab is the same as the Unloaded Tabs. In fact, with the Dark Theme I don't think any of the Tab gradients/colors listed in color_variables.css are being used, because I had to edit classic_squared_tabs.css to change the border colors.

[Aris-t2]

Main variables are only default theme.

  --classic_squared_tabs_hovered_tabs: linear-gradient(to top,#cac7c1,#d5d2cc,#e8e6e2) !important; /* (to bottom,#FF9900,#FF6600) */
  --classic_squared_tabs_other_tabs: linear-gradient(to top,#aeaba5,#c1beb7,#c9c6be) !important; /* (to bottom,#FFCC99,#CCCCCC) */
  --classic_squared_tabs_unloaded_tabs: linear-gradient(to top,#aeaba5,#c1beb7,#c9c6be) !important; /* (to bottom,#FFCC99,#CCCCCC) */

On lw-themes variables are only for hovered and non-active tabs:

  --classic_squared_tabs_lwt-dark_hovered_tabs: linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 80%) !important;
  --classic_squared_tabs_lwt-dark_other_tabs: linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 80%) !important;
  --classic_squared_tabs_lwt-bright_hovered_tabs: linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 80%) !important;
  --classic_squared_tabs_lwt-bright_other_tabs: linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 80%) !important;

The main idea was to not break/change the active tab of a lw-theme as it in most cases connects to the toolbar overlay color set by lw-theme.

But I understand your point and I guess offering an option might be possible anyways.

Should look like this:

:root {
    --classic_squared_tabs_lwt-dark_active_tab: inherit /*linear-gradient(to top,red,red,red)*/;
    --classic_squared_tabs_lwt-bright_active_tab: inherit /*linear-gradient(to top,blue,blue,blue)*/;
}

.tabbrowser-tab[selected]:-moz-lwtheme-darktext .tab-content {
  background-image: var(--classic_squared_tabs_lwt-dark_active_tab) !important;
}

.tabbrowser-tab[selected]:-moz-lwtheme-brighttext .tab-content {
  background-image: var(--classic_squared_tabs_lwt-bright_active_tab) !important;
}

Inherit uses the colors set by the lw-theme. Replacing it with a color or color gradient will offer the result you are looking for.

[Achille-Grs]

Good Morning @Aris-t2! I've made some changes in the code you gave to me, and I thing this is most correct for the new tab button hover background.

.tabs-newtab-button, #tabs-newtab-button .toolbarbutton-icon { padding: 7px !important; margin-left: -2px !important; width: 27px !important; height: 27px !important;

Thanks again!

[albino1]

Awesome, works great, thanks for all your help @Aris-t2!

[Pizzapops]

Scott Adams must be a Firefox user. ;-)

[DavyRay]

I use container tabs, which allow me to open tabs in different containers. There is a little coloured line below the tab title as shown in the screencap below. After installing this CSS package for the first time, this blue line is only visible when the tab is in focus. Before, with no CSS, i could see that blue line no matter what tab i was on. I am not much of a programmer and I looked around, but was unable to figure out what setting needed to be changed in order to make the blue line visible no matter what tab I am on.

What setting would I need to change to accommodate this?

Thanks

[Aris-t2]

The line on container tabs is not compatible to this projects classic squared tabs. If you disable classic_squared_tabs.css lines on all container tabs will be visible.

[gashtal]

Starting from Firefox 71, I am experiencing blurred font (image attached) on the tabs using "classic_squared_tabs". However, this only happens on my 1080p 27" monitor at work and the same configuration does not exhibit this behavior on my 1080p 25" monitor at home. Moreover, I have confirmed that this still happens even if I comment everything in the configuration file except "classic_squared_tabs". Is this related to what is being discussed in the posts above regarding "tab_titles_remove_blur.css" or is it a different issue? (I am home right now and cannot test myself)

[Aris-t2]

Display size 25/27 should not make any difference in this case (except with different HiDPI value), but you can try to disable the blur and report whether visual appearance of tab title improved or not.

[Infernoflower]

Hello, I figured out how to get the add-ons, search bar and other buttons back into the toolbar, but how do I get rid of this space in front of the back button? Here's a picture to show you what I mean:

[Aris-t2]

Did you restore the button position using one of the workarounds/fixes for Fx71+? Anyways, next update will restore the old behavior without requiring fix files.

[AbdAbd10]

hi. i have problem i think after the update 2.9.1 ( addonbar_status_in_addonbar ) is not working is it just me or it have problem and even after the update 2.9.2 it still not working and thx

[Aris-t2]

This will be fixed on next update.

.browserContainer :-moz-any(statuspanel,#statuspanel) {
  z-index: 1001 !important
}

[AbdAbd10]

thank you for responding and sorry to bother you

[Aris-t2]

Its alright, I need to know, if my changes break something. ;-)

[kanade96]

Hey Aris, what setting allows you to enlarge the text size on the address/location bar?

[AbdAbd10]

no it did not break anything for me i just added what u said to ( addonbar_status_in_addonbar ) and it worked

[Acid-Crash]

Hi @Aris-t2 do you have plans on updating _ac_popup_url_and_title_50percentwidth for the magabar update?

[myfonj]

Hi! I'm not using this project ATM, but I'm watching it occasionally; I maintain personal userChrome with few features apparently not present in CustomCSSforFX and wondered if they could potentially fit scope of this project. Namely:

• Aging tabs: unfocused tab slowly crossfades bg/fg, focus resets,
• Numbered tabs: for alt+number switching; sadly not possible to reliably number last tab,
• Variable background for hovered favicons: Favicons have light glow filter by default, changes highlight to potentially even more contrasting background on hover and retains it after.

Overall in action (with the rest of my userChrome) it looks like this:

As seen in the code, they are in "works on my machine" maturity. Should I try to integrate and PR some of it, or is it completely out of scope/interest?

[Aris-t2]

@kanade96

:-moz-any(.searchbar-textbox, #urlbar,#searchbar) {
  font-size: 16px !important;
}

@Acid-Crash Maybe. Like always with Mozillas code changes results will differ from those we got so far.

@myfonj A few nice scripts you have there. They might work with this projects files just fine, but if something does not, disabling classic_squared_tabs.css would switch to browsers default tabs.

[Infernoflower]

Did you restore the button position using one of the workarounds/fixes for Fx71+? Anyways, next update will restore the old behavior without requiring fix files.

No. I'll try enabling the fx71+ back and forward button position workarounds and see if that fixes the problem. Thanks for your help.

[Aris-t2]

@Infernoflower Backup your chrome folder and extract latest release (2.9.2) into it.

Appbutton in (Fx) titlebar is enabled by default again and uses the same code as before.

[kanade96]

@Aris-t2 Thank you.

[Acid-Crash]

Hi @Aris-t2 Just checked v2.9.3 Quick question regarding _ac_popup_megabar_title_and_url_50percentwidth. How can the order be changed? I want URL to be first and title as second (same thing as in _ac_popup_url_and_title_50percentwidth.css).

Also could you please provide an updated example for the custom percentages (for example 40-60)

[Infernoflower]

@Infernoflower Backup your chrome folder and extract latest release (2.9.2) into it.

Appbutton in (Fx) titlebar is enabled by default again and uses the same code as before.

Thanks, but I've tried copying my userChrome script into my profile, but the back button is now completely offscreen and the buttons are still spaced out. Can I fix this, and, if so, which workaround should I use?

[Aris-t2]

@Acid-Crash I posted a custom_css_for_fx_v2.9.4preview1.zip file within 2.9.3 release with new options to test incl. _ac_popup_megabar_url_and_title_50percentwidth.css and _ac_popup_megabar_urlonly.css.

Inside _ac_popup_megabar_title_and_url_50percentwidth.css and _ac_popup_megabar_url_and_title_50percentwidth.css you can find instructions how to change values for title and url to go from 50/50 to e.g. 40/60 ratio.

@Infernoflower Test without your/custom scripts. Afterward put your scripts piece by piece back into _myuserChrome.css to find the one, that causes the issue.

[gashtal]

@Aris-t2 Disabling the blur option in the configuration did indeed fix my problem. Thank you for the great work!

[Infernoflower]

@Infernoflower Test without your/custom scripts. Afterward put your scripts piece by piece back into _myuserChrome.css to find the one, that causes the issue.

Thanks for your help.