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

[Aris-t2]

Make sure you updated to the most recent version of this projects files "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 and https://github.com/Aris-t2/CustomCSSforFx/issues/189.

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

Trying to make CSS code ready for Firefox Quantum (57+)? Remove all @namespace references. They are the reason, if your code refuses to work.

Application/hamburger button in tabs toolbar? Look here: #46

Things this project will not target/recreate

• curved tabs
• 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
  • moving bookmarks toolbar to windows bottom is possible
• 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
• preference/options window
• additional location bar
• favicon in location bars identity box
• moving menubar items to a different toolbar
• restart button
• ... many more

[rebop]

@ Aris-t2

Just getting to your last (appreciated) replies. A long day so may not be remembering everything I did days ago, but neither of these solutions worked. The first still had both sides of the button dark bold when nothing was active to move forward or back to. the second had a good size, but lacked the two line display of description then url below.

I have not tried 2.56 yet. No time.

~Bob

---

@Aris-t2 OK, I had an import causing issues to your code: buttons_on_navbar_classic_appearance. Now i have commented that out in user_Chrome.css I am closer again, but not quite:

Back is always shown as activated. Lost the style to the buttons. Background of button changes color instead of the arrows:

~Bob

---

Without your latest code and without that imoposrt, I get no border on the forward button and back always active. Otherwise ok:

---

Arrghhh, changed my other buttons so added this import back: @import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/

[Aris-t2]

buttons_on_navbar_classic_appearance.css.css should achieve the best possible result in this case. Do not forget to set colors inside general variable file, if you are using the complete package.

Btw. You can edit posts and add more content to it, if nobody replied after your last post. No need for four posts in a row. ;-)

[AldegarDespoina]

@Aris-t2 Hello, I'm trying to change the firefox logo in the home page but i can't seem to make it work properly.

When i examined the logo though inspect element

Enabled: https://i.postimg.cc/76R6y0pb/Checked.png

Disabled: https://i.postimg.cc/8cDtbfzX/Uncheck.png

The code i used:

@-moz-document domain() { .search-wrapper .logo-and-wordmark .wordmark { opacity:0 !important; no-repeat center center; position: absolute; } .logo { background: url("https://i.postimg.cc/bJtgQHHj/Firefox-Chrome.png") }

[Aris-t2]

This works for me inside userContent.css:

.search-wrapper .logo-and-wordmark .logo {
  background: url("https://i.postimg.cc/bJtgQHHj/Firefox-Chrome.png") no-repeat center center !important;
  background-size: 100% 100% !important;
  display: inline-block !important;
  height: 97px !important;
  width: 97px !important;
}

[AldegarDespoina]

@Aris-t2 Thank you!

[rebop]

@Aris-t2

Noted on editing messages :) Just getting back to this. I had a few days keeping me away from this project. I was making no progress on the button states nor location drop-downs. buttons_on_navbar_classic_appearance.css does come closest but never changes the arrow states to light gray when there is not forward or back page to go to. Was no need to change colors other than button background color.

Should I move to 256 and try what has changed there in relationship to buttons? Any other fix to get the states active as they are in 56?

And as to the location dropdown, which might be what you removed above, I cannot get that nice two line display as in 56:

Thanks!

~Bob

UPDATE

I changed to "compact" and the buttons changed, but work in all states! And and icons are a more pleasant size. All I changed. Now if I could get that with the other icons would be perfect. And the location drop down, of course.

UPDATE

Tonight's insomnia got the dropdown 98% of the way there :) Only tweak I cannot find is how to increase the second line font size:

Not a show stopper. So that and the buttons and I should be good for quite some time.

~Bob

[Aris-t2]

@rebop

Should I move to 2.5.6

That is up to you. Changelog shows what got changed.

And as to the location dropdown, which might be what you removed above, I cannot get that nice two line display as in 56.

Like I already said, there is no 1:1 copy&paste version of it here. The available stuff comes close to the old one, but is not exactly the same as before. Take it or leave it. ;-)

