General discussions, feedback, questions belong here (v1, v2 -outdated- use v3)

[Aris-t2]

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.

Trying to makes CSS code Firefox 57+ ready? 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)
• old search (some things are not compatible to Fx 57+)
• custom/new/different functions for buttons/menuitems/menus
• activity indicator
• preferences window
• additional location bar
• favicon in location bar
• moving menubar items to a different toolbar
• restart button
• ... many more

[Aris-t2]

While I understand the old about:home/about:newtab page requires different tweaks than offered in this project, I'm not sure what the code is for when using Fx57+.

On clean profile with only LW-theme is no merge findbar on top within bookmarks / address bar (show 2px/1px to hight).

That was the goal. The "connection" between findbar on top and top toolbars is now correctly working with default theme and compact themes. Third party lw-themes do not change findbars color what caused the "overlapped" findbar to look faulty, so I changed findbars position in this case.

Possible find values activate old about:home and about:newtab?

I don't know a way to restore the "old" about:home and about:newtab pages and keep them working. Here is the old about:home for example, but its search box does not work: chrome://browser/content/abouthome/aboutHome.xhtml

[ghost]

I don't know a way to restore the "old" about:home and about:newtab pages and keep them working. Here is the old about:home for example, but its search box does not work: chrome://browser/content/abouthome/aboutHome.xhtml

No possible when is use normal installer (overwrite files for ever and lost older style).

---

C:\Program Files\Mozilla Firefox\browser\features

Which addon is newtab / home page? Delete all and I lost redevelop new tab / home (blank pages now).

[Aris-t2]

It does not work that way. "about" pages are part of Firefox default internal files. I suggest to switch to Waterfox instead Firefox 57, if you need your "old" about:home page.

[ghost]

I recove addons form C:\Program Files\Mozilla Firefox\browser\features and new tab / home is now show. After minutes comeback older design:

Images

|  |  | |:---------------------------------: |:------------------------: |

---

Maybe Firefox detected broken new design (no see options new tab page and no works button import bookmars in this tab).

---

In Firefox 57b3 PL portable is same bugs with new tab and browser after restart recover older:

Image


Maybe PL Build is Buggy?

[Aris-t2]

Firefox beta 14 does not show that page for me. After removing everything .\browser\features\ folder I only get a blank page opening 'about:home', because of missing activity-stream@mozilla.org.xpi file.

Run your tests with Portable Firefox 57 beta 14 (EN/PL) and Nightly 58 using clean unmodified profiles without anything installed/changed/added.

I don't understand why you are so persistent about getting old about:home page working. It got replaced by a new one and even, if you could load/restore it somehow, it would not work properly (on current beta), because of all the new stuff it is supposed to do in Fx57+.

[rayman89]

Is it possible to move the new tab button to the selected tab?

Is it possible to make the downloads button to open the "Show all downloads" window instead of the dropdown?

[Aris-t2]

Is it possible to move the new tab button to the selected tab?

New tab button can be either a "tab", when on tabs toolbar after last tab, or a toolbar button on the other toolbars. No idea what you wanted to say.

Is it possible to make the downloads button to open the "Show all downloads" window instead of the dropdown?

No, the tweaks here can only change the ui not browser features. There are some download related WebExtensions on AMO. Take a look, maybe one of them helps you.

[ghost]

https://github.com/Aris-t2/CustomCSSforFx/issues/3#issuecomment-342007339 - I have to full remove Firefox. Bug after update FF 56β to 57β and maybe Windows CU to FCU.

Firefox portable is not full portable :confused: or not full close installed version.

New tab is responding in clean profile on clean install Beta FF.

---

We will see how the update progresses Firefox to 58 Beta.

[rayman89]

@Aris-t2

New tab button can be either a "tab", when on tabs toolbar after last tab, or a toolbar button on the other toolbars. No idea what you wanted to say.

I would like the "new tab button to show over the current tab like "the close tab" button Like this

[ghost]

Strange look :persevere:

[Aris-t2]

@userOperaFF I have a hard time to understand your posts. Are you using Google translator or something like that? I'm asking, because some phrases do not make any sense to me, sorry.

I have to full remove Firefox. Bug after update FF 56β to 57β and maybe Windows CU to FCU.

Export your Firefox bookmarks and maybe other settings (Ublock etc.), uninstall Firefox, backup and remove your old Firefox profile. Install latest Firefox beta, import bookmarks and other stuff you exported before. Without recreating a new Firefox profile reinstalling Firefox won't make much difference, if something is broken.

Firefox portable is not full portable 😕 or not full close installed version.

Firefox Portable is fully portable, but you have to close your current Firefox before starting Portable Firefox. Alternatively you can move .\PortableFirefox\Data\settings\FirefoxPortableSettings.ini to .\PortableFirefox\FirefoxPortableSettings.ini and set AllowMultipleInstances=true inside ini. That way you can use Portable Firefox and you current Firefox simultaneously.

New tab is responding in clean profile on clean install Beta FF.

No idea what this could mean.

We will see how the update progresses Firefox to 58 Beta.

Should not be any different from other updates.

@rayman89 New tab button/tab does not work and never did work like that. CSS can not achieve that.

[Poonkraft]

Hi Aris-t2, these css modifications are great, thank you for your work. FF57 is almost an acceptable browser with your magic (though I am still waiting/hoping for a Waterfox version with all the crapola removed). I have one question (or feature request): is it possible to turn off the fade in/fade out (and any other effect) for panels and menus?

[Aris-t2]

Waterfox 55/56 will keep the old ui as far as I know.

Try to disable all animations about:config > toolkit.cosmeticAnimations.enabled > false and additionally add this code to userChrome:

popup, menupopup, panel {
  transition-duration: 0.01ms !important;
}

[aolszowka]

Your documentation for supported features is very good/comprehensive but I was wondering if you would consider an update to CTR that would maybe highlight features that will not make the transition to CustomCSSforFX?

My modifications are usually pretty light; reading the documentation I think the things I'll have the hardest time reproducing is probably the old Drop Down Search. According to your comment "It is possible to rebind the old search bar code, but it does not work properly. Because of that it is not part of this collection." I assume this means we'll need to look for an alternative solution?

I also use Status-Bar-4eva; am I out of luck there? I really liked the status messages down at the bottom to tell me what was going on and hover on links.

I think the rest of my customization should be covered here's what my Firefox looks like:

[Poonkraft]

@Aris-t2 You da man! That little code did the trick, thank you very much. I've already had the about:config setting, but that did not do much. Is there a reason for the 0.01 ms instead of 0.00? I tried both way, did not see any difference.

I am using the latest Waterfox as my main browser, but FF57 is noticably faster, especially when it comes to opening new windows and tabs. I hope there will be a Waterfox 57, but Mr Alex hasn't put out a roadmap for the future yet. I'll wait and see.

[Pizzapops]

Do you know if the add-on overflow tray can be customized? It would be nice, if it could be a side toolbar with icons only.

[Aris-t2]

@aolszowka I will look into adding a compatibility info to CTR.

The old search only works partly, so I decided not to add it here. There are no alternatives I know of.

Adding new toolbars like Status-4-Evar does is not possible in Fx57+. Status messages are still at windows bottom, but not in a toolbar. It looks more like a one-lined popup.

@Poonkraft

0.01 ms instead of 0.00

Firefox often ignored css rules, if timings or delays were set to 0. Maybe this bug was fixed in the past.

@Pizzapops Yes.

.widget-overflow-list .subviewbutton-nav::after,
#overflowMenu-customize-button,
#widget-overflow-mainView .toolbarbutton-text {
  display: none !important;
}
#widget-overflow-mainView toolbarbutton {
  padding: 0 !important;
  margin: 0 !important;
}
#widget-overflow-mainView {
  min-width: 0 !important;
  width: 30px !important;
}

[ghost]

Are you using Google translator or something like that?

No, This is my bad grammar and poor vocabulary = no sense sentence created ;(

---

New tab is responding in clean profile on clean install Beta FF.

No idea what this could mean.

Whout remove firefox (uninstall) and copy only bookmarks I could not changed options new tab show elements (not change mark / unmark options):

image


Bug gone after unistall Firefox. And not comeback older version design :)

[sir-harlekin]

