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

[aris-t2]

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

[Aris-t2]

I know this code from GlassMyFox.
It relies on Stylish DOM access. No Stylish, not transparent tab.

This code makes all content transparent, but there is no way to use it for a specific page as it has to be applied on a level above the page, so @-moz-document won't help here either.

	#main-window #content browser { 
		opacity: 0 !important;
		background-color: transparent !important;
	}
	#main-window #content{
		background-color: rgba(255,255,127,.0) !important;
	}
	#appcontent, #content > tabbox > tabpanels {
		background-color: transparent !important;
	}

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.

[Keith94]

Hi, I was looking to disable the HTML5 fullscreen warning that appears when moving your mouse to the top of a video. In the readme you mention to set these preferences:

HTML5 fullscreen warning
full-screen-api.warning.delay > 0 (reduces delay)
full-screen-api.warning.timeout > 0 (reduces delay)

Setting timeout to 0 hides the "initial" warning, however setting delay to 0 just makes the "top" warning appear faster. I found that changing its value to -1 hides it permanently as well. Feel free to mention that tweak if you find it useful. :)

[Aris-t2]

I was under the impression about:... pages were not changeable in Firefox 57+, but it seems I was wrong.
Thanks for the info.

[Aris-t2]

To be honest, the search box overlay bugs me. Its kind of annoying, that is actually can overlap with pages content.
I think a better approach is keeping it as contents first "item" and make it disappear while scrolling, so it becomes a default page item like everything else.

.search-container {
  background: transparent !important;
  position: absolute !important;
  top: 20px !important;
}

Further more I will tweak the small window case so content and search box are still visible even on smaller windows. Currently small width corrupts/moves some areas the way they should not.

[Aris-t2]

I will add the code to next update.

#PanelUI-button {
  margin-inline-start: 0px !important;
  border-inline-start: 0px solid !important;
  border-image: unset !important;
  border-image-slice: 0 !important;
}

[Aris-t2]

@Acid-Crash
I will look into it.
EDIT
The main problem with modifying button appearance is still even in Firefox57+ the non-standardized button appearance for all toolbar buttons. We have buttons with and without badges, we have buttons with special indicator cases like downloads button, action buttons, WebExtension buttons, which Firefox is handling differently compared to default buttons... Creating such a toolbar buttons CSS modification would mean to take care of many buttons individually. I will add experimental code, but can't promise it will work for all buttons.

@happysurf

• there is a short findbar on top css file in this collection ( https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/findbar_on_top.css ). I can add code inside that file users can "enable optionally" to increase findbars width to full window width.

• setting a global font size for everything might break the appearance of some items, that rely on default font size. Appbutton in titlebar would need adjustment. Too high font values for tab text would break squared tabs appearance, button badges (uBlock Origin) look weird etc.. Maybe something like:

* {
  font-size: 10pt !important;
}
#PanelUI-button, #PanelUI-button * {
  font-size: 12px !important;
}
.toolbarbutton-badge-stack .toolbarbutton-badge{
  font-size: 10px !important;
}

• tab text settings got recently added to this collection ( https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/custom_text_settings.css )

• CSS can not identify parts of url text on the whole url

[Aris-t2]

Noticed that, edited message afterwards. ;-)

[Acid-Crash]

@Aris-t2. Thx for the update regarding those buttons.
Experimental code will do. On the other hand I totally agree that if 2-4 pixels increase requires major changes and constant oversight for other buttons, it doesn't worth it so I will not be so sad about it.

@happysurf If you need to get rig of that light gray color for the domain part, you could flip browser.urlbar.formatting.enabled in about:config

[Aris-t2]

#urlbar-container #pageActionSeparator{
  visibility: collapse !important;
}

[Aris-t2]

You can look into default compact theme file and use any code you like:
chrome://browser/skin/compacttheme.css

[Aris-t2]

You have found Mozillas most complex button. It has multiple internal layers, which have to be adjusted once button size changes in some cases.

