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

[aris-t2]

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

[Aris-t2]

@p1tu1988
Download the 1.3.3.2 zip. I increased titlebar space in tabs not on top mode.

@Aiolikos
The button shape is active by default. Its the first @import in userChrome.css
buttons_on_navbar_classic_appearance.css

[the-j0k3r]

@aolszowka You cant do pull requests to wikis, @Aris-t2 also needs to enable wiki in settings first, but what you have done so far is for your fork only.

Feel free to create a Wiki. I have nothing against it.

@Aris-t2 you need to enable wiki in settings first otherwise @aolszowka cant do anything to your project here.

My question however.

What I meant to ask though, is it possible to customize scrollbars? see silverwind/overlay-scrollbars#1 I was looking for this https://github.com/silverwind/overlay-scrollbars/blob/master/overlay-scrollbars.css type of customization level.

[the-j0k3r]

Wouldn't a Wiki not maintained by me cause a bunch of questions about why is this or that not in it?

Wikis are open by default when enabled, but I suppose you can easily add a snippet to home page explaining that, that users are free to add information missing.

I like the idea users to create and maintain it, but I don't want to become the a support fallback for it.

Same as above right?

--
e.g.

This wiki is a community only driven resource, feel free to correct/improve existing/add new information you feel is appropriate.
This wiki resource comes with no support or warranty.

--
You can even add a FDL licence https://www.gnu.org/licenses/fdl.html

Though this is entirely up to you, its your project and its your decision if you want to open it to people to contribute, collaborate etc, or not.

Re: scrollbars
Its what I suspected, good info to go into a faq in a wiki for instance 😄

Could we get the iconic round/curved Australis tabs back of the previous FF versions?

Possible but not in this project.

Maybe use:

https://github.com/wilfredwee/photon-australis

⚠️ possible bugs with CustomCSSforFx ⚠️ (must comment classic_squared_tabs.css).

[Aris-t2]

@the-j0k3r @aolszowka
I think about the Wiki.

@Lun0s
Yes, it is possible to reduce icon size, but some of this projects settings will break.
Experiment with this code:

#urlbar,
.searchbar-textbox {
  margin: 1px !important;
  min-height: 0px !important;
  height: 24px !important;
}
#nav-bar .toolbarbutton-1 {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  min-height: 0px !important;
  height: 24px !important;
}

@Random-github-name
Good to hear text mode works fine now.

Alguien sabe que hay que modificar para cambiar las pestañas de posicion y ponerlas debajo de los marcardores?

if yes - find: ^{(si es así, encuentre)}

/* @import url(./css/tabs/tabs_below_navigation_toolbar.css); /**/

remove first /* and restart browser. ^{(elimine primero /* y reinicie el navegador)}

Lower is not possible. ^{(Más bajo no es posible)}

#4 - possible copy to form new issuse?

https://github.com/blog/2111-issue-and-pull-request-templates

[DDTex]

I have an issue with the separator bar for the Bookmarks menu drop-down from the classic menu bar. in FF on windows 7 they are almost invisible. Prior to 57I was able to remedy the problem using a mod to userchrome.css as follows:

@namespace
url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Make separators in bookmarks easier to see /
menuseparator {
-moz-appearance:none !important; / nothing changes without this */
background: green !important;
height: 3px !important;
padding: 1px !important;
}

with the advent of 57, that solution no longer works. Can you provide an update to your Classic Theme restorer CSS for 57 that will restore the functionality (or provide feedback to me)?

TIA

[Poonkraft]

Hello Aris-t2,
please consider adding this

#context_sendTabToDevice, #context_sendTabToDevice +menuseparator,

to send_to_device_menuitems_hidden.css file.

And a question (for anyone who may know): how can I make the new private window open with the home page (or at least a blank page) instead of the current purple abomination? Is there an about:config entry (couldn't find one)? Is it doable in userContent?

[aolszowka]

Should we consider creating a Wiki on this project? I am not confident enough to submit changes to mainline code but I would be happy to help with creating wiki pages that document/talk about features to act as an FAQ to avoid having to skim through threads and point users to.

@Aris-t2 would you accept pull requests for wiki pages?

*Edit: I started with a small sample here about what I'm talking about: https://github.com/aolszowka/CustomCSSforFx/wiki/pageaction_button_in_location_bar_hidden.css it would be slightly time consuming but that's why you use volunteers. I would at least document the tweaks I use for sure.

[DDTex]

I'm not sure if this is what you are looking for, but try oping a "new" tab.. look on the upper right corner and click the "gear".. you can uncheck options until the tab is clear of the garbage. David Denby David Denby

…

On 11/16/2017 10:11 AM, Poonkraft wrote: Hello Aris-t2, please consider adding this #context_sendTabToDevice,#context_sendTabToDevice +menuseparator, to send_to_device_menuitems_hidden.css file. And a question (for anyone who may know): how can I make the new private window open with the home page (or at least a blank page) instead of the current purple abomination? Is there an about:config entry (couldn't find one)? Is it doable in userContent? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#41 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AgKYBQ1iwuPG7pnWfACltSKDigyG92Okks5s3F7IgaJpZM4QgI9o>.

[Poonkraft]

@DDTex
Hi David, I am looking for a way to clear the private window. After opening a New Private Window (Ctrl+Shift+P) this is what I get:

I want to either set my own home page instead, or at least get a blank screen.

[Corben78]

Is it possible to enable the status or addon bar with css again?

I'm missing the bar at the bottom of firefox, where I can put the addon icons to, also as a close of the bottom of the browser window.

[Aris-t2]

@userOperaFF
The issue template sounds interesting.

@DDTex
The code still works fine for me. Make sure you remove the @namespace line. It not only worthless, it is probably the reason for your issue.

Tested this in userChrome.css on Windows and it worked fine.

menuseparator {
  -moz-appearance:none !important;
  background: green !important;
  height: 3px !important;
  padding: 1px !important;
}

@Poonkraft
Good idea to extend send_to_device_menuitems_hidden.css features.

about:privatebrowsing
Try this in userContent.css

@-moz-document url(about:privatebrowsing){
  html {
   visibility: hidden !important;
    background: unset !important;
  }
}

@aolszowka
Feel free to create a Wiki. I have nothing against it.

@Corben78
CSS can not create new toolbars.

[Corben78]

Yeah, I'm aware that CSS can't create new elements. I was wondering if there still is a status/addon bar still available in Firefox, but just not visible due to default CSS.
E.g. the search document bar is at the bottom, and only visible when pressing ctrl+f.

[Aris-t2]

@Corben78
Its not there anymore, like in Fx29-56.

@the-j0k3r
Scrollbars can not be changed in Firefox 57+. Otherwise I would have ported my "NewScrollbars" add-on already.

About the Wiki
Wouldn't a Wiki not maintained by me cause a bunch of questions about why is this or that not in it? I mean, I like the idea users to create and maintain it, but I don't want to become the a support fallback for it.

[hendricha]

Hey!

First of all, love what you guys are doing here, because I absolutely hate this flat trend.

Now... I do also have a feature request, which was not part of the original addons this project is base on, still... Could we get the iconic round/curved Australis tabs back of the previous FF versions?

[hendricha]

@userOperaFF : Thanks, checked it out, I like it. It is a bit too flat for my taste, but at least I have the curves, now all I need is some time to edit the embeded svgs..

[aolszowka]

@the-j0k3r Ah really? I didn't realize you can't push Wiki pages; that's a huge Github limitation (and a real shame tbh).

[JonnyThree]

Hello, i'm here to ask for an help to make a simple tweak: reduce the height of the tabs on Firefox 57. I use the compact style, and up to Firefox 56 i was using this simple string:
.tabbrowser-tabs {min-height: 23px !important;}

I have tryed this string:
tab {max-height: 23px !important;}

Result: tabs are tighter but they have extra space between toolbar.

Someone know to tweak only the height of the tabs? I don't need nothing more.
Very thanks if someone can help me.

[Poonkraft]

@JonnyThree
This is what I use, you could give it a try and set your own values.

/* Reduce space above tabs in normal window */
#main-window[sizemode="normal"] #TabsToolbar {
  padding-top: 0 !important;
  margin-top: 2px !important;
}

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

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

/* size of + (new tab) button */
.tabs-newtab-button .toolbarbutton-icon{
  min-width: 0px !important;
  min-height: 0px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
  padding: 1px !important;
}

To reduce tab height you have to reduce the + button too.

[JonnyThree]

@Poonkraft
Thanks so much! This works very well, but i see that on many tans opened, when the arrow scrool appear, the tabs height grow, and auto reduce when i close some tabs (and the arrow disappear)

[Lun0s]

I didn't notice there was a thread to ask questions over here, I'm so glad I found it.
Allow me to ask, is it possible to change the size of the different icons in the UI through the userChrome.css file?
Right now, I'm using a userChrome.css file that someone else created and that I liked quite a lot compared to the default appearance of Firefox 57. The problem is that even with the Compact Density Preset, the buttons feel bigger than they should be, or at least bigger than the older versions using ClassicThemeRestorer.

Here's a simple comparison, Firefox 57 with the CustomCSSforFx and the userChrome.css that I'm using above, and Waterfox v55 with CTR below.

[Poonkraft]

@JonnyThree
I don't have that problem, but I use the code as an addition to the settings in this Custom CSS for Fx project. You may have to enable the

@import url(./css/toolbars/tabs_toolbar_adjustments.css);

(or something else) line in the userChrome.css.

Edit:
This part from that file may help you:

/* make sure toolbar buttons do not increase toolbar height */
#TabsToolbar > toolbarpaletteitem,
#TabsToolbar > toolbarbutton {
  min-height: unset !important;
  padding: unset !important;
  margin: unset !important;
}
#TabsToolbar > toolbarpaletteitem  .toolbarbutton-icon,
#TabsToolbar > toolbarbutton  .toolbarbutton-icon{
  min-width: unset !important;
  width: 24px !important;
}

[the-j0k3r]

@aolszowka

If a wiki exists you can clone and push to it, but theres no such thing as pull requests for wikis.

Edit this page however describes the problem and suggests a workaround http://www.growingwiththeweb.com/2016/07/enabling-pull-requests-on-github-wikis.html

IMO you can work on your wiki and if this project decides to host a wiki you can the clone it and copy your files manually from your wiki git directories to the project wiki on your local, commit and push changes to the main wiki. With enough care and attention the limitations are few, but still flexible enough despite the caveats.

[JonnyThree]

@Poonkraft
i very appreciate your help, i will try to investigate this "arrowscrollbox" behaviour.

edit: ultimate fix. needs also to set the "max-heigth":
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: 24px !important; max-height: 24px !important;
}

edit 2:
sadly i discovered that adding "max-height" as above, when i drag left/right any tab, the tab bar completely mess up

[Random-github-name]

