How to hide Bookmark toolbar while tab is running
I gonna a checkbox that when enable it: when i open a tab the bookmark toolbar disapear like chrome, Bookmark table must shown only while new tab ( blank page) It's verry important for me
All Replies (1)
Hi mnkblog, several former Chrome user requested a similar behavior, that the Bookmarks Toolbar displays on a new tab page, but does not appear on other pages.
There is no built-in feature for this, as far as I know. It can be accomplished, or mostly accomplished, through one of these workaround:
(1) Replace New Tab Page
An extension can replace the new tab page with a display of your bookmarks. Here is one example, although I haven't tried it myself:
https://addons.mozilla.org/firefox/addon/ephemeral-bookmark-bar/
(2) Use Custom Style Rules
A userChrome.css file can apply custom style rules to Firefox's toolbar area. For example, https://github.com/Timvde/UserChrome-Tweaks/blob/master/toolbars/show-bookmarks-only-on-newtab.css
That works by matching the "title" of the new tab "window" which in Firefox 61 is usually "Mozilla Firefox" or "New Tab" but may vary with different versions/languages, so some customization may be required.
Also, when you reload a page, there is a brief time where the title changes to "Mozilla Firefox" so the bar may reappear and then disappear, which is a little bit distracting. A version from https://www.reddit.com/r/FirefoxCSS/comments/7evwow/show_bookmarks_toolbar_only_on_new_tab/dqwjbtc/ can smooth it a little.
Here's my take on this method:
Creating a userChrome.css file is about a 10 minute project, so when you have time to take it slowly and carefully:
This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.
(A) Select and copy all of the following code
/* Bookmarks Toolbar Only in New Tab */
/* PART A: Hide the bar everywhere */
#main-window #PersonalToolbar {
visibility: collapse !important;
margin-top: -23px !important;
opacity: 0 !important;
transition: all 200ms ease 10ms !important;
}
/* PART B: Show the bar for certain page titles
push down over 200 milliseconds after
300 millisecond delay to avoid reloading bounce */
#main-window[title^="Mozilla Firefox"] #PersonalToolbar,
#main-window[title^="about:newtab"] #PersonalToolbar,
#main-window[title^="New Tab"] #PersonalToolbar,
#main-window[title^="Firefox"] #PersonalToolbar,
#main-window[title^="Nightly"] #PersonalToolbar {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
transition: all 200ms ease 300ms !important;
}
(B) Generate and download a userChrome.css file
Open the following page and paste the above rules into the editor, replacing the sample rule:
https://www.userchrome.org/download-userchrome-css.html
Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)
Minimize that Windows Explorer window for later reference.
(C) Create a new chrome folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Mac and Windows in case the text is not clear.
(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C
The next time you quit Firefox and start it up again, it should discover that file and apply the rules.
Success?
If the transition is too distracting, try one of the other two style recipes.