#downloads-button
#downloads-button .toolbarbutton-badge-stack
#downloads-button .toolbarbutton-text
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-icon
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-badge
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-icon
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer #downloads-indicator-progress-inner

Here is the code you need for your button width:

#nav-bar toolbarbutton .toolbarbutton-icon,
#nav-bar toolbarbutton .toolbarbutton-badge-stack {
  width: 90px !important;
  height: 25px !important;
}
#nav-bar .webextension-browser-action .toolbarbutton-icon,
#nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

(The .webextension-browser-action part is for buttons like uBlock Origins).

Share your bookmarks multiple lines code. I could add it to this collection too.

[Achille-Grs]

Thank you sooo much! Now work Perfecty! :-)

Here is the the code.

/* bookmarks multiple lines */

#personal-bookmarks {
display:block;
}
#personal-bookmarks #PlacesToolbar {
display:block;
min-height: 0px;
overflow-x:hidden;
overflow-y:auto;
max-height: 999px;
}
#personal-bookmarks #PlacesToolbar > hbox {
display: -moz-stack !important;
left:0px;
right:0px;
width: 100%;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
/display:block;/
overflow-x:visible;
overflow-y:visible;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
display:block;
}
#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}
#personal-bookmarks #PlacesToolbar .chevron{
display:none;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x:hidden;
overflow-y:hidden;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"]{
display:none;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display:none;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 2px;
padding-bottom: 2px;
margin-left: -4px !important;
padding-right: 10px !important;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
-moz-padding-start: 4px;
-moz-padding-end: 2px;
}
#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display:inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: left;
}
#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

[Aris-t2]

Pocket button is inside its own box. You have to move the whole box.

#pocket-button-box

Further more you have to disable "starbutton_is_last_pageaction_button" and "dropmarker_at_the_end". Both are enabled by default in this collection.

[Aris-t2]

Tools > WebDeveloper > Toggle Tools > Toolbox Options > Enable browser chrome and add-on debugging toolboxes / Enable remote debugging
Tools > WebDeveloper > Browser Toolbox

Now you can look for specific item ids, classes etc. like in Dom Inspector on older Firefox, but with less comfort.

"This project" does not create any new buttons. Its not a WebExtension, only a collection of user styles (CSS). Or did you mean why reload button of that extension is not colorized in this project?
The id of Reload in address bar add-ons button is

#_e1ed7a80-7c11-4f7e-968b-79b551a0067f_-page-action

Regarding "the same trick": the code for awesome rss was experimental and did not work. I forgot to remove it. That add-on offers different icons on its options page.

[Aris-t2]

@Achille-Grs

Change urlbar height with this:

#urlbar,
.searchbar-textbox {
  margin: 1px 2px !important;
  min-height: 0px !important;
  height: 24px !important;
}

[Aris-t2]

Try border, box-shadow etc. code for these items:
Menubar: #toolbar-menubar
Line above navigation toolbar:
#nav-bar, #navigator-toolbox::after

[Aris-t2]

Thanks, its working now. Guess there was on height <-> max-height misunderstanding from my side.

[Achille-Grs]

@Aris-t2

No problem, I'm glad you fixed!
And one more trick for bookmarks lines if you want, you can added one more code in the end of
css file "bookmarks_multiple_lines" :

---

#personal-bookmarks {
overflow: scroll !important;
overflow-x: hidden !important;
max-height: 50px !important;
width: 1880px;
}

---

It's a small scrolling bar on the right of navbar for those who have many bookmarks and do not want to have big height in navigation bar. (see pic)

[Aris-t2]

The 'about:config' tweaks area on main page offers a few other about:config settings. I listed all default preferences CTRs prefwindow offered switches for, removed those not present in Fx 57+ anymore and added a few new.

[Aris-t2]

Actually I removed that line on purpose for 'squared tabs' and 'squared tabs australized' appearances. In my opinion it feels wrong there, but good to know you can combine stuff like that.

[Achille-Grs]

@Aris-t2
New code about newatb dark theme.
And the line @import url(./css/about:newtab/newtab_dark_theme.css); must imported in "userContent.css" file.

