MozillaZine

FF 57.x TOOLBAR CUSTOMIZATIONS HERE :)

User Help for Mozilla Firefox
bostiq

User avatar
 
Posts: 4
Joined: November 26th, 2017, 5:22 am
Location: Australia

Post Posted November 26th, 2017, 5:46 am

For anyone interested, I use to use "roomy" and "multirow" now they are gone.
so I put my hands on the userChrome file to fix this.
For who's not familiar with this procedure follow this step by step instruction. Skip to the code at the bottom if you already use/know userChrome.css file.

1- first of all you need to find your profile folder, for mac user /[your HD]/Library/Apllication Support/Firefox/Profiles/[random name].default/
If your are not a Mac User. google it or find info in this forum.

2- From your profile folder you have to create a folder named > chrome

3- in there you also create a file named 'userChrome.css'

4- Open the file with a text editor. IT HAS TO BE PLAIN TEXT, insert the following code as header of your new file:
Code: Select all
/* Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set 30px namespace to XUL */


5- after that you can start inserting the customization in css you can find around the web, the following are the one I utilize on my browser, just copy and paste the blocks you are interested in, save your file and restart FF.

hides names on the Bookmarks Toolbar
Code: Select all
/* hide names on the Bookmarks Toolbar */
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
 display: none !important;
 transition: all 500ms ease-in-out 0s !important;
}

#PlacesToolbarItems > .bookmark-item:hover > .toolbarbutton-text {
 display:block !important;
 transition: all 500ms ease-in-out 0s !important;
}


Auto-hide bookmarks toolbar
Code: Select all
/* Auto-hide bookmarks toolbar */
#navigator-toolbox > #PersonalToolbar {

   position: fixed;
   visibility: collapse;
   opacity: 0;
   height: 0px;
   min-height: 0px;
   width: 100% ;
   border-bottom: dotted 1px #666 !important;
   transition: height, min-height, visibility 150ms ease-in-out 1s !important;
   z-index: 9999999 ;
}

#navigator-toolbox:hover > #PersonalToolbar {

   /*position: fixed ;*/
   visibility: visible ;
   opacity: 1 !important;
   min-height: 20px !important;
   height: 25px !important;
   /*width: 100% ;*/
   transition: height, min-height, visibility 350ms ease-in-out 0s !important;
}

#navigator-toolbox > #PersonalToolbar {
   transition: opacity 350ms ease-in-out 1s !important;
}

#navigator-toolbox:hover > #PersonalToolbar {
   transition: opacity 450ms ease-in-out 0s !important;
}


Multi Row
Code: Select all
/*--- Multi Row ---*/
#personal-bookmarks
{
  display: block !important;
}

#personal-bookmarks #PlacesToolbar
{
  display: block !important;
  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
{
  /*display:block;*/
  overflow-x: visible;
  overflow-y: visible;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box
{
  display: block !important;
}

#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;
  padding-left: 1px !important;
  padding-right: 1px !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: 2px solid #000 !important;
  border-right: 1px solid #666 !important;
  vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]
{
  -moz-appearance: toolbarbutton;
}



I hope this helps.. it was driving me mad ](*,) , not being able to have my bookmark tool bar as it was before.. now I'm happy :D
Last edited by bostiq on November 27th, 2017, 8:43 am, edited 1 time in total.
She knew it was wrong. She knew it was dangerous. But she took a deep breath, bit her lip and downloaded the new iOS update anyway . . .
--

Bennyd
 
Posts: 175
Joined: April 23rd, 2005, 6:53 am

Post Posted November 27th, 2017, 8:17 am

I'm very interested in the above customizations, especially the show/hide bookmarks toolbar. I appreciate the author, bostiq, posting them. However, in my general internet paranoia (well learned) I note that the author of this coding only has the one post. Due to my ignorance of css coding, I am forced to ask if someone would review the coding in the above post and render an opinion as to its goal effectiveness and safety. Again, absolutely no offense to bostiq intended.

bostiq

User avatar
 
Posts: 4
Joined: November 26th, 2017, 5:22 am
Location: Australia

Post Posted November 27th, 2017, 8:26 am

Hey Bennyd... being cautious in this matters is a good thing.
I appreciate your honesty, and to support it, here is my suggestion:

If you don't really have a userChrome.css file, all you've got to do to restore your previous set up is to delete the file or just rename it something different like sDvsv.css and FF won't read it.

If you already have a userChrome.css file I STRONGLY recommend to copy it and rename it something like userChrome_original.css and create a new userChrome.css to paste my code in and verify its integrity: this way if something goes wrong you can always delete the new file and restore the original.

happy testing!!
She knew it was wrong. She knew it was dangerous. But she took a deep breath, bit her lip and downloaded the new iOS update anyway . . .
--

bostiq

User avatar
 
Posts: 4
Joined: November 26th, 2017, 5:22 am
Location: Australia

Post Posted November 27th, 2017, 8:35 am

Also I forgot to add this:

CSS is merely a styling code.. (see w3schools.org)

it means it cannot manipulate data in any damaging way.. not like JS, PHP or other scripting languages...
so your private data, bookmarks, cookies etc cannot be disrupted , deleted, stole or modified in any way.

Once you delete the .css file your FF is back where it was before.


I also updated the Auto hide toolbar code with better fade-in effect, and a fix for overlapping sidebar
She knew it was wrong. She knew it was dangerous. But she took a deep breath, bit her lip and downloaded the new iOS update anyway . . .
--

8-bit

User avatar
 
Posts: 906
Joined: October 19th, 2007, 5:19 pm

