[!] GENERAL discussion, feedback, questions belong here! (v7) #189
Comments
|
hi. followup to comments at #163 ... I've not added any of 'my own code' for chrome ... at least not knowingly. With my_userChrome.css containing, now, I (still) have:
|
|
Add the code to the bottom of your userChrome.css, just to be sure. |
|
adding that^ same code to userChrome.css does the trick -- or, at least, has a noticeable change:
checking ... oh %$%! I just noticed in userChrome. I'd completely missed the fact (reading only about it in online posts) that that needs to be UNcommented. Doing that, and rm'ing the code from userChrome.css, now ... the change does appear. (1) PEBKAC! |
|
Try to increase bookmark toolbars padding more than in the above code: #navigator-toolbox #PersonalToolbar {
min-height: 30px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}Are your bookmarks on bookmarks toolbar or on another toolbar? |
That works as expected,
Yes, my displayed-in-browser bookmarks -- above the TABs, below the NAV -- are on the "Bookmarks Toolbar" |
|
When I upgrade CustomCSSforFx, I keep my previous version, and update it by incorporating the changes I find in the latest usercharome.css and usercoontent.css at https://github.com/Aris-t2/CustomCSSforFx/releases, which i also compare with the latest release version. But over the course, and especially lately, I find that the changes on the release page don't always match the latest CustomCSSforFx userchrome/css and usercontenet.css release. Which source should take precedence, the release page or the latest version? |
I removed all the custom code for tab height in userchrome.css you gave me in the past and then altered general_variables.css
That worked. Thanks |
|
What happened to thread #163? Too long? I don't see anything in your tabs_multiple_lines_v2.css that would remove the tab separators, unless it's the code below - "border-left: unset." They weren't too obvious, but I need some of that "crap!". :)
Without searching the custom Linux Cinnamon theme I use - which styles almost EVERY possible thing in Mint & all apps, the theme probably just changed the color of what they call "border-left" on the tabs. So if only a left border is applied to each tab & if it's 1px, the separator is only 1px wide. The config/general_variables.css has --classic_squared_tabs_tab_height: 26px, You might want to add to the comment(s) in custom code - what is being removed from the Fx native theme when that's the case, |
|
I don't see right off how to override the 32px tab height. There are many other times that tab height is mentioned in the tabs_multiple_lines_v2.css, like: Changing the first instance of that, from 32px to 28, |
|
@bendover22 A lot of CSS code used in this projects files change or remove stuff, it would not be possible to protocolize specific changes inside userChrome.css. You are right about the code you pointed out. It hides tab separators, so remove it to restore the default ones the browser sets. The value If you are using default browser tabs, you have to override the variable It looks a bit complex, but that is how this project simulates an add-on. Edit Try to override that files variable in root area like this:
|
|
Thanks Aris. Umm... there is no "--tab-min-height" (all tab height declarations have the "_mlt" at the end), other than: --tab-min-height_mlt: var(--tab-min-height,32px);. 1st question: using "tabs_multiple_lines_v2.css," are the tabs supposed to be below the title bar (if title bar is shown) & against the nav bar's top edge? That's how it displays for me. All the files included in your "css" folder in the zip pkg are in the folder - inside my /chrome folder, but I also compared the original multiple_lines file against the one in my /chrome/css folder. They're identical except for changing the 32px to 28, and commenting out the section that removes borders. Looking further, it may have to do w/ the multi-row scrollbar. When I enter Fx's customize mode, it shows where the scrollbar would be (even when only 1 tab row, when the scrollbar is hidden). In customize mode, the bottom of the scrollbar channel is below the (normal) bottom of tabs, w/ just 1 row. I'm not sure why it's adding an extra 19px high blank area, below the tabs, but that's the issue. The scrollbar's min length / height (hidden when only 1 row of tabs) may be causing it to add an additional blank space - BELOW the tab content box. I can't upload screen shots - not allowed? I'm fairly certain I'm using the native tabs (size, shape). Only color styling; where favicons are placed (closer to L end); removing fading of tab content; hiding tab close button until hovered. What I see w/ tabs_multiple_lines_v2.css in .mozilla/firefox/{profile-name}/chrome/css/ is the actual tab content box w/ the borders is 33px h. That's including a top border of a 2px & a 1px, top-only border = 3px. I'm fairly sure the 3px top border for the selected tab is default value (switching to the themes incl. w/ the distro - Mint 18.1). All themes have same behavior & the new problem w/ multi rows. The Linux themes & my custom theme all gave the same size tabs (as before trying multi tab rows). I was part right y'day. The "tabs" content box itself is 33 px (incl. the 3px top border). |
|
Yes, it appears the scrollbar for tab rows was causing the 19px high blank space under tabs; I commented out every declaration that mentioned "scrollbox" & the 19px blank space went away. FYI, w/o the custom css > multi tab rows code for a scrollbox being active, my UNselected tabs are 33px H (content box + a 1px border- bottom of unselected tabs). I'll have to DOUBLE check that tomorrow. In the "tabs_multiple_lines_v2.css" code, it's a possibility the bottom of the new tab button is below the bottom of (my) tabs. In "tabs_multiple_lines_v2.css" , I don't know how to shrink the scrollbox & arrows, etc, so they're not longer or lower than the tabs are high. Not w/o screwing up their function. Is it possible to scroll tab rows w/ a mouse - same as a web page & ditch the scrollbar? I know how to set sizes, margins, padding, etc. I don't know all the options (& syntax) that can be used w/ scrollboxes on the tabs bar. |
|
how can i change the context-navigation,#context-forward color to red and #context-back,menuitem, to blue i tried changed it but it didn't work. https://i.imgur.com/7X2P5qa.gifv ##context-navigation menuitem[disabled=true], #context-navigation menuitem[disabled=true], #context-navigation menuitem[disabled=true], |
|
@bendover22 There is code in https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_multiple_lines_v2.css#L57 to prevent a horizontal scrollbar, but you might want to try this one: #TabsToolbar,
#tabbrowser-tabs,
#tabbrowser-tabs * {
overflow-x: hidden !important;
}Keep in mind there is a "multirow tabs" support thread present here: #39 @LionWrathz |
|
Is it possible to figure out the source image of a particular extension icon? For example, I've gotten used to keeping the StumbleUpon StumbleBar icon next to the home button in the navbar. I'm not asking for this to be implemented in official code or to add this functionality, I'm simply asking if it's possible to find such a thing and later add it in manually via JavaScript. The reason being, the mentioned extension isn't being maintained anymore and has been removed from Mozilla's add-on site. I still have it installed but I will be removing it shortly. |
|
You could either find the image using developer tools like mentioned on main page or you could unpack the add-on, which is still in your profiles folder somewhere, |
|
Aris, if you can implement any of these suggestions, I hope (pretty sure) they'd save you time in the long run. It never dawned on me & surely others, to read all "issues" titles on that page. |
|
Well, its Github not a forum, so there is no such thing as "Official Discussion Threads Main Page" and of course there are no forum features for issue threads. ;-).
Because of that the main threads are mentioned within userChrome.css and in the issue template. |
|
Latest Nightly introduced a redesign of add-ons manager. To view it, load about:config and search for extensions.htmlaboutaddons.enable . Toggle preference to TRUE and load about:addons. |
|
I've seen this new change. Here is the code to break the new nonsense ;-) @namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
body > div#main {
margin-inline-start: 0px !important;
margin-inline-end: 0px !important;
margin-bottom: 4px !important;
max-width: unset !important;
background: linear-gradient(to bottom right, #f5f5f5,-moz-Dialog,#f5f5f5,-moz-Dialog) !important;
}
body > div#main > div.list-section .addon.card {
margin-bottom: 4px !important;
}
body > div#main > div.list-section .addon.card:hover {
background: Highlight !important;
color: HighlightText !important;
}
body > div#main > div.list-section .addon.card:hover span {
color: HighlightText !important;
}
body > div#main > div.list-section[type="disabled"] {
opacity: 0.8 !important;
} |
|
Edit: now I see why couldn't upload images in posts. Only when you click the "attach files" bar below, another script tries to load that needs permission, or else image uploads fail w/o meaningful error message. |
|
@bendover22 |
|
Hello i find those pages really useful, but sadly i can't find a solution to the new Firefox 65 changes. I use from a lot a time a personal css to make tabs thinnier, but now i have a bug: when i open a lot of tabs, and the arrowsrollbox appear, the newtab button changes automatically appeareance and it becomes awful. Can someone suggest me a fix for this new Mozilla insanity? #TabsToolbar > toolbarpaletteitem, #TabsToolbar > toolbarbutton {margin: unset !important;} |
|
Hello again @Aris-t2 #PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}
#PlacesToolbar,
#PlacesToolbarItems {
overflow: visible;
display: block;
}
#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}Now, the code working perfect without limit for multiple lines, like firefox 65. |
|
Try this code or create a mod based on it: .tabs-newtab-button .toolbarbutton-icon {
min-width: 0px !important;
min-height: 0px !important;
width: 14px !important;
height: 14px !important;
margin: 0px !important;
margin-bottom: 0px !important;
padding: 0px !important;
}@Achille-Grs |
|
For next update: typo |
|
Can you help me with the multi row tabs overlapping the personal (bookmark) toolbar? Firefox 65.0.1, CustomCSS v2.4.3. @import "./css/tabs/classic_squared_tabs.css"; When I shrink my browser width, the tabs overlap the bookmark bar. Firefox 64.0.2 Firefox 65.0.1 before shrinking width Firefox 65.0.1 after shrinking width |
|
OK. Started clean with 2.54 Back and forward very good with a small exception. If no history, looks like this:
As soon as there is history and I return, looks as expected:
Thanks! |
|
Well you have a very weird toolbar setup. Why would you place your back and forward buttons between location bar and search bar? The option Edit Instead of #main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button:not([disabled="true"])::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button[disabled="true"]::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button[disabled="true"],
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button {
opacity: 1.0 !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button[disabled="true"] .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button .toolbarbutton-icon {
opacity: 1.0 !important;
background: #f9f9fa !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button:not([disabled="true"])::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button[disabled="true"]::before {
display: block !important;
content: "" !important;
width: 32px !important;
height: 32px !important;
-moz-margin-start: -31px !important;
-moz-margin-end: -9px !important;
border-radius: 10000px !important;
background: #f9f9fa !important; /* #ddebf9*/
position: relative !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button .toolbarbutton-icon {
width: 38px !important;
height: 30px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
-moz-padding-start: 12px !important;
}Edit 2 |
|
Hah! Been like that since well before I ever used Firefox Ver 1 or 3 - wherever I started that route. Convenient for me. Less mouse travel than to the left end of the bar. I'll try this code and let you know. Thanks. ~Bob |
|
REALLY close. Paints the background on the Back button and portion of the toolbar. Other than that, perfect. Had no idea I was such an outlier on this one.
|
|
I updated the code. |
|
Almost:
And thanks for all this Aris. I will have to find a way to repay on this project. I will have that last tough one after this one done. |
|
Add this code too (Most of the glitches are caused by your theme, which causes button transparency look fishy. Code worked right away with the default one ;-)): #main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button[disabled="true"] .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button .toolbarbutton-icon {
opacity: 1.0 !important;
background: #f9f9fa !important;
} |
|
That makes them both white buttons:
Getting close to gone for the day. Will look further tomorrow. Thanks for helping. Just for comparison, here is the 56 version: |
|
We are obviously much close than we started. |
|
It won't get any closer. Transparency requires those buttons to use solid colors. Otherwise you will see one button behind the other. |
|
Release notes for v. 2.5.5:
Good solution! But what a switch? The style made active?
Though it’s not that important: Maybe, but not the little one I have pointed to. |
|
|
Purple " |
|
It gets overridden anyway. |
OK. I colored them which I think looks a bit better, but realize these are always in the active state and do not change based on whether there are back or forward pages to go to. Can we fix that? This is with no forward or back pages active:
And I think would be nice, but not at all a requirement, for the toolbar buttons to be colorized and yet keep this gray scale. Once i can get this one put to bed will post the final one or two. Thanks! |
/* disabled state */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar :-moz-any(#back-buton,#forward-button)[disabled="true"] .toolbarbutton-icon {
background: grey !important;
}
/* hover state */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar :-moz-any(#back-buton,#forward-button):not([disabled="true"]):hover .toolbarbutton-icon {
background: blue !important;
}
/* active state */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar :-moz-any(#back-buton,#forward-button):not([disabled="true"]):active .toolbarbutton-icon {
background: green !important;
} |
|
Thanks. I tried placing that in my_userChrome.css with the other code an no change. I tweaked the code a little, though the states were not changing before my tweaks. Code now is: Looks like this now at all times.
56, of course looks like this:
Thanks again. |
|
More fiddling with about:addons, Themes. |
You might have missed this, but trying your code above to change states did not work for me as mentioned above. Can we get these buttons to show active or dormant? And that brings me to my last issue :) I have played a lot with location bar settings but cannot get close to what I have in 56 for the dropdown in 68. Here is what I see: 56 (blurred for privacy but shows two lines, data, nice layout):
68 (not so nice. but best I could achieve):
If I try for two lines of data they overlap. Would love to solve these two. Thanks again. ~Bob |
|
@rebop #main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button[disabled="true"] .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button[disabled="true"] .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button:not([disabled="true"])::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button[disabled="true"]::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button[disabled="true"],
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button {
opacity: 1.0 !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button:not([disabled="true"])::before,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button[disabled="true"]::before {
display: block !important;
content: "" !important;
width: 32px !important;
height: 32px !important;
-moz-margin-start: -31px !important;
-moz-margin-end: -9px !important;
border-radius: 10000px !important;
position: relative !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button + #forward-button .toolbarbutton-icon {
width: 38px !important;
height: 30px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
-moz-padding-start: 12px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button[disabled="true"] .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button[disabled="true"] .toolbarbutton-icon {
background: lightgrey !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button:not([disabled="true"]) .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button:not([disabled="true"]) .toolbarbutton-icon {
background: red !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #forward-button:not([disabled="true"]):hover .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button:not([disabled="true"]):hover .toolbarbutton-icon {
background: blue !important;
}Your second request can be achieve by enabled this option: |
|
Continue here: #211 |
and others
Make sure you updated to the most recent version of this projects files "before" reporting problems!
Continued from #3, #41, #88, #109, #133 and #163.
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.
Custom JS scripts to restore more classic features
https://github.com/Aris-t2/CustomJSforFx
Trying to make CSS code ready for Firefox Quantum (57+)?
Remove all
@namespacereferences. 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
The text was updated successfully, but these errors were encountered: