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]

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!

[Aris-t2]

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

nav-bar, #navigator-toolbox::after

[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

[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)

[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. :-)

[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.

[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; }

[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

[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 :-).

[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.

[ghost]

Possible new system distribution?

• [ ] aka github.com/WaldiPL/purplePrivateWindows
• [x] 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.

[ghost]

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.

[NXij]

@Achille-Grs

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

Put that in a random active css file

[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).

[ghost]

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?

[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.

[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]

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]

@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.

[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 code>@namespace</code 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.

[ghost]

/*  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?