Just popping in to say thanks for the toolbar text mode modifications. Works superbly now. Amazingly done! :)

[Poonkraft]

@JonnyThree
I tested my original code (here) by itself (that was the only thing in userChrome.css), and it works perfectly for me. I can open lots of tabs, move them left and right, move them to new window, rearrange, etc.
Win 7, Ff57 + Light Theme + Compact.

[Xime78]

First of all, thanks for this project.
Then, I have a question: Is it possible to remove the opaque overlay on the tabs, navbar and bookmarks bar? This was my reason for getting CTR, and it's my biggest annoyance with the new Firefox. Basically, I want to see my whole theme, not have half of it hidden underneath a layer I did not ask for.

I tried to look for the answer above, so my apologies if this has already been answered.

[Lun0s]

Yes, it is possible to reduce icon size, but some of this projects settings will break.
Experiment with this code:

Thank you so much @Aris-t2, this worked perfectly. I just changed both heights to 22 pixels and removed the padding on top of the navigation bar. Everything seems to be working correctly 👍

The only thing left would be resizing the Firefox button and that's it. Is that possible?

[JonnyThree]

@Poonkraft
Using only your code in the userchrome.css, when the arrowscroll popup i see that the tabs slightly grow in height. If this is only in my pc, i really don't know why.

[Poonkraft]

Hello Aris-t2,

Three quick questions (feature requests if possible):

1. Is it possible to change the line color on tabs to purple on Private Windows?
2. Is it possible to change the magnifying glass icon in the search bar to the icon of the default search engine?
3. This one is related to CTR: Is it possible to hide the Waterfox button (like it is possible to hide the Firefox button with this project)?

[Poonkraft]

@JonnyThree
You are absolutely ritght, it did that for me as well, but I did not notice it until you pointed it out.
I added this code and everything works well now:

/* make sure toolbar buttons do not increase toolbar height */
#TabsToolbar > toolbarpaletteitem,
#TabsToolbar > toolbarbutton {
  min-height: unset !important;
  padding: unset !important;
  margin: unset !important;
}
#TabsToolbar > toolbarpaletteitem  .toolbarbutton-icon,
#TabsToolbar > toolbarbutton  .toolbarbutton-icon{
  min-width: unset !important;
  width: 24px !important;
}

[Aris-t2]

@ Xime78
Yes, it is possible. If you are using 'tabs not on top', I suggest to update this projects files to the latest version.
I already remove the "opaque" toolbar overlay for that case.

#nav-bar:-moz-lwtheme,
#PersonalToolbar:-moz-lwtheme {
  background: unset !important;
}

@Lun0s

resizing the Firefox button

In titlebar or on toolbar?
There is no need to do that for the titlebar button, because you would also have to catch all cases around that change (menubar, tabs toolbar etc.).

@ Poonkraft

Is it possible to change the line color on tabs to purple on Private Windows?

#main-window[privatebrowsingmode=temporary] .tabbrowser-tab[selected] .tab-line {
  background-color: purple !important;
}

Is it possible to change the magnifying glass icon in the search bar to the icon of the default search engine?

No.

This one is related to CTR: Is it possible to hide the Waterfox button (like it is possible to hide the Firefox button with this project)?

Look for "appbutton hidden" inside appbutton category.

[Lun0s]

In titlebar or on toolbar?

It sounds like it's the one in the Title Bar, @Aris-t2. Sorry, I'm not really used to this kinda thing.
Everything was easier and faster with CTR and its window where I was able to test stuff in real time and such.

[Aris-t2]

You can use the icon only option for that button.

[JonnyThree]

@Poonkraft
right, the extra code is needed. thanks a lot :)

edit:
i've stripped down some extra code: seems to be that is needed only this:
#TabsToolbar > toolbarpaletteitem, #TabsToolbar > toolbarbutton {margin: unset !important;}
#TabsToolbar > toolbarpaletteitem .toolbarbutton-icon, #TabsToolbar > toolbarbutton .toolbarbutton-icon {width: 23px !important;}

[JoseHidalgo]

Hi @Aris-t2 , and thank you for your awesome work. I was about to drop Firefox Quantum, and I'm sticking to it thanks to you :) I have a very simple request : be able to SET A NEWTAB PAGE BACKGROUND COLOR (I'm talking about a new tab page, not about the "about:newtab" page - AFAIK it's not the same thing).

I have a dark theme everywhere, and I hate when a new tab just shows a white background page for several seconds before any URL loads. It burns my eyes ! Can you please help me change that again ?

I used to use a custom code in both userChrome.css and userContent.css for that (I could post it if needed), but apparently it doesn't work anymore with Firefox Quantum. I don't know why.

Could you please add the proper code to your css's in a future release ? That would mean the world to me. Thanks in advance !

[x0rnn]

Is there a way to remove these gaps and autofill the whole space with the URL, or at least the space on the right? https://i.imgur.com/i1YOO9N.png

Edit: copied some code from css/locationbar/ac_popup_title_and_url_50percent_width.css to do it.

[Aris-t2]

@userOperaFF
There is a "dark background" option for about:home/about:newtab in this project. You can access it though userContent.css

@x0rnn
This removed the padding before results, but I doesn't work for the space after results.

/* remove unneeded padding around results */
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
  padding: 0 !important;
}
/* remove unneeded padding around results (Fx58+) */
#PopupAutoCompleteRichResult .autocomplete-richlistitem {
  -moz-margin-start: 0 !important;
  -moz-padding-start: 0 !important;
  -moz-margin-end: 0 !important;
  -moz-padding-end: 0 !important;
}

