search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.84k stars 181 forks source link

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

Closed Aris-t2 closed 6 years ago

Aris-t2 commented 6 years ago

Continued from here https://github.com/Aris-t2/CustomCSSforFx/issues/3

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

Things not possible with CSS

AMGPilot commented 6 years ago

@Aris-t2 ,

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

Thanks!

Aris-t2 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

ghost commented 6 years ago

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

image

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)

p1tu1988 commented 6 years ago

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

the-j0k3r commented 6 years ago

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

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

feedback page

Aiolikos commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago 
#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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

teijiIshida commented 6 years ago

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

p1tu1988 commented 6 years ago

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

Aiolikos commented 6 years ago

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

p1tu1988 commented 6 years ago

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

Aris-t2 commented 6 years ago

@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

p1tu1988 commented 6 years ago

Thank you Aris-t2, fixed up.

Aiolikos commented 6 years ago

@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 commented 6 years ago

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

jmcken1 commented 6 years ago

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: menu_icon

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

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: old_osx_dl_icon_before

Activated custom download button: old_osx_dl_icon_after

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: aeroglass_pale_bar

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)?: menu_button_tabs_bar

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 commented 6 years ago

@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: https://github.com/Aris-t2/CustomCSSforFx/issues/46

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

AotrsCommander commented 6 years ago

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 commented 6 years ago

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

“Transparent” toolbar with brighter stripe

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

half-stripe

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

jmcken1 commented 6 years ago

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

icons

aflove65 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

ghost commented 6 years ago

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

image

chriscjs commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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.