May i ask, how i can move the appbutton to the left of the tabbar on FF 58b1?

Its mentioned as a doable "hack", but i can not seem to make it work.

[Aris-t2]

It is only possible to move to navigation toolbars left using -moz-box-ordinal-group rule. The trick/'hack' I use to place it in windows top left corner is position.

position: fixed; or position: absolute; followed by top/left/right rules makes it possible to cheat the button into tabs toolbar, but you will have to move tabs to the right to get the effect you are looking for. Everything you need, you can find in this file: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/buttons/appbutton_in_titlebar.css

[sir-harlekin]

Update: Its working, it was just the position inside my .css file.

Hey there,

its kind of working.

I have a few questions. I am using

@-moz-document`

 url("chrome://browser/content/browser.xul") {
    #PanelUI-menu-button {
        list-style-image: url("chrome://branding/content/icon16.png") !important;
        -moz-image-region: auto !important;
    }
}

to replace the standard navbar icon with the Firefox one.

This is however, not working when i try to hack things into tabbar.

I suppose i have to alter

#main-window[tabsintitlebar]` #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button {

-moz-appearance: none !important;
  -moz-box-ordinal-group: 0 !important;
  position: fixed !important;
  height: 22px !important;
  margin: 0 !important;
  -moz-margin-start: -1px !important;
  border: unset !important;
  box-shadow: unset !important;
  padding-left: 0px !important;
padding-right: 0px !important;

}

Can you help me one step further?

[Aris-t2]

This should help

/* brand icon */
#PanelUI-menu-button {
  list-style-image: url("chrome://branding/content/icon16.png") !important;
  -moz-image-region: auto !important;
}

/* move tabs to the right */
#TabsToolbar {
  -moz-padding-start: 32px !important;
}

/* button position */
#PanelUI-button {
  -moz-box-ordinal-group: 0 !important;
  position: fixed !important;
  top: 2px !important; /* how far away it should be from top edge */
  /*left: 0 !important; */ /* how far away it should be from left edge */
}

/* move button further away from the top, if menubar is visible */
#toolbar-menubar:not([autohide="true"]) ~ #nav-bar #PanelUI-button,
#toolbar-menubar:not([inactive="true"]) ~ #nav-bar #PanelUI-button {
  top: 22px !important;
}

[Achille-Grs]

@Aris-t2

Hi and goodmornig Aris!

I have a small glitch in Library button. (see pic) When I click on it displays the icons in size, width:100px - height: 25px like navigator toolbar buttons. Is there a way to fix this?

Thank you!

[Aris-t2]

Add this to your code to override button size inside library popup.

#nav-bar .cui-widget-panelview toolbarbutton .toolbarbutton-icon,
#nav-bar .cui-widget-panelview toolbarbutton .toolbarbutton-badge-stack {
  width: 16px !important;
  height: 16px !important;
}

[Achille-Grs]

@Aris-t2

Thanks a lot again!!!!! and I hope do not tire you with my questions because I have one more problem :-) The code works perfecty (pic 1) but I forgot to tell you, when I click Bookmarks or History button, ths happen again (pic 2)

[Aris-t2]

No problem. I though I used the main class for all widget panels before, but I was wrong ;-)

#nav-bar .cui-widget-panel toolbarbutton .toolbarbutton-icon,
#nav-bar .cui-widget-panel toolbarbutton .toolbarbutton-badge-stack {
  width: 16px !important;
  height: 16px !important;
}

You will have to adjust the code for Firefox 58 again, because button dimensions changed.

[pwrsurge]

Is the noiabuttons branch of CustomCSSforFx still working? Currently using FF 57.0 64bit on Ubuntu linux and the noia icons don't display properly on the titlebar. It seems that css pixel coordinates are ignored so the entire toolbar_noia.png image file is displayed so the only thing displayed is a blurred horizontal line for each button.

Tested latest version of classic and that works fine but I prefer the noiabuttons theme.

[Pizzapops]

[C][Win10][Fx58] The variation in Tab-bar height seems to be a puzzle. Std Fx58 gains 3px when going to full screen. With your custom Chrome it looses 7px. With Fx52 and Fx forks it varies from gains of 18 to 28 px. Is it possible to make the size consistant?