[AMGPilot]

Aris-t2,

Thank you very much for creating this Custom CSS for Firefox! I used to use the classic theme restorer and this gives me back the look that I like :)

I do have one question though:

Would it be possible to add "Bookmark This Page" (Ctrl+D) to the bookmark menu like the older version of Firefox?

https://i.imgur.com/l755MkR.jpg

If you enable the Menu Bar and click on "Bookmarks" then the option to "Bookmark This Page" is available.

https://i.imgur.com/8HfMj5Y.jpg

Thanks again!

[Thalon77]

Nice tweak collection, useful to recreate the same experience I had with CTR and CTB.
I just need some help to fix a few things now that things are a bit more complicated.

What I managed to accomplish: used the "classic" package, changed the main icons to crystal style, managed to change the back/forward button to FF3 green style, managed to remove the border around icons in the bookmarks bar (only there).

What I still need to do and I can't manage to accomplish:

• remove the border around the icons in the navigation bar (home, reload, print, etc.) like I did in the bookmarks bar
• create a dropmarker near the back/forward button with the history (like in pre australis FF)
• create a "stop" button near the home and reload ones (this one only for cosmetical reasons, to recreate the old FF3 interface): stop and reload are merged now, need to spilt them
• create an addons bar at the bottom of the window like in CTR
• remove the "action" (those three dots) and star icons in the address bar

Thanks in advance for any advice.

[JoseHidalgo]

Maybe my previous comment wasn't clear enough, so I've edited it.
I'm not talking about the "about:newtab" page
I'm not talking about the color of the tab itself
I'm talking about the color of the whole page, when a new tab is created, before any URL is loaded
@Aris-t2 , please help. Thank you. :)

[Aris-t2]

@AMGPilot

It is not possible to create new items with CSS.

@Thalon77

remove the border around the icons in the navigation bar (home, reload, print, etc.) like I did in the bookmarks bar

unset buttons_on_navbar_classic_appearance.css

create a dropmarker near the back/forward button with the history (like in pre australis FF)

Not possible, there is no such dropmarker in Firefox and CSS can not create one

create a "stop" button near the home and reload ones (this one only for cosmetical reasons, to recreate the old FF3 interface): stop and reload are merged now, need to spilt them

It is not possible to split them. They share one box now. You can only make both visible at the same time.

#reload-button:not([displaystop]) + #stop-button,
#reload-button[displaystop] {
  display: block !important;
}

create an addons bar at the bottom of the window like in CTR

Not possible. CSS can not do that.

remove the "action" (those three dots) and star icons in the address bar

Enable pageaction_button_in_location_bar_hidden.css in userChrome.css

@JoseHidalgo
So you are talking about the split second something else but the blank page is visible before the actual address loads?

Try this:

.browserStack {
  background: black !important;
}

[the-j0k3r]

Im now using tabs on the bottom, because thats actual more efficient to change tabs/

In offtopic, Im still waiting for all that speed of Quantum FF 57 with 6 tabs open, its about as fast as as with before with FF56 and earlier 40 tabs open, thats a fair comparison of the speeds here.

[Aiolikos]

Is it possible to change the bookmark button guys? I cant find the way. Thanks in advance
https://imgur.com/a/iaxxk

[AMGPilot]

@Aris-t2

Thank you for the quick response.

Is there anyway to change the Bookmark Button shortcut to "Ctrl+D" instead of "Ctrl+Shift+B" or maybe create a new shortcut and add it to the Toolbar?

Sorry for all of the questions but just trying to figure this new browser out. Thanks!!

[JoseHidalgo]

@Aris-t2 : yes, that's what I'd like, thank you. I have tried your code in userChrome.css and it works most of the time:

• It works for all the new tabs that I open by middle-click on a bookmark, which is already great.
• But it doesn't work well when I "ctrl+T". I see first the black background very briefly, THEN a white background that burns my eyes, then Google finally loads (FYI I'm using the "New Tab Override" extension to load Google on every new tab. I also have Stylish to load a dark style for Google. And if it weren't enough I also have the "Dark Mode"extension. But that white flash still appears).

Now thanks to your code, I can load Google on a new tab without any white flash, just by middle-click on a Google bookmark. But I still can't do the same by Ctrl+T (white flash after the black background). That's weird.