newtab_dark_theme.zip

[Aris-t2]

@happysurf

/* auto-hide sidebar */
#sidebar-box:not(:hover) {
  min-width: 0px !important;
  width: 0px !important;
  max-width: 0px !important;
}

#sidebar-box:not(:hover) * {
  min-width: 0px !important;
  width: 1px !important;
  max-width: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

@cwl2
Thanks.

[NXij]

@Achille-Grs

.tab-background {
		background: linear-gradient(to bottom, #eeeeee 0%,#000000 100%);
}

Put that in a random active css file

[Aris-t2]

You need to extract the zip archive into your profiles /chrome/ folder. Afterwards edit userChrome.css and userContent.css files with any text editor and remove /* ... */ for the parts you wont to be active or add them to those lines, that should not be active. All this is mentioned on main page as well: https://github.com/Aris-t2/CustomCSSforFx

Version number in add-on manager and classic location bar popup are "active" by default after extracting everything from zip file to your profile folder.

To set custom tab colors for unloaded tabs you can either edit css\tabs\classic_squared_tabs.css css\tabs\custom_colors_for_squared_tabs.css file and look for the section labeled with "unloaded" tab.

Everything is done in a text editor, so I recommend to use something "professional" like Notepad++ over OS default editors.
Don't forget to restart the browser after modifying files.

[Aris-t2]

@rayman89
The "wonderbar" is called location bar and its classic popup is active by default once you extract all the files to "chrome" folder of your profile.
You do not have to change anything for that to be active:
Anyway it can be found in the "location bar" section of userChrome.css:
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L272

To find the area you need in classic_squared_tabs.css file you need to edit look here https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/classic_squared_tabs.css#L47

I believe you are doing something wrong, if the above lines do nothing for you. Don't forget you have to use the default browser theme or colorizing might not work properly.

It is very important to have a correct path set or nothing will work.
open about:support page, look for profile folder and hit open folder, make sure the opened folder contains a folder called chrome, where you extract the files to.
..../chrome/userChromes.css
..../chrome/userContent.css
..../chrome/css/...
..../chrome/image...
....

The preference to hide pocket is mentioned on the main page https://github.com/Aris-t2/CustomCSSforFx along with other about:config tweaks.
about:config > extensions.pocket.enabled > false

@Keith94
Thanks for the info. Which OS are you using. I don't see an warning, if the value is set to 0.

[reuk334]

Can I possible modify about:(...) pages with userContent.css file?

• http://kb.mozillazine.org/UserContent.css

[Acid-Crash]

Yes, guess this is doable. It would be great if Aris has plans to add such functionality in future.
To be precise I'm interested in about:addons tweaks:

• always view recent updates
  #category-recentUpdates[disabled] { opacity: 1 !important; min-height: 48px !important; }
• compact view for the page

[Acid-Crash]

Happy to Help, Aris
I had some issues with them too.
Guess it was because i used @namespace url(http://www.w3.org/1999/xhtml);
instead of @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Anyways currently this one works fine for me.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {

#category-recentUpdates[disabled] {
    opacity: 1 !important;
    min-height: 48px !important;
}
#category-discover {visibility: collapse !important;}
.addon {counter-increment: addoncount !important; content: counter(addoncount) !important;}
.addon:first-child {counter-reset: addoncount !important;}
.addon[active="false"] {counter-increment: disabled !important;}
#addon-list:after {
    display: block !important;
    width: 120px !important;
    content: "[ "counter(addoncount)" Включено | "counter(disabled)" Отключено ]" !important;
    color: #444444 !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: fixed !important;
    top: 11px !important;
    left: calc(50% - 112px) !important;
    cursor: default;}
}

[Aris-t2]

I'm currently looking into CTRs alternative appearances for about:addons and about:preferences.
Not only most of the code is portable, some other nice stuff is possible too.

[reuk334]

Maybe change search positon in settings (about:preferences), I propose tests:

