Testing CSS with Firefox - two very small issues

[rebop]

Can I ask a favor for small help?

I have my CSS setup perfectly for Waterox. Took time, but worth it.

I am thinking of using Firefox 90 - same as Waterfox based on. When I use the same chrome its all "close" or even close enough except for two small items:

1. Text on tabs at the bottom is bottom aligned rather than center aligned. Using css/tabs/tabs_below_main_content_fx74.css

2. There is a line next to the hamburger that I would love to remove.

Thanks!

[rebop]

I found and fixed the line after hamburger, but try as I may, cannot find the solution for tab text, icon and even all tabs icon pushed down by 4 or 5 pix. Can someone steer me in the right direction? Thanks!

[Aris-t2]

What exactly causes the text on your tabs to move like that? Default setup with tabs_below_main_content.css enabled looks like this for me:

The separator after the main menu button is an old leftover, that has to be removed. Its gone on latest v4.0.0pre10 build. Look here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/appbutton/appbutton_on_navbar_start_position.css

[rebop]

Thanks so much for the reply, Aris.

I did find out how to remove the separator. Done.

But the text I do not understand nor know where to look?? I have another clue, the ALL Tabs icon is ALSO dropped down 4-6 pix as well. So everything on that bar.

How can I help you help me?

It takes me forever to move to a new build so when 4.0 is solid, I shall, But hours and hours with all the changes I have made.

Thanks again.

~Bob

[rebop]

OK, I so hate to start with a new version, but I have. Your latest release. Halfway done. Two issues at the moment but will wait until I am finished and then post another thread. Hoping to find the tab text and all tabs icon displacement issue. Not in UserContent or My_userChrome for sure.

~Bob

[Aris-t2]

No need for another thread, this one is fine.

Keep in mind, you have to setup everything without your custom tweaks inside my_userChrome.css file first.

There are too many changes inside v4.0.0 files, so it is hard to know how or even if the old code will work.

[rebop]

OK, another 5 or so hours spent to go through every setting and choose the best for me and tweak a few from their defaults. So maybe 12 hours total - whew!

So 3.17 worked pretty well for me in two different browsers - both customized differently but similarly. Now FF 90 with 3.2.2.1 has 10 issues I cannot solve.

Tell me what you would like Aris-t2. One issue per post in this thread? All 10.

I am sure I will learn something and would like to have things closer to desired before I catch my breath and plan for 4.0. In the mean time I will read on it.

Thanks.

[Aris-t2]

Keep all your questions in this thread, no need to open 10 more.

I can only respond to issues you have with Firefox 90+ and Custom CSS v4.0.0.

Everything present in 3.x and gone in V4.0.0 is deprecated.

[rebop]

I was thinking posts, not threads. And I cannot do 4.0 just yet so let me post and do what you can. I am lost trying to find a working browser!

I feel like I need to introduce myself a bit while getting this involved now in CustomCSSorFX.

Been online since 1986. First browser 1993 - Netscape. Windows since 1.0 then skipping to 3.1. Always a power user.

Firefox since I first found it, leanrned how to tweak it and found classic theme restorer. Abandoned after 52 when things changed and went to Waterfox. Classic Waterox was best ever for me and if pages did not break now, I woukld stay there. But too many times I have to open another browser to get somewhere. Their support has waned. They wqere bought. Their phiolosophy changed.

I have tried VERY hard to use G3 Waterfox. It is not perfect. I have Custom CSS that works well for it. The issue is large groups of tabs opening is slow as death and eats memory, CPU and turns the fan on to max and heats all 4 cores.

So, Chrome is not it. Nor Opera. Where to go? So downloaded Firefox Portable 88 to test and play and when I saw it opened tabs with some speed and less resources, put in 12 hours (!) to make CSS work for it, less the issues below.

I have not followed Firefox since 56, I think. SO no idea what Proton is, do I want it, what it means. 88 has updated to 90.1. I could revert and stay at 88 if I can suppress nags for updates - maybe.

I truly do not know what to do for a browser right now.

I use 46 extensions if I recall. Every one working in WF CLassic and Firfox using replacements and alternates. I wish there were a few better cookie managers, session managers, etc. But can live.

So that brings me to the things that I need to tweak a little further with CSS before I even consider 4.0 - if I do need to consider it.

Appreciate knowledge, links, advice.

[rebop]

Things That Do Not Work or I cannot find 3.2.2.1 :) (no particular oder. First is NOT most crucial)

1. Cannot get Back forward close to what I like in this version:

Or this:

And cannot get the mega or search height down like those.

2. Ellipsis is missing. Do not need reader view.

3. Tried this and terrible:

/* @import "./css/buttons/custom_backforward_connected_fx89.css"; /*/ / Fx 89+ */

So, BF button issues as well as mega and search bars

4. /* @import "./css/generalui/classic_drop_indicator.css"; /**/ What IS this?

5. Does not work unfortunately. Does nothing

/* @import "./css/webcontent/autofill_forms_background_white.css"; /**/

6. The NEW version of this does not work. Had to use 3.1.7 version:

/* @import "./css/locationbar/megabar_border_roundness.css"; /**/

7. How can I kill Recommendations Addons Menu Item? Tried all I could google and it stays on the addons page?