I changed to "compact" and the buttons changed...

Different modes, different button appearance. "Compact" goes into the same direction old Firefox' small button mode did, but the buttons are bigger. The "connected" big buttons are only for "normal" button mode. The ones offered in 2.5.6 also support "touch" mode. In "compact" mode all buttons have the same shape, there is no overlapping of back and forward buttons and therefore no need of masking button transparency.

Only tweak I cannot find is how to increase the second line font size

Fx64-67: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx64.css#L100 Fx68+: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx68.css#L100

[nostromov]

README.md issue, last section reads:

Telemetry / data collection (suggestion: disable / set to 'false') and the problem is - even though the beginning of the file states "Downloads for Firefox Quantum (60+)" - some of the about:config preferences which are listed are no longer present in FF 67.x

experiments.enabled about:config?filter=experiments.enabled experiments.activeExperiment about:config?filter=experiments.activeExperiment experiments.supported about:config?filter=experiments.supported

... And there's a nice (!) GitHub project, among many, which deals with updated about:config privacy and security issues; originally published @ the gHacks website and now hosted on GitHub (also mirrored on GitLab for anybody not willing to support Micro$oft ;)):

https://github.com/ghacksuserjs/ghacks-user.js/

For anyone reading, please keep in mind that it is PRIMARILY meant for (new!) Tor Browser and it does take a LOT of editing - in order to regain much "regular" functionality, over -total- security and privacy; such as having to comment-out their (enabled) default setting for (and there are a lot moar, as well):

// user_pref("privacy.resistFingerprinting.letterboxing", true); // [HIDDEN PREF]

&& there are plenty more, which hinder functionality for the normal user! :)

P.S. In case anyone's interested, here's my (current) edit; which I try to keep up to date, often:

https://pastebin.com/raw/YnHqvWQN

^^ Some of the things NOT included in this user.js are:

about:config?filter=browser.sessionstore.max_resumed_crashes

about:config?filter=browser.search.context.loadInBackground

about:config?filter=browser.search.context.loadInBackground

about:config?filter=browser.sessionstore.warnOnQuit

about:config?filter=browser.tabs.insertRelatedAfterCurrent

about:config?filter=browser.tabs.loadDivertedInBackground

about:config?filter=network.http.referer.XOriginPolicy
about:config?filter=network.http.referer.XOriginTrimmingPolicy

*Hope it helps! =)

EDIT: Btw., not a flame (!), however this can -perhaps- be worth noting: "FACT: CHEF-KOCH plagiarizes and passes off other people's work as his own #323"

[Pizzapops]

Looks like the 6-12 Nightly update made changes to about:addons. Mozilla dropped buttons for a three dot drop-down menu. Typical Mozilla, add clicks, add visual clutter and waste screen real estate. Really messes with my compact customization.

[rebop]

@Aris-t2

@rebop

Should I move to 2.5.6

That is up to you. Changelog shows what got changed.

And as to the location dropdown, which might be what you removed above, I cannot get that nice two line display as in 56.

Like I already said, there is no 1:1 copy&paste version of it here. The available stuff comes close to the old one, but is not exactly the same as before. Take it or leave it. ;-)

I changed to "compact" and the buttons changed...

Different modes, different button appearance. "Compact" goes into the same direction old Firefox' small button mode did, but the buttons are bigger. The "connected" big buttons are only for "normal" button mode. The ones offered in 2.5.6 also support "touch" mode. In "compact" mode all buttons have the same shape, there is no overlapping of back and forward buttons and therefore no need of masking button transparency.

Only tweak I cannot find is how to increase the second line font size

Fx64-67: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx64.css#L100 Fx68+: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx68.css#L100

