[!] GENERAL discussion, feedback, questions belong here! (v7)

[Aris-t2]

Make sure you updated to the most recent version of this projects files "before" reporting problems!

Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133 and https://github.com/Aris-t2/CustomCSSforFx/issues/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 @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)
• custom/new/different functions for buttons/menuitems/menus
• activity indicator
• preference/options window
• additional location bar
• favicon in location bars identity box
• moving menubar items to a different toolbar
• restart button
• ... many more

[ghost]

@Aris-t2

hi. followup to comments at https://github.com/Aris-t2/CustomCSSforFx/issues/163 ...

I've not added any of 'my own code' for chrome ... at least not knowingly.

With my_userChrome.css containing, now,

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#navigator-toolbox > #PersonalToolbar {
  min-height: 30px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

#main-window #navigator-toolbox #TabsToolbar .tabs-newtab-button,
#main-window #navigator-toolbox #TabsToolbar #new-tab-button {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

I (still) have:

[Aris-t2]

Add the code to the bottom of your userChrome.css, just to be sure. You could also test a new browser profile. On your screenshot I see no code changes at all neither bookmarks toolbar nor tabs toolbar.

[ghost]

@Aris-t2

adding that^ same code to userChrome.css does the trick -- or, at least, has a noticeable change:

checking ... oh %$%! I just noticed

/* @import "./my_userChrome.css"; /**/

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! (2) duh ... (3) sry for the confusion !!

[Aris-t2]

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?

[ghost]

Try to increase bookmark toolbars padding more than in the above code:

That works as expected,

Are your bookmarks on bookmarks toolbar or on another toolbar?

Yes, my displayed-in-browser bookmarks -- above the TABs, below the NAV -- are on the "Bookmarks Toolbar"

[nollinvoyd]

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?

[nollinvoyd]

@Aris-t2

By complete package I mean the full release of this projects files: Aris-t2/CustomCSSforFx/releases

Backup your /chrome/ folder, extract all files from releases zip file into a new empty /chrome/ folder. Change tab height in general_variables.css ( /classic/config/general_variables.css@master#L9 ).

I removed all the custom code for tab height in userchrome.css you gave me in the past and then altered general_variables.css

/* general settings */ :root { /* custom height for 'classic squared tabs' only */ --classic_squared_tabs_tab_height: 21px !important;

That worked. Thanks

[bendover22]

What happened to thread #163? Too long? I added only tabs multiple lines v2 @import in my own userChrome; and added the custom "CSS" folder & files to my profiles /chrome folder. It works, and all the tabs styling I previously did in userChrome - still worked. Except the vertical lines / separators between adjacent tabs.

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!". :)

/* remove **_crap_** set by Firefox 58+ */ .tabbrowser-tab::after, .tabbrowser-tab::before { border-left: unset !important; border-image: unset !important; border-image-slice: unset !important; border: 0 !important; }

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, but tabs_multiple_lines_v2.css has 32px for max height. Why such a difference? I'm undecided on the easiest way to keep up with where I'm making changes to your custom code. Making changes in the userChrome & others in one of many files in the config folder could get confusing.

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, Thanks!

[bendover22]

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: `#tabbrowser-tabs,

tabbrowser-tabs > .tabbrowser-arrowscrollbox {

min-height: var(--tab-min-height_mlt)` I'm not familiar w/ "mlt."

Changing the first instance of that, from 32px to 28, --tab-min-height_mlt: var(--tab-min-height,28px); where you comment, "set your own value here if used w/o configuration files," didn't reset the tabs' height to the original 28 - if it was supposed to do that.

[Aris-t2]

@bendover22 Yes the previous thread was too long. (you can see "v7" indicates this is the seventh general support thread alraeay ;)).

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 32px in tabs_multiple_lines_v2.css is only a fallback value, the real one is set inside the variable --tab-min-height_mlt, which itself gets the value from --tab-min-height (a default browser variable). The later one gets override by a value in classic_squared_tabs.css, if this one is active.

If you are using default browser tabs, you have to override the variable --tab-min-height manually or replace --tab-min-height_mlt: var(--tab-min-height,32px); with --tab-min-height_mlt: 30px !important;.

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: --tab-min-height_mlt: 30px !important;

[bendover22]

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);.
At least, it's not in aris-custom_css_for_fx_v2.3.6 / 2.4.2 - "tabs_multiple_lines_v2.css." I'll try the last line you showed, but I think the problem may be due to the vertical scrollbar for multi tab rows. It's longer than the tabs' content box. You'll have to read - I can't upload screens? Not allowed?

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 @import "./css/tabs/tabs_multiple_lines_v2.css"; is the only @import line I added to the top of my userChrome.css..
I didn't use your userChrome.css.

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. I could add the line you mention - if you give me the full code, but we've got other problems. Maybe you're thinking another file that line is in? Or did you mean from line 17?: --tab-min-height_mlt: var(--**tab-min-height**,32px); Changing height there doesn't fix the problem that I'm seeing. It's not really the "tab" height that's the problem. Read on.

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. NONE of that is affecting the problem of it adding a blank space below each tab content box. (No, the "classic_squared_tabs.css isn't active - so far).

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). _Below the tabs is where the problem is, as soon as I added the CSS folder in /chrome & added the line in my userChrome.css to import "tabs_multiple_lines_v2.css."