Before Quantum, I was using this code that I found online (sorry about the indentation, I can't make it work apparently):

1. On userChrome.css:
   @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @-moz-document url(chrome://browser/content/browser.xul) { #main-window, browser[type="content-primary"], browser[type="content"], tabbrowser#content, #content, browser[type="content"] > html { background: #222222 !important; } }

2. On userContent.css:
   @-moz-document url-prefix(about:blank), url-prefix(about:newtab) { html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay { background: #222222 !important; } }

It worked perfectly. Now on Quantum it doesn't seem to work anymore. I don't know why.

[Aiolikos]

I want to create some custom buttons but I don't know the way. I ve found the following;
is it possible to use those codes to change the default buttons? Can someone help me?

#home-button {list-style-image: url("chrome://browser/skin/home.svg");}

#reload-button {list-style-image: url("chrome://browser/skin/reload.svg");}

#stop-button {list-style-image: url("chrome://browser/skin/stop.svg");}

#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/reload-to-stop.svg");
  width: 468px;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/stop-to-reload.svg");
  width: 468px;
}

#back-button {list-style-image: url("chrome://browser/skin/back.svg");}

#forward-button {list-style-image: url("chrome://browser/skin/forward.svg");}

#library-button {list-style-image: url("chrome://browser/skin/library.svg");}

#sidebar-button {list-style-image: url("chrome://browser/skin/sidebars-right.svg");}

#bookmarks-menu-button {list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");}

#downloads-button {list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");}

#PanelUI-menu-button {list-style-image: url("chrome://browser/skin/menu.svg");}

#new-tab-button {list-style-image: url("chrome://browser/skin/new-tab.svg");}

#nav-bar-overflow-button {list-style-image: url("chrome://browser/skin/chevron.svg");}

[Aris-t2]

@the-j0k3r
I haven't noticed any speedup either.

@AMGPilot
You can not change shrotcuts.
Ctrl+D opens star button bookmark popup and Ctrl+Shift+B bookmarks library here.

@JoseHidalgo
You can still use your code, it works, but loose the @namespace line. It breaks everything.

@Aiolikos
What are you trying to change? Bookmarks buttons id is #bookmarks-menu-button.
If you want to change button colors or images, look into this projects code.

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/buttons/icons_colorized.css
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/buttons/icons_custom_icons.css

You can not create entirely new buttons with CSS only change their appearance.

[AMGPilot]

@Aris-t2 ,

Thanks again for the reply :)

One more question, is it possible to move the "Star Button" from the address bar to the toolbar?

Here is an add-on that moves the reload button to the address bar. Wish I could see the code they are using for this add-on: https://addons.mozilla.org/en-US/firefox/addon/reload-in-address-bar/

Thanks!! :)

[Aris-t2]

@AMGPilot

You can not move star button out of the address bar.

The WebExtension does not move reload and stop buttons to the address bar, it creates new ones there.
So, if someone would create a WebExtension for star "toolbar" button, you would be able to place it on any available toolbar.

[AMGPilot]

@Aris-t2 ,

Oh yes you are right, it does create a new one and not move it.

Thanks!

[Aris-t2]

Looks like this WE is what you might be looking for. It is a simple one-click bookmarks button.
https://addons.mozilla.org/addon/bookmark-it-justtest/

[AMGPilot]

Thanks for the link!

Yes that is almost what I am looking for ;)

Only problem with that WE is that the Bookmark menu does not popup but instead it automatically adds the bookmark to the "Other Bookmarks" folder, which I never use :(

Edit: I just found this WE that allows you to change the default bookmark folder, so combined with the WE you mentioned above, it is sort of a work around for what I wanted. It is not exactly what I wanted but I guess it will work for now :)

https://addons.mozilla.org/en-US/firefox/addon/default-bookmark-folder

[Thalon77]

Still trying with the final cosmetic touches now that my UI is quite fine and almost like it was before, just need to change a little thing: the "new tab" button just right of the tabs is grey now, need to change its color to the same white color of the one that active tabs have (or something like the color it had with CTR before quantum), and maybe change that same color on inactive tabs (too dark for my tastes).

[p1tu1988]

Does anyone know what to modify to change the position tabs and put them under the markers?

[p1tu1988]

Thank you very much for the answer, it is already changed

[the-j0k3r]

This maybe somewhat unrelated to here, but I would like to know if its possible to display a centered unbroken feedback page while still blocking surveygizmo.com.

The problem:

Ublock origin blocks surveygizmo.com

• Visiting https://qsurvey.mozilla.com/s3/FirefoxInput/ you get a broken page not centred, text input box is outside boundaries generally broken.

Unblocking surveygizmo.com the page displays well cantered text input doesn't go outside boundaries, generally everything is well styled and unbroken.

Question

How can I display this page unbroken well styled and still allow ublock origin to block surveygizmo.com as its set by default?

Visual representation

[Aiolikos]

@Aris-t2 ,
I want to change the buttons appearance but I cannot understand the way -ie after this : #bookmarks-menu-button...
I dont know what to do. (I ve the images folfer ( and all the folders) inside the chrome folder).
Can you give me a specific example for bookmark menu button? I mean the complete codec... or someone else who knows...I 'll be greatful!!!
sorry for the many questions! I am new to all this...

[Aris-t2]

@Thalon77

#navigator-toolbox #TabsToolbar:not(:-moz-lwtheme) .tabs-newtab-button {
  fill: black !important;
  color: black !important;
}

@the-j0k3r
Unset .sg-survey-form items max-width and maybe add some css center values to it in userContent.css

But why would you even care. Its no like you have to do this every day multiple times?

Why not just disable/exclude uBlock for https://qsurvey.mozilla.com/s3/FirefoxInput/ ?
It will still be active on surveygizmo.com

On https://qsurvey.mozilla.com/s3/FirefoxInput/ hit uBlock button, hit power icon inside popup, reload page.

@Aiolikos
Force red color on default icon

#bookmarks-menu-button {
  fill: red !important;
}

or set an own icon of 16x16px (example)

#bookmarks-menu-button {
  list-style-image: url("yourimageurl/yourimage.png") !important;
  -moz-image-region: rect(0, 16px, 16px, 0) !important;
}

or set an own svg icon

#bookmarks-menu-button {
  list-style-image: url("yourimageurl/yourimage.svg") !important;
}

[Thalon77]

@Aris-t2 tried your fix: nothing changed, tried to change the color from "black" to "white" just to test its effect: che cross inside the newtab button changed its color.
I need to let that unchanged and change the gray color around it.

[Aris-t2]