/* search in right top corner */
	.search-container {
	  background: transparent !important;
	  position: fixed !important;
	  width: auto !important;
	  top: 60px !important;
	  z-index: 1 !important;
	  right: 60px !important;
	}

/* repair margin after change position search box */	
	.pane-container {
	  margin: 30px 0 0 0 !important;
	}

big window	smaller window

[Acid-Crash]

Hi Aris,
Do you have any plans on adding Australias style (default-one from FF56) module for tabs?
Also could you give some details whether number of included @import url(.*.css) inside userCrome.css affects browser speed in any way?

[Aris-t2]

I have no plans to work on curved tabs, I'm glad they are gone. ;-) They were the main reason I started to work on CTR back then.

No idea about how or if many imports have an affect on browsers speed/performance issue. Testing in Portable Firefox on a very old slow usb 1.1 stick might give some insight, if anyone wants to test.

[happysurf]

Aris, great work as always.
How hide the separator near to hamburger icon in 57+?

[Acid-Crash]

Hi Aris, I have I minor suggestion regarding classic_button_appearance_on_navbar.
Current module adds squared style buttons to navbar.
CTB offered an option to make those buttons rectangular.

Maybe you consider adding some more customization for those buttons (aka additional module to make them rectangular instead of squared)
P.S. Button height is totally fine here perfectly matched with addressbar

[happysurf]

Other interesting codes to add that I use:

/* Find Bar on top */
.browserContainer findbar, #viewSource #FindToolbar { -moz-box-ordinal-group: 0; width: 100% !important; }

/* Global text size UI */
* { font-size: 10pt !important; }

/* Active tab text in bold */
.tabbrowser-tab[selected="true"] { font-weight: bold !important; }

[happysurf]

Aris, is possible make in bold or change the color of the host in Location Bar?

[happysurf]

here is the code to set a custom location bar background color (will be added to this collection):

Thank you for reply but I don't want change the background but only the host text, in my screenshot is github.com.

[happysurf]

An other useless separator that take too much space in Location Bar when the Reader View is available.
Will be great hide the separator and move the Reader icon more close to the dots.

Inactive:

On mouse over:

[stampis]

Is there or will there be anyway to create new toolbars for the locationbar?
like such:

(excuse my poor paint skills, removed some text etc..)

[Aris-t2]

You can not create new toolbars at the moment. Nobody knows, if something changes once Mozilla releases a new toolbar API. They were supposed to come with something up for Firefox 57, but they didn't.

[Acid-Crash]

Hi Ares,
Don't know whether this is a bug or a Design choice.
In modules

• buttons_on_navbar_button_roundness_for_classic_appearance
• locationbar_border_roundness

border-radius is set to 12px.
I've noticed that when using a compact density mode affected elements have min-height/height set to 26px. Hence for maybe that roundness should be 13px instead of 12px?

[Aris-t2]

12px was the max value in Classic Toolbar Button, so I just adopted it.

[daveranan]

Is there a way to copy default theme styles and modify those? All I really want is to use default Dark theme but with the background and tabs styles from the Default theme. Dark theme is nice and easy on the eye but that complete dark background on tabs is retarded, no contrast what so ever.

[Achille-Grs]

Hi Aris and thank you for this beautiful settings in Firefox 57
(text from translator)

I have an issue with the download button.
In file "buttons_on_navbar_classic_appearance.css" I added "width 90px - height 25px"
and all buttons works perfect, except the dowload button when I press it, fails. (see pic).
Ιs there a way to fix it?

Thanks!
P.S: I made a css file with Bookmarks multiple lines if you want it.

[Aris-t2]

@Achille-Grs
Does the code work for you with more than two rows?

[Achille-Grs]

oops! Finaly only two lines works. Hmm... in Firefox 56 works fine.
but in 57.......? something is wrong and I don't know what to fix.
Maybe you can find the solution.

[Achille-Grs]

Multirow.zip

[MrGlasspoole]

Some questions:

1. Will it ever be possible to update your code through Firefox? Or maybe at least a Add-on that notifies about a new version?