Post Posted November 27th, 2017, 9:34 am

Hey - Thanks!
The desire that something be true, rather than the desire for truth itself, is why pseudoscience is pop-culture.

bostiq

User avatar
 
Posts: 4
Joined: November 26th, 2017, 5:22 am
Location: Australia

Post Posted November 27th, 2017, 9:36 am

No worries mate! :)
She knew it was wrong. She knew it was dangerous. But she took a deep breath, bit her lip and downloaded the new iOS update anyway . . .
--

Ed1
 
Posts: 859
Joined: January 30th, 2005, 2:33 pm

Post Posted November 27th, 2017, 1:06 pm

Does this code expand the number of rows automatically to fit the number of Bookmarks Toolbar items the user has?

Or is there a way to limit the number of rows displayed but be able to scroll down within the Bookmarks Toolbar to see those items that don't fit in the allotted number of rows?

Grumpus

User avatar
 
Posts: 11660
Joined: October 19th, 2007, 4:23 am
Location: ... Da' Swamp

Post Posted November 27th, 2017, 1:18 pm

Instead of applying code for the "no names" on the Bookmarks Toolbar you can open "Show All Bookmarks"
Click on the Bookmark and delete the name. If the site has an icon the icon will stay and the text is gone.
This works good for a lot of sites which have an icon.
If you pass you cursor over the icon the url will show if there are a number of similar icons.

DJGM

User avatar
 
Posts: 710
Joined: November 9th, 2002, 10:28 am
Location: Manchester, England, UK.

Post Posted November 27th, 2017, 3:36 pm

I'd like to see a custom css code that allows me to separate the combined reload/stop button so the nav bar shows
as ... Back - Forward - Reload - Stop - Home. I've always disliked having a combined reload/stop button ever since
another browser started doing it some years ago ... possibly Opera, sometime before it moved to Chromium.

Frank Lion

User avatar
 
Posts: 19515
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 27th, 2017, 4:07 pm

DJGM wrote:I'd like to see a custom css code that allows me to separate the combined reload/stop button so the nav bar shows
as ... Back - Forward - Reload - Stop - Home.

You'll be needing this then - chrome://browser/skin/browser.css (just put that in the addressbar, as it contains the related code you'll be needing to decipher)

Good luck, let's know how you get on.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

CaJazzman

User avatar
 
Posts: 274
Joined: March 5th, 2009, 2:21 pm
Location: Vacaville,California

Post Posted November 27th, 2017, 4:26 pm

Since the title of this post is ToolBar Customizations, then I'd like to ask if it's at all possible, to add a new toolbar, and I came across this article:
https://developer.mozilla.org/en-US/doc ... ew_toolbar
Can anyone tell me if you can add a new Tool bar using this article? If, so, how? Because, it just maybe too confusing to me at this time. 8-)

costark
 
Posts: 255
Joined: July 14th, 2004, 5:03 am

Post Posted November 28th, 2017, 4:35 am

CaJazzman wrote:Since the title of this post is ToolBar Customizations, then I'd like to ask if it's at all possible, to add a new toolbar, and I came across this article:
https://developer.mozilla.org/en-US/doc ... ew_toolbar
Can anyone tell me if you can add a new Tool bar using this article? If, so, how? Because, it just maybe too confusing to me at this time. 8-)

Somebody answer CaJazzman ---- BUT --
Per image link below --- Under the Address Bar I have Toolbar Shtcuts and Folders that overflow via a Drop-Dn arrow.
I tried Multi-Row Coding and saw 2 Rows of Shtcuts and just barely part of a 3rd with No Overflow Drop-Dn Arrow anymore.
Is there an EDIT Place to LIMIT the Bookmark ROWS to (2) since 3rd Row wasn't visible - AND - RETAIN the Overflow Drop-Dn Arrow?

Top of this IMGUR image shows Normal 1-Row Toolbar Bookmarks with Drop Dn Arrow Far Right ......
https://i.imgur.com/RG6bfVo.jpg
Firefox 57.0.2(64) - Win 7-64 Hm Prem - Hm-Stdnt '10 Ofce - i5 8G - ESET EIS - MBAM Prem 3 - SuperAS Pro - Macrium Reflect 7 - Diskeeper Pro 15- EPIM Mail - Secunia PSI 3 - NO Java or Flash

bob c
 
Posts: 87
Joined: September 7th, 2003, 10:09 am

Post Posted November 28th, 2017, 7:04 am

bostiq have any ideas on why when using the code for hiding the bookmarks bar, when I come back an hover, the bar shows, but the bookmarks don't. thanks

another item I just noticed, the bookmarks bar won't show for me unless I put my mouse cursor just in the url bar--any thoughts on that?

Benjamin Markson

User avatar
 
Posts: 332
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Post Posted November 28th, 2017, 8:17 am

DJGM wrote:I'd like to see a custom css code that allows me to separate the combined reload/stop button so the nav bar shows as ... Back - Forward - Reload - Stop - Home.

I think I have that one:
Code: Select all
#stop-button, #reload-button {display: inline !important;}

Ben.
XUL is dead. Long live the Google Chrome Clones.

Trustadz
 
Posts: 1
Joined: February 16th, 2011, 4:33 am

Post Posted November 29th, 2017, 1:27 am

came here because someone recommended this. I've made my own CSS to replace Roomy. Haven't got the multi-row functional though. OP interested in bundling the CSS? And anyone any idea to make it more user-installer friendly (plugin/installer/something)

Link to my CSS https://www.reddit.com/r/firefox/commen ... toolbar_i/

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot] and 6 guests