#navigator-toolbox #TabsToolbar > #new-tab-button,
#navigator-toolbox #TabsToolbar > toolbarpaletteitem > #new-tab-button,
#navigator-toolbox #TabsToolbar > #new-tab-button .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar > toolbarpaletteitem > #new-tab-button  .toolbarbutton-icon {
  -moz-appearance: none !important;
  background: unset !important;
}

[Aiolikos]

@Aris-t2 ,

Τhank you very much, I really appreciate it. I understand now... a last question whenever you have time : can I use only images at 16x16px? Because I tried now and are very very tiny. I ask that because the back/forward buttons are ok with a higher px. Why happen that? Thanks in advance!

[Doom-Head]

Did a search, new to all this. Was wondering if there is a way to hide the bookmark toolbar favicons? Thank you for your time, help and this project.

[niceboy76]

@Aris-t2,

Hello.

I'm wondering how do you find all these #id of CSS elements (dom inspector is no more compatible) ?

I would like to know the #id for the "popup" of hamburger button (I want to put a background color) ? TIA Have a good evening Aris !

[Aris-t2]

@Aiolikos
16x16 was just an example, so you see how to set the image region.

@Doom-Head

#PlacesToolbarItems .bookmark-item .toolbarbutton-icon {
  visibility: collapse !important;
}

@niceboy76
I use the builtin "Inspector" : https://github.com/Aris-t2/CustomCSSforFx/#how-to-find-item-ids-and-attributes

#appMenu-popup

[m4n8tpr4]

CustomCSSforFx saved Firefox Quantum for me!

I have a question about another old Firefox feature. The search bar dropdown menu icon used to show the default search engine, and you could change the default search engine without entering Preferences. Is there a way to restore at least part of this functionality?

[the-j0k3r]

Unset .sg-survey-form items max-width and maybe add some css center values to it in userContent.css

But why would you even care. Its no like you have to do this every day multiple times?

I know how to not let the page be broken by simply allowing the blocked domain, but thats not the point, also just adding some center values wont fix the utterly broken elements everywhere.

As for as how many times I do this, also irrelevant, not only I dont know if blocking the domain still forwards feedback even if it does, after submitting feedback several times in any given time span with broken everything is quite annoying.

Its fine, Im not asking you to support a solution, I was looking for some pointers into the actual css selectors, but no worries, forget I asked.

[Aris-t2]

@m4n8tpr4
The "old search" functionality is not fully working and therefore not part of this project.

[teijiIshida]

Hi Aris, can you add a mod where the find bar will auto-hide/close when it's not in focus?

[p1tu1988]

With the tabs changed below the markers (1.3.3), there are problems with the minize, maximize and close icons, and they are smaller.

[Aiolikos]

@p1tu1988 dude where did you find these square buttons like in your image?

[p1tu1988]

When I downloaded the "CustomCSSforFx" they came by default, I did not touch anything

[p1tu1988]

Thank you Aris-t2, fixed up.

[Aiolikos]

@Aris-t2
Thank you... Is there a way to maximize the default buttons? Because they are very small and If you want to change their appearance, the default size is very big problem. Is it possible with userChrome.css?
Or someone who knows how to change the buttons entirely except from userChrome.css?

[Qrokqt]

How can I get rid of this white bar at the top?

[jmcken1]

Hello, first-time poster here. I wanted to share a few issues and suggestions. Apologies for the length; I thought pics might help clarify what I’m referring to.

1: There’s a glitch when using custom toolbar buttons (I use “old_chrome”, but this applies to all) in combination with any of the the app/hamburger button icons (“white“, “dark” or “grey”) that causes the button icon to disappear.

Custom toolbar buttons with app/hamburger button icon disabled:

Custom toolbar buttons with app/hamburger button icon (“white”, but same result for the others):

This applies regardless of what “button color” is used; disabling it just leaves a blank space in the toolbar.

2: When using custom toolbar icons, clicking the “downloads” button causes the default icon (downward arrow with flat line at bottom) to reappear overtop it. It doesn’t go away unless you restart the browser.

Normal custom download button:

Activated custom download button:

EDIT: Forgot to mention: When a download starts, the custom icon reverts to the default one with the “download in progress” animation. I don’t know if this can be remedied, but I thought I’d point it out.

3: When using the “aeroglass” colors, the toolbar colors (“./css/toolbars/general_toolbar_colors_aeroglass.css”, affecting the navbar and bookmarks toolbar) are visibly paler than the title and tabs bars’ own aeroglass colors, creating a pale stripe through the window:

I can’t find a way to fix this using the options in userChrome.css, and I’m not confident enough to go playing in the css files themselves (especially since they’d be overwritten with the next update anyway). (FTR, I’m on Windows 8 using Glass8 for the Aero Glass look, in case that’s relevant. I haven’t encountered this issue in any other app or window.)

4: A question/suggestion: Is it, or will it be, possible to move the app/hamburger button to the tabs bar, as shown here (Firefox 56 with CTR)?:

5: Finally, a request: Toolbar icons (default or custom) that are white with black outlines, as with the back/next arrows in the above pic (I believe this was a CTR feature, but I can’t remember for certain).

That’s all. Thanks again to everyone contributing to this.

[Aris-t2]

@Aiolikos
It is possible, but I don't suggest modifying them.
You will need much fine tuning until all buttons are good and then you will have to adjust irregular buttons like downloads button and add-on buttons.

You can start with this:

#nav-bar .toolbarbutton-1 .toolbarbutton-icon {
  width: 32px !important;
  height: 32px !important;
}