I was part right y'day. The "tabs" content box itself is 33 px (incl. the 3px top border).
As said, I changed the line: --tab-min-height_mlt: var(--tab-min-height,28px). As you said, that doesn't strictly set the height. Then apparently, the code in tabs_multiple_lines_v2.css caused it to add another 19 px H "blank space" below the tab content box, on EACH of 3 rows. Overall, that makes each tab row 54px H.

[bendover22]

Yes, it appears the scrollbar for tab rows was causing the 19px high blank space under tabs; whether there was 1, 2 or 3 tab rows.

I commented out every declaration that mentioned "scrollbox" & the 19px blank space went away. Unfortunately, so did multi row tabs. I figured it would, I wanted a quick way to see if the tab rows scrollbox was causing the 19px high blank area under tabs. It apparently was - or something else in the declarations that also mentioned scrollbox.

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. Selected tab is same overall, but has a 2px bottom border, so the selected tab content box "shrinks" to stay the same 33px ht as unselected tabs.

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 customize mode, the selected tab's 33px H (will re-check); the bottom of new tab button is 41px (from the top of selected tab) - that may be one problem. Unless they shift when in customize mode. In same customize mode, the scrollbox ht = selected tab = 35px. two px taller than tabs. I don't know if their positions in customize mode proves anything.

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.

[LionWrathz]

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-forward,menuitem,

menu[disabled=true], menuitem[disabled=true] { color: red !important }

context-navigation menuitem[disabled=true],

context-back,menuitem,

menu[disabled=true], menuitem[disabled=true] { color: blue !important }

context-navigation menuitem[disabled=true],

menu[disabled=true], menuitem[disabled=true] { color: blue !important }

[Aris-t2]

@bendover22 Your posts are too long to read. ;-) Post a screenshot of your problem.

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

@LionWrathz Look here to see how to change icon colors of these context menu icons: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/context_bfrsb_icons_colorized.css

[That-Random-Guy]

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.

[Aris-t2]

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, about:support > add-ons/extensions > name Search for the id of it within profile folder.

[bendover22]

Aris, if you can implement any of these suggestions, I hope (pretty sure) they'd save you time in the long run. The support threads / discussions are on the "issues" page, not " Official Discussion Threads Main Page." :) Just sayin'. It's great to have them! Click the ! icons beside the threads (I did). It says "open issue." Today, it also says: "18 Open Issues." Just pointing out - this is a very unusual way to list official discussion threads / forums mixed among real bugs reports.