[Achille-Grs]

@Aris-t2

23 days ago I wrote you about download button problem. Right now the same problem occurred on the Reload button. (click here https://we.tl/iDF9JlNUhY to see the video) I hope you make it and fix it :-)

P.S: I'm sending you some useful tools. (click here https://we.tl/cnIBizWWBI to download) If you need something, please do not hesitate to ask me

[Aris-t2]

@pwrsurge Are you maybe combining code not supposed to be combined?

Extracted NB code to chrome folder on Ubuntu 17.10 x64, enabled Noia light theme and the results look like this for me.

Buttons can not be placed on the titlebar.

@Pizzapops Have you disabled the draggable space in customizing mode?

Tested a clean setup of these files and my results are:

• normal window mode: 3px
• normal window mode + draggable space: 12px
• maximized window mode: 0px

I will add an additional mode where the tabs toolbar will be moved a few px down in normal mode, so it matches the default appearance of CTR+Fx56.

@Achille-Grs You have to additionally adjust download button code like this:

#main-window[uidensity=compact] #nav-bar #stop-reload-button .toolbarbutton-animatable-box {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

Find the correct values required for your code.

Edit Code tweak

[Achille-Grs]

@Aris-t2

Hmm.... I thing this code is for download button. It's ok this button. I need fix it code for the "reload-stop button" :-))))))

[Aris-t2]

Code is quite similar ;-) Updated in previous post. If you need it for other modes, either replace compact with touch or remove the uidensity completely.

[Achille-Grs]

And for the correct values I have to change only the numbers? Whether you believe it or not, I'm totally irrelative LoL :-))))))

[Aris-t2]

Yes, only the values. Most of time trying to create new stuff it is just trial and error. Change values, restart Firefox, see whats changed, repeat until its working.

[pwrsurge]

@Aris-t2 Thanks, I extracted all files from the archive again and it now works. There must have been a corrupted file or something. Looks great, the only thing left to try and restore is the classic status bar but i guess that might not be possible anymore. I was using Status-4-Evar before but that no longer works with FF 57.

[Achille-Grs]

Aaaaaaa finaly!!!!! This is the correct code: #main-window #nav-bar #stop-reload-button .toolbarbutton-animatable-box { margin-left: 42px !important; margin-right: 42px !important;

I hope you find useful the tools!

Thank you very much!!!!!

[Achille-Grs]

@Aris-t2

I found a new code! "Bookmarks Favicon Changer"! You can set a background color or an image file. (see pic) For more bookmarks than one, you have to copy-paste code for different bookmark and you change the label.

---

/bookmark favicon/ .bookmark-item[label="GitHub"] image { width: 0 !important; height: 0 !important; padding: 0 0 16px 16px !important; background: ("file://C:/Users/username/AppData/Roaming/Mozilla/Firefox/Profiles/1234567890.default/chrome/Image/x_color.png")!important;

---

[Aris-t2]

@pwrsurge There are ways to add custom xul overlays and js scripts to Firefox 57+ files, but this project only focuses on CSS.

@Achille-Grs I know this kind of code, you have to specify it manually per bookmark.

[Achille-Grs]

@Aris-t2

Yes and I think it is only useful for some bookmarks that do not have an icon and thus show blatantness among colorful bookmarks. :-)

[SafeReader]

I do not like the tabs of Firefox 57. They are inelegant, thick.

[Poonkraft]

Minor bug in 1.2.6 Firefox button in title bar (when window is not maximized) looks OK:

Firefox button when window maximized (Windows maximize button) not OK:

Firefox button in full screen (F11) again OK:

And some feature requests if you don't mind: I decided that I like the new tabs with the blue line over the active one (and gray line when hovering). But they are too big. How can I reduce the height (including the new tab button)? I would also like to reduce the space above the tabs to 1 (or 2) pixels. Here is a picture of FF tabs (left) and my current Waterfox tabs (right). I would like to achieve a similar size in FF (while keeping the FF style), in all 3 window sizes (that is normal window, maximized and full screen). Could you please add an option for this in future releases.

Also, the new tabs really need separators (maybe 1 or 2 pixels) between tabs: Please add an option for this in future releases.