Find the values, items, ids, class you need using inbuilt inspector:
https://github.com/Aris-t2/CustomCSSforFx/#where-to-find-firefox-profile-folder-and-what-is-the-correct-location-for-user-styles

@Qrokqt
How do you get this line? I haven't seen on here.

Extract the latest zip file into your chrome folder, change settings one by one, report what is causing it. Report this as a "new issue" and write everything down as asked inside new issue template.

@jmcken1

1. Missing icon issue will be fixed on next update.

2. Icon sets are not supposed to replace the download/progress animation. The overlapping glitch will be fixed on next update.

3. Are you sure you haven't mixed "aeroglass" and "transparent" files for general toolbar? I've set aeroglass for both general toolbars and "tabs_below..." and do not see such a transparent overlay, which of course appears, if I use "transparent" instead of "aeroglass".

4. Look here how get appbutton on tab toolbar: #46

5. I can add more icons sets on next update.

[AotrsCommander]

I am a bit lost in all the text, so I will ask directly.

Is it possible through this system to:

a) put the other history button on the toolbar (i.e. like the one in Classic theme restorer which opens the sorted by date and site sidebar) or to change the existant v57 one to open this by default? (This was the feature that was the reasons I switched to FF from IE years ago and having it buried under more menu/clicks is extremely irritating.)

b) modify the buttons to icon and text (and ideally much larger) (My 90-year old grandmother struggles with her eyesight, and v57s interface would be almost impossible for her to read.)

[jmcken1]

@Aris-t2

Are you sure you haven't mixed "aeroglass" and "transparent" files for general toolbar? I've set aeroglass for both general toolbars and "tabs_below..." and do not see such a transparent overlay, which of course appears, if I use "transparent" instead of "aeroglass".

I’ve just re-enabled the aeroglass theme in my browser and double-checked the code, and I can confirm that “transparent” is disabled for the general toolbar. The code I’m using:

/* toolbar colors - only use one at a time ******************************************************/
/* @import url(./css/toolbars/general_toolbar_colors.css); /**/
/* @import url(./css/toolbars/general_toolbar_colors_aero.css); /**/	/* <-- AERO colors */
/* @import url(./css/toolbars/general_toolbar_colors_transparent.css); /**/
@import url(./css/toolbars/general_toolbar_colors_aeroglass.css); /**/

I just tried replacing “aeroglass” with “transparent” for the general toolbar and this is what I got:

Note how the stripe it produces is noticeably brighter/paler than the one seen in the pic in my previous post (with “aeroglass” enabled and “transparent” disabled).

FWIW, I’ve also tried disabling every other add-on to see whether any conflicted, but it didn’t change anything.

Other than that, thanks for the feedback. I’ll await the next update, and I’ll try to implement that button-in-tabs-bar trick.

[Aris-t2]

@AotrsCommander
There is only one history button in toolbar palette. Enter Customizing mode and move it to a toolbar. CSS can not create new buttons.

There is a "icons+text" mode in this project. Look into toolbars category, inside userChrome.css

@jmcken1
I think this might be related to Glass8 then. On Windows 7s AeroGlass there is not such issue. I basically removed toolbar backgrounds by setting background color opacity to "0".

Add this to userChrome.css files end for testing purposes.

#nav-bar:not(:-moz-lwtheme) {
  background: none !important;  
  background-color: rgba(255,255,255,.0) !important;
  border: unset !important;
  box-shadow: unset !important;
}

[AotrsCommander]

@Aris-t2 Right. Thank you. I did not think so, but I thought I should ask. I will, unfortunately, continue to look around for another browser that has a feature like that (if one indeed exists).

I will bear that latter point in mind if I am really, really, really struggling to find anything better than what I can do to v57 with CSS (as that, at least, might enable Nanny to use it).

[jmcken1]

@Aris-t2
Interesting. I did as you asked – added your code to the end of userChrome.css and re-enabled aeroglass in the general & tab toolbars – and got this:

It fixed the stripe for the location bar, but not for the bookmarks bar.

In fact, this raises something I wanted to ask/request: Is it possible (or do you plan to implement the functionality) to enable aeroglass only for the location bar, but not for the bookmarks bar? The way I had it set in CTR, which I’d like to recreate as closely as possible, was to have aeroglass for the title and location bars and regular/grey colors for the bookmarks and tabs bars. It would be cool if this could be recreated. or even added as a standard line of code in your userChrome.css for anyone else who wants it.

[sorashadow]

@Aris-t2
How did you create the extra add-on bar on Firefox Classic Theme Restorer? Is there any way to copy that code to the userChrome.css?

I'm really missing the little bottom bar. Too many extensions (many disabled because they are now legacy =/), too little space on the main bar.

Thanks

[Aris-t2]

@jmcken1
I will fix the AeroGlass issue on next update.

However, I suggest you use own custom code inside userChrome.css instead of general_toolbar_colors_aeroglass.css file.

/* hide toolbar shadow */
#nav-bar:not(:-moz-lwtheme),
toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar):not(:-moz-lwtheme) {
  background-color: rgba(255,255,255,.0) !important;
}

/* navigation toolbar background */
#nav-bar:not(:-moz-lwtheme) {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
}

/* hide navigation toolbar borders */
#main-window[sizemode="normal"] #navigator-toolbox #nav-bar {
  border-left: 0 !important;
  border-right: 0 !important;
}

@sorashadow
CSS can not create toolbars, you need xul overlays or JavaScipt for that.

[chriscjs]