Perhaps not communicating well in the wee hours. I did change to 2.56. The reason I asked is the changelog mentioned back buttons and I wondered if that was the source of a fix for my frustration there. I did update and got VERY close on the dropdown. The only thing I would like to enhance there would be the small font on the second line of each listing. Line 100 did not change that for me at all, even with a dramatic font size change. As I said, not a showstopper and I did try just that line before. For some reason has no effect for me.

As to back and forward buttons I thought it odd they functioned as expected (but not aesthetically) in compact mode. I thought I must be doing something wrong (as I learn to play in this sandbox) preventing me from getting the desired result. As an aside, it does not work any differently with the default theme, so not a theme issue.

So I think I made a good bit of progress.

Thanks.

~Bob

[Aris-t2]

@Pizzapops

extensions.htmlaboutaddons.enabled > false will use the old about:addons as long as that pref is present.

[Pizzapops]

@Aris-t2 Thanks for the config fix. I saw Martin Brinkman's GHACKS post about userChrome.css and userContent.css being disabled when 69 is released. Any idea if the old about:addons will disappear then.

[Aris-t2]

It will definitively disappear one day, but I have no idea when it will happen. Shouldn't about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true work past release of Fx69 final too?

[Speravir]

Ping: (German for @Aris-t2 ) Du nutzt viermal display: -moz-box in Stildateien. Siehe bitte in Camp Firefox:

• Großer … Relaunch #473
• Im selben Thread beginnend mit #479 über mindestens 2 Seiten, am wichtigsten aber sicherlich #484
• Dann nochmal in Mein Firefoxforum Style, #3.
• Und nicht CSS, sondern JS: Wenn Du ins Forum reingehst, solltest Du rechts oben eine Benachrichtigung sehen wegen einer Nachfrage zu Deinem Throbber-Skript.

[rebop]

@Aris-t2

Another night of insomnia and I got MUCH, MUCH closer to "my" ideal back and forward buttons. The state issue was due to code you suggested I had to remove to activate, and then lots of searching, testing, tweaking... Just need to find why THESE states separate the two icons:

To get the "merge" I used:

  display: block !important;
  content: "" !important;
  width: 32px !important;
  height: 22px !important;
  -moz-margin-start: -28px !important;
  -moz-margin-end: -9px !important;
  border-radius: 10000px !important;
  position: relative !important;
}

I have a hunch where that might be, but tired. Will search further.

~Bob

---

Got it. Needed these as well:

#main-window:not([uidensity=compact]) #nav-bar #back-button + #forward-button:not([disabled="true"])::before,
#main-window:not([uidensity=compact]) #nav-bar #back-button + #forward-button[disabled="true"]::before {
  display: block !important;
  content: "" !important;
  width: 32px !important;
  height: 22px !important;
  -moz-margin-start: -28px !important;
  -moz-margin-end: -9px !important;
  border-radius: 10000px !important;
  position: relative !important;
}

---

@Aris-t2

Any chance you could point me to where I can play with the toolbar height for the navbar as well as the padding between the navbar and menu bar?

This was my look in 56:

And now in 68:

Thanks.

[Aris-t2]

@Speravir Some of the used code is ancient and as long as it works I never though about changing it. This will be done in the future once it stops working.

@rebop Play with these values and increase or decrease them:

:root {
  --toolbarbutton-outer-padding: 2px !important;
  --toolbarbutton-inner-padding: 6px !important;
}

[nollinvoyd]

Firefox 68.ob9,Windows 10 Pro, CustomCSSforFx 2.5.6

---

The update from Firefox 68.ob9 to Firefox 68.ob10 broke the addon page .css

Firefox 68.ob9

Firefox 68.ob10

[Aris-t2]

extensions.htmlaboutaddons.enabled > false or https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userContent.css#L56 (won't look as before, but offers some tweaks for the new ui)

[bendover22]

This is outside of CustomCSS main features, but if anyone knows a quick answer - great. If not, OK. Some addons that have true "notification popups" (boxes) put the popups right over the tab bar. They're in the way to work on tabs at the right end. Can the notifications be moved & what controls their position? I didn't find any CSS rules or supported API options to allow moving them.