2. Is it possible to move reload/stop into the location bar?

[Aris-t2]

@Achille-Grs
I kinow that add-on. Didn't it stop working properly a long time ago?

@MrGlasspoole

1. The code here is unrelated to Firefox/Mozilla servers. There won't be any "add-on/WE" notifier for this from me.
   There are however multiple Github notifier WEs on AMO, so they might help you with that, but the easiest way is in my opinion is to create a dynamic bookmark. No add-ons/WEs are required for that.

Visit https://github.com/Aris-t2/CustomCSSforFx/releases and click on your RSS/feed button. Add a dynamic folder to your bookmarks toolbar.

2. There are multiple WebExtensions, that already can do that. For example (there are also others):
   https://addons.mozilla.org/addon/reload-in-address-bar/
   https://addons.mozilla.org/addon/australis-refresh-in-url-bar/

[Achille-Grs]

@Aris-t2
The last update of this addon was 6/22/2016
https://addons.mozilla.org/el/firefox/addon/multirow-bookmarks-toolbarplus/?src=ss
In firefox 55 I decided to use Stylish addon. I make copy-paste the code of Multirow Bookmarks and then delete it to make the firefox as lighter as possible from unused addons.
Until that day the addon was working flawlessly.

[Achille-Grs]

@Aris-t2
As you can see in the picture, it is firefox 56 with stylish addon with css code for multiple lines and works fine. I realy hope you make it and fix this! :-)
Also on the tab new:tab I made the background transparency. It also does not work on firefox 57.

[motfis]

Can we make the icon in the library menu colored?

[Aris-t2]

@Achille-Grs
Mozilla did some changes to bookmarks toolbar, maybe that is why the Fx56 code for multirow bookmarks does not work. I haven't looked into it.

You achieved transparency with Stylish before not through userChrome/usedrContent, right?

@motfis
Sure, except "Screenshots", can't find its id in popup.

[Achille-Grs]

@Aris-t2
Yes! The transparency I haved it 2 years ago.
Here it is the old code:

---

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@media all and (-moz-windows-compositor) {
#main-window[stylish-url="about:newtab"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser,
#main-window[stylish-url=" "]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser {
opacity: 0 !important;
background-color:transparent !important;
}
#main-window[stylish-url="about:newtab"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content,
#main-window[stylish-url=" "]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content{
background-color: rgba(255,255,127,.0) !important;
}
#appcontent, #content > tabbox > tabpanels {
background-color: transparent !important;
}
}

---

I made copy-paste the code witthout the firsts two lines, but nothing happened.

[dimqua]

Is it possible at all to restore the old search-bar? I can't find any WE addon for this purpose.

[Achille-Grs]

@Aris-t2
Ok... no problem. I can live without the transparent in my new:tab. LoL :-)
Now the firfox is exactly as I wanted it to be. The only thing left to do is to get smaller urlbar height.
I tryed everywhere in the code to give height 25px as I did in the buttons but.... without result.

[dimqua]

I can't move the Pocket button, for example:

#pocket-button {
  -moz-box-ordinal-group: 100 !important;
}

This does not work. Why?

[dimqua]

I want to do the same trick with buttons of the Reload in address bar addon.

But how can I get an ID of this addon's buttons?

BTW, why is Reload in address bar (or an alternative) not supported by this project?

[SXZ1]

Hello, Aris!
I am currently trying to do the following: drag History icon to the navigation toolbar, click on it, there is "Recently closed tabs" folder. Is it possible to move the contents of this folder to the root of History icon menu (where "Recent history" is located)? Thank you!

[Aris-t2]

No, you can't move menus/menuitems/folders to a different level/node using CSS. Changes are only possible on the same level.

[NXij]

Is it theoretically possible to unlock the placement of the urlbar (make them draggable again) via -moz-binding and XML override?

Nevermind, the XML files in the repo shouldn't work anyways anymore.

[Aris-t2]

Might be possible, I haven't tested.