Is there a way to get the glass effect as with GlassMyFox? In windows 7 firefox 57 gives the glass with blur effect on both the menu bar and tab bar- I can see right through to the desktop wallpaper. In windows 10 with glass8 it does not. I tried running firefox in win7 compatibility mode but that had no effect. I am running win10 fall creators update.
Thanks.

[Aris-t2]

There are some settings inside userChrome.css labeled with "aeroglass". They will create transparent toolbars, tabs etc., but on Win10 you not only need Glass8, but also have to set your Windows 10 ui preferences to show custom colors for titlebars.
If this does not work, Win10 FCU is not fully compatible with Glass8 or it is impossible to set real window transparency.

[sorashadow]

CSS can not create toolbars, you need xul overlays or JavaScipt for that.

No problem @Aris-t2 , I just wanted to know if there was any way to recover it. I did see another response you gave stating that CSS couldn't create new toolbars. I was more curious to know how you did it in the Firefox Classic Theme Restorer.

[chriscjs]

@Aris-t2
I did try those, but sadly no transparency. However glass8 is working fine with other apps, including firefox 56 with glassmyfox on win10 FCU.

[Aris-t2]

Mozilla changed something in Firefox 57+, so you can not unset "#main-window" nodes background anymore.

[jmcken1]

@Aris-t2
Thanks for the update. The issues I brought up are indeed fixed, and the extra code you provided fixes the “stripe” in aeroglass.

I do have another glitch to report: When using “navbar_more_compact_mode”, loading pages can cause add-on icons to slip out of view and instead appear in the “more tools” menu. Yet when I enter Customize mode, they still appear in their intended spots in the toolbar. I have to grab each icon, move it around a bit and put it back in place, then when I exit Customize mode it’ll reappear where it’s supposed to be. But it’ll still disappear the next time I reload a page.

This only seems to affect “more compact” mode. It also seems to only affect add-on icons that have little counters on them; in the below screenshot, for instance, the two icons on the right (with the blue “9” and green “1” counters) will slip out of sight, but the other two to the left (with no counters) stay visible.

[aflove65]

Thank you for your hard work. I have one request. Is there a way to put the tab buttons down at the bottom of the window? I can use this code to do it:
#TabsToolbar {
position: fixed;
bottom: -0.0em;
width: 100%;
}
#tabbrowser-tabs { width: 96%; }
#content-deck { margin-bottom: 2.5em; }

But not sure how to get it to integrate with what you have done.
Thanks

[chriscjs]

@Aris-t2
I've found a way to add glass transparency by appending this to the end of userChrome.css. It also has blur like other windows/apps.

#main-window[windowtype="navigator:browser"] {
background-color: transparent !important;
-moz-appearance: -moz-win-glass !important;
}

[Aris-t2]

@aflove65
Thanks I will look into it. The code needs a lot of fine tuning.

@chriscjs
Thanks, I was not aware of -moz-appearance: -moz-win-glass !important; still being around in Windows 8 and 10 in Firefox 57+.

Possible add blur on lw-theme finbar background or better positioning backround?

[chriscjs]

@Aris-t2
I've found a way to add glass transparency by appending this to the end of userChrome.css. It also has blur like other windows/apps.
#main-window[windowtype="navigator:browser"]
{
background-color: transparent !important;
-moz-appearance: -moz-win-glass !important;
}

I forgot to mention you need to install one of the "transparent" themes from addons.mozilla.org to get glass on all the toolbars, not just the titlebar. I chose HoriBlack (transparent) theme. Not all of them work.

[Aris-t2]

@userOperaFF
I can try to improve background image position on findbar, but it is impossible to match the exact area, especially when it changes in maximized mode, for every window width modification and when hiding/showing bookmarks toolbar.

@chriscjs
Removing background of every toolbar should also work (this is equal to setting all toolbar options to aeroglass).

[eureekasigns]

First, THANK YOU so much for this.

Second, on the multi-row addition, while it does work, I've found the following to work a little more nicely in my case, and though you may wish to include. The thing I found useful was the scroll bar, and limiting the number of rows displayed.

Again. Thank you very, very, much for all of this work. Your work is appreciated!

From here: https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/

/*
The class .tabbrowser-tabs has been replaced with id #tabbrowser-tabs
changed selectors accordingly
*/
.tabbrowser-tab:not([pinned]) {
    flex-grow:1;
    min-width:94px !important; /* Needed important tag, width can be whatever you like */
    max-width: 94px !important; /* none - Makes the tabs always fill the toolbar width */
}
.tabbrowser-tab,.tab-background {
    height:var(--tab-min-height);
}
.tab-stack {
    width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto !important;
    min-height: var(--tab-min-height);
    max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible; 
    display: block;
}

#titlebar,#titlebar-buttonbox{
    height:var(--tab-min-height) !important;
}
#titlebar{
    margin-bottom:calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar{
    margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #TabsToolbar{
    margin-left:var(--tab-min-height);
}
#titlebar:active{
    margin-bottom:0 !important;
}
#titlebar:active #titlebar-content{
    margin-bottom:var(--tab-min-height) !important;
}
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
    display: none;
}

/* This enables maximum width before scrollbar is shown */
#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;
}		 

[Thalon77]

Don't know if it's a bug or some misconfiguration, but here's the problem: I chose to use crystal style icons on the main menu, and also chose (in firefox's config menu) to leave the download button always visible, but everytime I start a download the icon reverts back to its default appearance and it switches back to the crystal one only if I click on it and open the downloads menu.