[Aris-t2]

@bendover22 It is impossible to tell without knowing the exact ids/classes of those notification boxes/popups. Try to catch them using dev tools like mentioned on main page (if even possible).

Also try to modify some generic notification tags:

.global-notificationbox,
.notificationbox-stack,
notification {
// do something
}

[nollinvoyd]

@Aris-t2

extensions.htmlaboutaddons.enabled > false or /classic/userContent.css@master#L56 (won't look as before, but offers some tweaks for the new ui)

That about:config tweak reversed the damage, but I'm curious whether to expect any other unexpected or unwanted symptoms from changing extensions.htmlaboutaddons.enabled to false

[Aris-t2]

Not for a while, but Mozilla will drop support for the "old" addons manager sooner or later like happened with everything else they removed or changed.

[happysurf]

How to hide the alert in ad-dons page (version 67) that say: Firefox is changing how extensions work in private browsing.......

[Aris-t2]

In userContent.css:

#private-browsing-notice {
  display: none !important;
}

[Pizzapops]

I know this was a futile effort considering Mozilla's current intents for the about:addons page. It was good exercise for a 75 year old brain.

[Pizzapops]

@Aris-t2 Is there any way this could be turned into a script that would work with your addons_manager_alternative_appearance scripts? Web developer/inspector isn't helping. My attempts so far are failures. Yes, I do realize that the variable, card-heading-image, or url("chrome://mozapps/skin/extensions/themeGeneric.svg") must be used instead of the image used here.

<html>
<head>
<title>Theme graphic tooltip</title>
</head>
<body>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 400px;
background-color: #F5F5F7;
color: #000;
text-align: center;
border-radius: 4px;
border: 3px solid #66BFFF;
padding: 2px;

/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: 40px;

}/* resize theme-screenshot */
.tooltip .tooltiptext img{
    width: 100%;
    height: auto;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
 }
 </style>

 <body style="text-align:center;">
 <h2>FxQ Theme Tooltip</h2>
  <div class="tooltip">Theme Name 
  <span class="tooltiptext"><img src=" https://addons.cdn.mozilla.net/user-media/version-previews/full/2622/2622591.png"></span>
 </div>
 </body>
 </html>

[Aris-t2]

I don't think the CSS styles for the "old" add-ons manager are compatible with the new add-ons manager ("extensions.htmlaboutaddons.enabled>true").

[Pizzapops]

@Aris-t2 I am well aware the "new" add-ons manager breaks the current CSS. The grid add-on manager shown earlier is not a mock-up but a functioning CSS mod for the "old" manager. All 4 of my **extensions.html*** are set to false. I plan on using these settings until Mozilla drops them. I still prefer your alternative compact appearance.

[Aris-t2]

OK, can you share the code?

[Pizzapops]

Here is userContent.css and aboutaddons associated css files. Definitely not pretty or pixel perfect. Breaks easily. See enclosed disclaimer. FxQgrid.zip

[Aris-t2]

Using your grid, have you tried to only enable a few things from the "addons_manager_alternative_appearance scripts", like item colors, borders, font settings? I mean only stuff that does not change any position, padding, margin, width, height etc. you set within your scripts. That should work with your scripts.

[Acid-Crash]

Hi @Aris-t2. Recently I've been playing around with Tor Browser and noticed that _appbutton_on_navbar_colorautocolor57p.css doesn't have a dedicated color to it. It's #nav-bar #PanelUI-menu-button has [label="Tor Browser"]. Could you please concider adding one (a black or dark purple color might be a good idea)?

[Aris-t2]

I will add purple color known from private browsing for Tor browser menu button on next update.

[Aris-t2]

@Acid-Crash New update went online today.

[Acid-Crash]

@Aris-t2 It looks like a typo went through. The button was orange after update. I've managed to turn it purple by changing

#nav-bar #PanelUI-menu-button[label="Tor-Browser"]