It never dawned on me & surely others, to read all "issues" titles on that page.
Maybe put a button or link w/ large text at top of Issues page: "LIST OF ALL DISCUSSION THREADS," w/ drop menu & links to all discussion threads. A little work, but easiest to get users to correct place. There's a "Labels" button - most wouldn't assume that's to sort issues by: "Discussions." You could add note explaining it. Most new users won't know what "Labels" is for unless they use Github a lot (I don't).

[Aris-t2]

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

It never dawned on me & surely others, to read all "issues" titles on that page.

Because of that the main threads are mentioned within userChrome.css and in the issue template.

[Pizzapops]

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. Typical Mozilla design: takes way too much screen real estate and adds more mouse clicks. My Aris enhanced Add-ons Manager shows all active add-ons on one page and inactive add-ons on a following half page. The new design is six pages. If only someone would do an AiOS style. Sidebar Add-ons Manager.

[Aris-t2]

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

[bendover22]

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.

[Aris-t2]

@bendover22 You can just drag & drop images into your post above, between or right after the text you typed.

[JonnyThree]

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? This is my code:

TabsToolbar > toolbarpaletteitem, #TabsToolbar > toolbarbutton {margin: unset !important;}

tabbrowser-tabs,

tabbrowser-tabs > .tabbrowser-arrowscrollbox,

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {min-height: 22px !important; max-height: 22px !important;}

TabsToolbar .tabs-newtab-button .toolbarbutton-icon {width: 18px !important; height: 18px !important; padding: 2px !important;}

navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {padding-bottom: unset !important;}

navigator-toolbox[movingtab] #tabbrowser-tabs {padding-bottom: unset !important; margin-bottom: unset !important;}

navigator-toolbox[movingtab] > #nav-bar {margin-top: unset !important;}

.tab-content {padding: 0px 3px 0px 3px !important; font-family: PT Sans !important; font-size: 13px !important;} .tab-close-button {color: red !important;} .tabs-alltabs-button {display: none !important;} .tabbrowser-tab:not([pinned]) {min-width: 50px !important;}

[Achille-Grs]

Hello again @Aris-t2 I maked some changes in the code for bookmarks multiple lines for Firefox 66. First, use the file "bookmarks multiple lines" from Firefox 65 and just add in the top the extra code:

---

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

[Aris-t2]

@JonnyThree

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 Thanks for the code.

[Speravir]

For next update: typo serachbar.

[WhiteDragonD]

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"; @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; @import "./css/tabs/tabs_multiple_lines_v2.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

[JonnyThree]

@JonnyThree

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 Thanks for the code.

Thanks for answer. I've copy-pasted this code after the code i use, but seems to be nothing change

[VengefulAncient]

I've realized today that since some point after the last FF update, my Private Browsing indicator (the one next to the window controls) is now missing. However, @import url(./css/generalui/private_mode_indicator_hidden.css); is commented out in userChrome.css. What else could be disabling it?

[Aris-t2]

@WhiteDragonD

This combination is not supported, because it does not work.

Read the comment after _tabs_below_navigation_toolbar_fx65v2.css option https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L342.

@JonnyThree Test on a clean profile without your code. Post screenshots...

@VengefulAncient Post screenshots of your configuration. That icon is not present anymore, if you are using "tabs not on top" for example.

Test this code to restore the icon in "tabs not on top" mode.

#main-window[privatebrowsingmode=temporary] #TabsToolbar .private-browsing-indicator {
  position: fixed !important;
  top: 0 !important;
  right: 130px !important;
  visibility: visible !important;
  display: block !important;
}

[VengefulAncient]

Thanks, that's indeed it, I do have tabs below navigation toolbar. Can Mozilla just stop breaking things, I swear... Your code does restore the icon, thanks a lot! I've changed top to 10px to align with window controls better. The icon behaves awkwardly when the window is resized, but that's expected from such a fix.

[JonnyThree]

@JonnyThree Test on a clean profile without your code. Post screenshots...

OK. Here it is: Firefox 65.0.1 x64, Windows 7 x64 with patched themeservice.dll, themeui.dll, uxtheme.dll (for custom visual style use). Clean Firefox profile with this userChrome.css, compact view mode selected in personalization menu:

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

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

And the screenshots, for first to the last (No arrowsrollbox - No mouse hover new tab button, No arrowsrollbox - Mouse hover new tab button, Arrowsrollbox - No mouse hover new tab button, Arrowsrollbox - Mouse hover new tab button)

As you can see, the new tab button change itself its size when the arrowscrollbox appear

[Aris-t2]

Looks like I gave you wrong code, sorry.

Here are the code for new tab tab icon (visible, if no scrollbox is present) and new tab button icon (visible, if scrollbox is present). Play with the values to change icon dimensions or position.

/* new tab tab icon */
.tabs-newtab-button .toolbarbutton-icon {
    min-width: 0px !important;
    min-height: 0px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0px !important;
    padding: 0px !important;
}

/* new tab button icon */
#new-tab-button .toolbarbutton-icon {
    min-width: 0px !important;
    min-height: 0px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0px !important;
    padding: 0px !important;
}

[JonnyThree]

Oh yes! Another Mozilla's insanity fixed... and hoping that for almost some few months they don't invent some other garbages. I thanks you a lot, Aris-t2, you are really courteous

[rddim]

Hello, how can I reduce the bookmarks height?