Rebinding add-on managers version number and location bars popup works fine in Fx57 and 58 on every OS I tested so far.

[Achille-Grs]

@Aris-t2
Hi again! My firefox finaly it's ready and completed from varius seetings.
Only two last settings are left, a line above the urlbar that I want to become transparent
and the name of menu bar -File-Edit-View-History-Bookmarks-Tools-Help- to use it in the css code.

Thank you again and I appreciate a lot for all your help!

[Achille-Grs]

@Aris-t2
Yes!!!!!!!!!!! The Firefox finaly is ready, Thanks to you Αri I did it!!!
The correct code for transparent line is:
#nav-bar, #navigator-toolbox::after {
border: transparent !important;
box-shadow: none !important;
}
And for #toolbar-menubar I added height: 20px to reduce the gap between them.

THANK YOU A LOT MY FRIEND ARI!

P.S: I try to fix the bookmarks multiple lines and when I do it I will notify you.

[Achille-Grs]

@Aris-t2
I have good news! I fix the bookmarks lines. hehe

The first code I gave you (for bookmarks multiple lines) was correct and did not need any change.
Αll that was needed was an addition height: 999px to the following code:

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
height: 999px !important;
}

That's all! see the pic for confirmation.

[MrGlasspoole]

I just found out there is browser.tabs.tabClipWidth
http://kb.mozillazine.org/Browser.tabs.tabClipWidth

Is there a difference between "tab_close_always_visible.css" and using that setting in about:config?

[Aris-t2]

@Achille-Grs
Not sure why, but the only change the code addition does for me is a higher bookmarks toolbar meaning there are always two lines even, if there are only a few bookmarks.

/* bookmarks multiple lines */

#personal-bookmarks {
  display:block;
}
#personal-bookmarks #PlacesToolbar {
  display:block;
  min-height: 0px;
  overflow-x:hidden;
  overflow-y:auto;
  max-height: 999px;
}
#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left:0px;
  right:0px;
  width: 100%;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x:visible;
  overflow-y:visible;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display:block;
}
#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}
#personal-bookmarks #PlacesToolbar .chevron{
  display:none;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x:hidden;
  overflow-y:hidden;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"]{
  display:none;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display:none;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 2px;
  padding-bottom: 2px;
  margin-left: -4px !important;
  padding-right: 10px !important;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  -moz-padding-start: 4px;
  -moz-padding-end: 2px;
}
#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display:inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: left;
}
#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {
  height: 999px !important;
}

@MrGlasspoole
The code in "tab_close_always_visible.css" literally forces 'visibility: visible' and 'display: block' rules on every tabs close button.

tabClipWidth hides close button on tabs with a smaller width value than set in the preference probably using the same rules internally.

[Achille-Grs]

@Aris-t2