to

#nav-bar #PanelUI-menu-button[label="Tor Browser"]

Tor Version 8.5.3 (based on Mozilla Firefox 60.7.0esr) (64-bit) Win10x64

[Aris-t2]

Looks like different locales use different labels. My locale used indeed "Tor-Browser" instead of "Tor Browser". I will add support for both.

[Acid-Crash]

Ah, this makes sense. Ok then, if needed I'm on RU locale

[krystian3w]

Please add:

browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar - false

on readme.md section.

[thisd]

Thanks for this great project. Can you tell me what the name of the blue / white theme in the third window here is?

https://github.com/Aris-t2/CustomCSSforFx/blob/master/previews/classic_ui.png

[ImSpecial]

Hey Aris! So FF68 broke something I'm noticing, I now get this grey line as shown here on my toolbar (tabs_below_navigation_toolbar_fx65) https://i.imgur.com/9WrfNuP.png

I think it's caused by this "add tab" button here. https://i.imgur.com/26xDxUr.png

Removing this button from my bar removes the grey line but also shifts the tabs up a bit causing more issues, I'd rather keep the button there, any idea how I can shrink this button/padding by a pixel or so?

[Acid-Crash]

Hi @Aris-t2 Since new about:addons is just around the block (FF68) I've been playing around with it trying to make it more compact. Unfortunatelly it is still has a lot of vertical scrolling. Maybe you can advice is it possible to change it's layout to two columns (left one for enabled stuff and right one for disabled)?

[ImSpecial]

So Aris, I was able to fix this with a little tweaking of values on my own to find the right sweet spot for me, not sure if you have a better fix to removing that line, if you do I love to hear it as editing your files seems like a not so future proof thing to do, but anyways... https://i.imgur.com/6vnkuwD.png

I have another issue, there are theses tab dividers and they don't quite line up now, how can I reduce these dividers by a hair?

https://i.imgur.com/Zt8E0KA.png

when hovered: https://i.imgur.com/8j65PBN.png / https://i.imgur.com/Bh7RAwd.png

[EliSadaka]

When using the classic popup with two lines location bar tweak in FF68, it looks like the bottom padding on each result is too big. Is there a way to make it smaller?

[Aris-t2]

@thisd In the past those themes were the default ones in Firefox or at least the first ones suggested. Can't find them anymore on current releases. Might have been Dark Blue Nebula.

@ImSpecial I think your solution is good. I would have reduce icons padding too to achieve this like done here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_main_content.css#L116

@Acid-Crash Although this is not looking great yet, this is a way to reduce the vertical sizes of add-on list items:

body > div#main > div[current-view="list"] *,
body > div#main > div[current-view="list"] .addon.card,
body > div#main > div[current-view="list"] {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

@EliSadaka You could try to reduce the 47.5 px values here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx68.css#L12 Or this value: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx68.css#L70

[Acid-Crash]

@Aris-t2 thx for the hint, any ideas on two columns layout?

[EliSadaka]

@Aris-t2 Thanks, lowering that second value you linked to fixes it.

[Achille-Grs]

Hi @Aris-t2 !
In Firefox 68 I have a small grey line like shadow and I don't like it. (see pic) Is there a way to delete the line? Thank you!

[thisd]

Thanks Aris-t2. Sadly, it is not the same theme. I guess I can try to recreate the theme myself.

[ImSpecial]

@Aris-t2

Call me crazy but this doesn't seem to change anything on my end, I've tried various values and the "+" icon does not seem to change, can you confirm this still works?

/* size of new tab tabs '+' icon */
.tabs-newtab-button .toolbarbutton-icon {
  min-width: 0px !important;
  min-height: 0px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  background: unset !important;
  box-shadow: unset !important;
}

[ImSpecial]

@Achille-Grs Had a similar issue and saw a similar question on reddit about this. Reddit Link

But Aris-t2 would have to chime in on what and where exactly his CSS is doing this thing.