8. Bright blue in drop down for suggested sites in megabar? Cannot find where to change it:

9. Can I make the All Tabs popup rows closer together?

10. This is code from you Aris. I do not think it works any longer.

downloads-button,

downloads-indicator-progress-outer,

downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-progress-outer,

downloads-indicator-icon,

downloads-indicator-progress-inner {

background: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar") center center no-repeat !important; list-style-image: unset !important; }

Are there options for the drop don icon and animation?

Thanks.

[rebop]

For 8 above:

[Aris-t2]

1-3: The connected back/forward buttons are available in v4.0.0pre builds. Small button mode never offered connected back/forward buttons or rounded back button.

2: #reader-mode-button { display: none !important;}

4: classic_drop_indicator.css offers a different icon, if you move tabs between windows.

5: autofill_forms_background_white.css: do you have an example website, where this does not work?

6: megabar_border_roundness.css works fine:

7: extensions.htmlaboutaddons.recommendations.enabled > false

8: There newer was an option to change the color there (inside the projects files), but an option to reuse a Win7-like Aero blue color is present: ac_popup_megabar_result_highlighting_aero.css

9: You could try the compact menus option: popup_compact_menus.css

10: Download button code changed. The old one can be deleted.

Are there options for the drop don icon and animation?

Not sure what you mean. There are no "options" for download button or its icon. (Custom toolbar buttons icon settings only change the fixed icon. They do not offer progress, start or finish animations anymore.)

[rebop]

Thanks for the reply. Sorry to be tardy to review.

1. Was not trying for small button mode. Tried EVERYTHING I could find to replicate my results from using CSS 3.1.7 on 2 other browsers with no luck.

Cool on 2-4

5. Every one I try. Facebook. The well - www.well.com should show you a login.

6. Would not work for me at all. Anything I tired to make it better made the radius a semi circle or a square. Nothing in between.

7. Will look at this, but I think it turns off recommendations, but not the category of recommendations. Will try now....

Thanks on 8. I can live.

Will try 9.

Anyway to cusotmize the download button?

Thanks again @Aris-t2 . I will find time for a fresh FF 90 and 4.0. This is helping me learn and catch up.

[rebop]

Actually, for #9 above it turned out to be:

@import "./css/generalui/compact_menus_proton.css"; /**/

And that helped menu padding in several places after I tweaked the values. Thanks for that one.

[Aris-t2]

1. You have to place back and forward button like mentioned here and ensure you are using normal or touch mode.

[back][forward][location bar] - custom_backforward_connected_to_location_bar.css

[back][forward] - custom_backforward_connected.css

5. without autofill_forms_background_white.css

with autofill_forms_background_white.css

6. I can't help you with this. Use the file as provided, it offers the result you can see on my previous screenshot.

7. Use inside my_userContent.css: button[name="discover"] { display: none !important; }

Anyway to customize the download button?

No, there are no options available in this project to customize the downloads button, its icon or animation.

[rebop]

Thanks. I shall play with these.

Likely start playing with 4.0 this weekend.

[rebop]

Seems replies I tried from email missing:

You have to place back and forward button like mentioned here and ensure you are using normal or touch mode. Using normal. Entered the following and got the following:

@import "./css/buttons/custom_backforward_connected_to_location_bar.css"; // @import "./css/buttons/custom_backforward_connected.css"; // I get this:

Hmm, will not let me upload image. But sinele back button as before. No forward.

autofill_forms_background_white.css Just will not work for me. So two issues.

I found this in my_userChrome.css and assume no longer needed, yes? Removing did not improve anything:

main-window:not([uidensity=compact]) #nav-bar #back-button + #forward-button::before,

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 /

7. Use inside my_userContent.css: button[name="discover"] { display: none !important; }

   Perfect. Thanks

Will try image in next post. If not, then description is above.

Thanks.

[rebop]

There's the button image.

[Aris-t2]

Do not use any code you previously used. You need a 100% clean test environment. That means you should only use latest files from this project while running tests.

If you are missing the forward button, you probably have enabled forward_button_hide_when_disabled.css.

4.0.1pre3 (only custom_backforward_connected.css is active)

compact / normal / touch

(only custom_backforward_connected_to_location_bar.css is active)

compact / normal / touch

---

Do not forget, items/buttons have to be in a specific order on your navigation toolbar!

[back][forward][location bar] when using custom_backforward_connected_to_location_bar.css [back][forward] when using custom_backforward_connected.css

[rebop]

Thanks @Aris-t2 But to be sure, this was an experiment with a new version of Firefox for me starting with 88 and then trying to see if I could get the same results using 3.2.2.1 with that that I could with 3.1.7 and Waterfox and older FF, etc.r I got very close. Two things do not work. As far as I can see, everything else does. I have not yet touched 4.0 and will start clean, but as you have seen. I go through every setting and it takes a few days of spare time. Some of my_userChrome has been very helpful to get my desired results. Likely all there came from you years ago.

I have never heard the back forward buttons must be in some order. Here is what I have working now in WF and like:

Will try 4.0 this weekend as mentioned.

Thanks.

[Aris-t2]

Alright, after you tested Firefox 91 and this projects latest files (4.0.x), you can ask remaining questions here: https://github.com/Aris-t2/CustomCSSforFx/issues/404