I have enabled:

@import "./css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/toolbars/addonbar_content_on_the_right.css"; /**/  /* <--- EXPERIMENTAL */
@import "./css/toolbars/addonbar_extra_bookmarks_toolbar_below_navbar_fx65.css"; /**/  /* <--- EXPERIMENTAL */

and changed the addonbar height to 22px in the general_variables.css file, but the empty space above and below bookmarks is still big for me.

[Aris-t2]

Add this to the bottom of you userChrome.css (and experiment with the value):

#main-window:not([customizing="true"]) #nav-bar {
  padding-bottom: 24px !important;
}

[rddim]

Thank you @Aris-t2, it works, but there are some glitches (the Local folder is mouse hovered)

without code:

with 24px

with 20px

[Aris-t2]

Win 7s default button ui needs some space. 25px is the correct value for it in this case unless you disable this option: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L200

[rddim]

Thanks again, I disable the option, but the bookrmark folders are not centered on the bar, i.e. they are upper with some pixels,

with 20px (ff 65)

This is what I want to get from my old FF 56. The hovered color is not important.

Edit: Line 174 is enabled

[Aris-t2]

Try this dirty hack:

#PersonalToolbar,
#PersonalToolbar #personal-bookmarks,
#PersonalToolbar #PlacesToolbarItems,
#PersonalToolbar toolbarbutton{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  min-height: unset !important;
  height: 20px !important;
}

[rddim]

Nothing is changed :(

[Aris-t2]

Fx65.0.1 + clean files v2.4.4.2

Added the above code to userChrome.css and disabled:

• buttons_on_bookmarks_toolbar_old_size_and_appearance.css
• toolbars_old_padding.css

Result

---

Fx65.0.1 + clean files v2.4.4.2

Only added this to userChrome.css:

#main-window #navigator-toolbox > #PersonalToolbar {
  margin-top: -4px !important;
  margin-bottom: -1px !important;
}

Result

One of the above should solve your issue. Try to modify the values, if you need different space dimensions.

[rddim]

Add this to the bottom of you userChrome.css (and experiment with the value):

#main-window:not([customizing="true"]) #nav-bar {
  padding-bottom: 24px !important;
}

@Aris-t2 actually only this code above works for me, but with combination of

#nav-bar #personal-bookmarks toolbarbutton.bookmark-item:not(.subviewbutton) {
  min-height: 24px !important;
}

Thank you very much for the help!

[bendover22]

I looked through "features available in Custom CSS, but only found a blurb about hiding unneeded things on bookmarks popup.

Below is more what I want - where labels are on same lines as entry fields (save vertical space). So more of the bookmarks treeview shows when expanded & searching for the folder I want. I'm not sure about moving those labels - myself. Are the changes I've described part of those in /css/buttons/bookmarks_menu_button_popup_classic_appearance.css?

The new add bookmark popup's overall width could be wider if needed. The older popup is a bit narrower, but the older popup's entry fields are also narrower. The huge expand treeview arrow buttons could be downsized, some.

I found this image - of the modified add bookmark popup?? Not sure what it's indicating - if just an icon?

[rayman89]

Firefox 67 changed the locationbar again

[Aris-t2]

What changed?

ac_popup_classic_with_two_lines_fx64.css still works here. You have to set popup width manually since Fx64 anyways.

[rayman89]

I was using that file from version 2.3.8 which was working perfectly for fx66 and had the issue I showed you on 67 but I updated the file for the latest version and is working properly now which is odd because on the update notes the only changes noted for fx67 is the addon alt appearance.

[Achille-Grs]

Hi @Aris-t2 Can you help me to fix this small bug? Thank you!

[Aris-t2]

Add this to userChrome.css:

#TabsToolbar .tabs-newtab-button .toolbarbutton-icon {
  padding: 7px !important;
  margin: 0px !important;
  width: 32px !important;
  height: 32px !important;
}

Adjust values to optimize + icons background.

[yurikhan]

I upgraded to Firefox 66 and CustomCSSforFx 2.4.6. Something is broken.

To reproduce, from the default CustomCSSforFx configuration:

• Comment out @import "./css/tabs/classic_squared_tabs.css"
• Uncomment @import "./css/tabs/tabs_multiple_lines_v2.css"
• Comment out @import "./css/tabs/tab_close_always_visible.css"
• Uncomment @import "./css/tabs/tab_close_hidden.css"