Thank you for all your work and help.

[kstev99]

Anyone else having problems with findbar on top since the last FF Update? It was working fine with simple code.

.browserContainer > findbar { -moz-box-ordinal-group: 0; position: fixed !important; left: 1em; border: 1px solid threedshadow !important; Since the last update the Findbar is always at the bottom, and I even tried the Aris-t2 code at this site with no results. Thought perhaps my theme was the problem, but I enabled default and still no luck. Wondering if it's just me or anyone else with the same problem?

[Aris-t2]

@Poonkraft

I can not reproduce your appbutton glitch in maximized mode. I have tested Firefox 57 and 58 in compact, normal and touch modes on Windows 7 (AeroGlass and Basic), 8 and 10. You are using Win 7, right? At least it looks like Win7 on your screenshots. The appbutton is always on top edge of the screen. Make sure you are not mixing any options, that are not meant to be used together and also make sure not to use code from difference versions of this project. Try to start over with clean 1.2.6 files.

If you still have this issue try to add this to the bottom of your userChrome.css:

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar  #PanelUI-button {
  top: 0px !important;
}

To set a custom tab height change these values

/* reduce minimum tab height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: 26px !important;
}

#TabsToolbar #tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  min-height: 25px !important;
  max-height: 25px !important;
}

I can't recommend to change the space above tabs toolbar as it might break in some of the availble cases (menubar on/off, compact/normal/touch modes, different OS themes) and their combinations.

Anyway test this code and adjust the value '-8' for your case:

#main-window[sizemode="normal"] #TabsToolbar {
  padding-top: 0 !important;
  margin-top: -8px !important;
}

@kstev99 The findbar code of this project works fine for me in Firefox 57 and 58. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/findbar_on_top.css Do not combine the code with other projects code.

[ghost]

Possible this pop-up use css form userContent (when dark about:home / new / blank - activated)?

Blink black and white theme background for 1 secound.

[Aris-t2]

This is impossible. The code is restricted to three about documents.

@-moz-document url(about:newtab), url(about:home), url(about:blank) {
// code
}

[Fixer-007]

I'm staying on ESR for now (scrapbook, CTR - RIP), I have a question - is this layout still possible via CSS. From what I see it seems possible. Am I correct?

P.S. Thank you for your great work.

[kstev99]

I've tried using the code at https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/findbar_on_top.css and still the findbar is on bottom. I even eliminated every other tweak that I had in userchrome.css and the code still just isn't working after the last FF57 update on Windows10

[Poonkraft]

Thank you Aris-t2 for the quick response. Yes, I am using Win 7.

I created a new profile, extracted the 1.2.6 in the chrome folder, then tested (no modifications to the profile or the 1.2.6 files. Similar results as before: OK in normal window and F11 full screen, not good in maximized window:

I'll experiment with the new code you posted later. Do you have a recommendation for adding tab separators (1-2 px) to the new (57) tabs?

[ghost]

This is impossible. The code is restricted to three about documents.

activated dark theme userContent.css

• Blink light black background when change editor tribe - https://ckeditor.com/ckeditor-4/
• Black background in this editor textarea - https://www.tinymce.com/

---

how use better restrictions?

body.activity-stream, body:empty {
      background-color: #323234 !important;
      color: #D1D1D1 !important;
    }

❓

---

debuger console on tinymce


Iframe bug? https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test

w3schools tryhtml_dd_test


---

I use not modify dark_apperance.css.

[Poonkraft]

Hello Aris-t2, me again. I did a bit of experimentation, mixed results.

Good news first.

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #PanelUI-button { top: 5px !important; } (please note the 5px, that seems to be the magic number) does this to the Firefox button in maximized window:

Great success! High five!

#main-window[sizemode="normal"] #TabsToolbar { padding-top: 0 !important; margin-top: 2px !important; } (2px seems to be the magic number here) does this to the top line:

Great success! High five! (again) I tested it a bit, seems to be perfect, so I keep it until it breaks something.

Not so good news about the tab heights. I can make them bigger, 55px here: but I cannot make them smaller, 5px here:

Seems like the size of the + button (new tab) does not change. That might be the culprit for keeping the minimum size.