Aris I'm sorry, it is my own mistake that I did not write more specifically.
The code:
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) {
height: 999px !important;
you must to create a new css file with title: navigatorbar_height_for_bookmarks.

and......

@import url(./css/bookmarks/navigatorbar_height_for_bookmarks.css);

[Achille-Grs]

Me I writted the code in the file chromeUser.css

You can choise the way you like it.

[Aris-t2]

It does not matter, if you put the code in userChrome.css or import it via @import from there.

I've tested your code in userChrome.css with and without this projects files, with and without toolbar buttons on bookmarks toolbar and the result is always the same. Now with the latest addition there are always two lines even, if only one of them is filled with bookmarks. Once there are enough bookmarks for three lines, bookmarks jump there, but bookmarks toolbars height does not extend to a third row.

Upload your 'chrome' folder somewhere, so I can look, if something else is different.
Maybe others can run tests with the above code too.

[Achille-Grs]

@Aris-t2

Good idea! Here is the "chrome" folder after one last modifycation and screenshot with 6 lines.

chrome.zip

[NXij]

Hi, I managed to make unmovable elements movable again (urlbar in this example) via xul overlay. It should persist updates aswell (incase chrome.manifest is wiped every update, it can just be locked in the filesystem)

1. chrome.manifest in firefox.exe dir
   override chrome://browser/content/browser.xul custom.xul

2. create custom.xul in firefox.exe dir with the following content

<?xml version="1.0"?>
        <toolbaritem id="urlbar-container" removable="true">

It is not a css edit, but it should be alot of fun anyways.

Edit: Oddly enough I can not reproduce this, even though my urlbar is now movable.
It seems that I may have bugged something out as the urlbar remains movable even when the custom.xul is empty. It is however not possible to move it while the chrome manifest points to a different xul file.

[hopalongrock]

Hello Aris!

Could you implement the larger and more visible "tab close" icons similar to FF 56 ?
Thank you!

[Aris-t2]

@NXij
Thanks, good to know stuff like that is possible. There is also a similar trick to get JavaScript files to work in Firefox 57+.

@hopalongrock
More close icon settings known from CTR will be present on next release.

[MrGlasspoole]

Can you please write the release number into the userChrome.css so we know what we have downloaded last.

[Aris-t2]

Sure

[Achille-Grs]

@Aris-t2

Hi! I have something new.
#fullscreen-warning,#full-screen-warning-container{ display: none !important; }
This code turn off the "Performed on a full screen" message, when you watch a video in a full screen mode anywhere in the internet.

[Aris-t2]

Great.
I'm using these prefs and don't see any full screen warnings either:
about:config > full-screen-api.warning.delay > 0
about:config > full-screen-api.warning.timeout > 0

[Achille-Grs]

AAAAA I didn't know that! Υou 're right, I will prefer your own arrangements. :-)

[Achille-Grs]

@Aris-t2

Hi again! I've modified the active tab from your css code and the result is this.
pic 1: only black border
pic: 2: black border with blue top line
I hope you like it.

/*border color*/ .tabbrowser-tab[selected="true"] { background-color: #000000 !important; font-weight: bold !important; }

/*top line color*/ .tabbrowser-tab > .tab-stack > .tab-background > .tab-line[selected=true], .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) { background-color: #0000ff !important; opacity: 1 !important; }

[happysurf]

Auto-hide sidebar?

[cwl2]

Hi Aris. A very minor error in custom_colors_for_squared_tabs.css. The descriptive comments for hovered new tab and new tab are reversed. Caused me some momentary confusion when changing some colours :-).

Possible new system distribution?

• aka github.com/WaldiPL/purplePrivateWindows
• nope

[NXij]

It appears that he is using the WebExtensions theming api or something alike. It should only be able to change colors sadly.

[Aris-t2]

According to previous plans a "future" theming api should be able to change browser appearance the same way current compact themes (Light/Dark) do.

This means changing tab and toolbar colors can be achieved by that api.
Most likely the browser selects dark and white icons automatically, but it may also be possible to force own icon colors in the future.

Any body recommend merge program (user frendly) for Windows?

---

New code about newatb dark theme.
And the line @import url(./css/about:newtab/newtab_dark_theme.css); must imported in > "userContent.css" file.

newtab_dark_theme.zip

Maybe more contrast in dark about:home?

Image

---

findbar_on_top.css#L32

.browserContainer findbar,
#viewSource #FindToolbar {
  -moz-box-ordinal-group: 0;
  position: fixed !important;
  margin-top:-1px !important;
  box-shadow: unset !important;
  border: 1px solid #aabccf !important;
  border-top: 0px solid transparent !important;
  border-radius: 0 0 3px 3px;
  transition-property: margin-top, opacity, visibility !important;
  opacity: 0.95 !important;
}

In my browser is to hight and reset to 0 - margin-top: 0 !important;.

[Achille-Grs]

@Aris-t2

Hi Aris!
I'm trying to put two colors background in the tabs like firefox 56. (see pic)

In the photo as you see, I made it with your add-on CTR puting first color on top side #eeeeee and second color on bottom side #000000 and I want to do the same in firefox 57 but I can't fix it.

[Acid-Crash]

Hi @Aris-t2.
Is it possible to modify icon overall badge styling (in particular making their border-radius bigger)?

[Aris-t2]

@userOperaFF

Any body recommend merge program (user friendly) for Windows?

Editing CSS/text files is as "user friendly" as it gets ;-)
After copy and pasting all the files from the archive, one has to manually edit the main files to create the best configuration. The "default" configuration is applied without editing anything, but not everything can be active at the same time, so there is always something to do at least once.

about:home does not look like this in Firefox 57+. Here is how it looks for me on a clean profile with "dark background code applied":

I will tweak findbar colors and set them in toolbars/general_toolbar_colors.css too, so it matches bookmarks/nav-bar color. You won't need to change "margin-top:-1px !important;" unless you don't use toolbars/general_toolbar_colors.css set by default.

@Achille-Grs
Regarding custom tab colors, look into tabs/custom_colors_for_squared_tabs.css file.

Badges are just default "labels", so not every CSS rule applies to them. While you can increase or decrease font size or add a border color, one can not change the border radius (at least I don't know a way).

about:home does not look like this in Firefox 57+. Here is how it looks for me on a clean profile with "dark background code applied":

I suppose this old version no hide if not create clean profile, reset from about:support no change this.

I will tweak findbar colors and set them in toolbars/general_toolbar_colors.css too, so it matches bookmarks/nav-bar color. You won't need to change "margin-top:-1px !important;" unless you don't use toolbars/general_toolbar_colors.css set by default.

OK Persona bug?

[Aris-t2]

@userOperaFF
No idea, I only test/work with new profiles in Firefox 57+. Make sure you are not using any add-ons, that can change/override newtab page / about:home during testing.

LW-themes/Personas do not override findbar for many Firefox versions now.

[rayman89]

I dont understand how to use the release download. I Know where to paste it but now how to enable and disable things and stuff like that.

Could someone please tell me what lines to add to show the version of the addons in the addon manager and reduce the "wonderbar" (where you type the url) dropdown menu width to be the width of the bar.

BTW is it possible to change the color of tabs that are not loaded and hide pocket button?

[rayman89]

@Aris-t2 Thanks for your response what about the hide pocket button and educe the "wonderbar" (where you type the url) dropdown menu width to be the width of the bar like the screenshot you posted shows?

Edit: I tried changing the color and stuff but when I enable

@import url(./css/tabs/classic_squared_tabs.css);
@import url(./css/tabs/custom_colors_for_squared_tabs.css);
@import url(./css/tabs/custom_text_settings.css);

Nothing seems to change and I looked at those files and they seem to have some default config liek changing the text to blue and stuff but nothing is happening am I doing somethig wrong? (BTW other changes do work but not text or tab color).

[Keith94]

@Aris-t2 I'm using Windows 8 and Nightly. I always used to see the warning if I accidentally moved my mouse to the top of a fullscreen video, but using a -1 value fixed it for me.

[Aris-t2]

@Keith94
Are you also using these two?
full-screen-api.transition-duration.enter
full-screen-api.transition-duration.leave

[Keith94]

No, I left those untouched.

[Aris-t2]

Maybe that is the reason. I've set them to 0 0 both.

[rayman89]

@Aris-t2 I noticed what was the issue. I had some code on my old user chrome that I pasted into your file and this lines that my old code had

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@namespace html url(http://www.w3.org/1999/xhtml);

broke the code somehow.

[Aris-t2]

You don't need any @namespace entries inside your css files.
userChrome.css can only access chrome ui anyway and userContent does affect websites and internal "about:" pages.

Your combination forced the code to be limited to web pages inside userChrome.css which does not work and causes everything in it to be ignored.

Only use the code this project provides without any other custom/own tweaks while testing.

/*	older New tab and Home in dark theme - better contrast (experimental) 
		http://caniuse.com/#feat=css-placeholder			*/

#searchText::placeholder, #newtab-search-text::placeholder {
	color:black; 
	opacity:0.6
	}

#snippets {
	color: inherit !important;
	}

LW-themes/Personas do not override findbar for many Firefox versions now.

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

---

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