Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Black line when navigator-toolbox height is increased

  • 8 replies
  • 3 have this problem
  • 28 views
  • Last reply by Jgr9

more options

Hi,

In order to to be able to see the full persona, I increased the min-height of navigator-toolbox by adding the following lines in Stylish add on:

'@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

  1. navigator-toolbox { min-height:150px !important; box-shadow:ThreeDShadow 0 -0px inset; }
 opacity: 0.1!important;'

However, now there is a black line showing up, and I want to ask if there's a way to hide it.

Also, is it possible to to move the tabs to the bottom of the navigator-toolbox, as when it is when the min-height is not increased?

Thanks

Hi, In order to to be able to see the full persona, I increased the min-height of navigator-toolbox by adding the following lines in Stylish add on: '@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #navigator-toolbox { min-height:150px !important; box-shadow:ThreeDShadow 0 -0px inset; } opacity: 0.1!important;' However, now there is a black line showing up, and I want to ask if there's a way to hide it. Also, is it possible to to move the tabs to the bottom of the navigator-toolbox, as when it is when the min-height is not increased? Thanks

Chosen solution

I managed to circumvent the issue by adding a few additional bars from CTR. The navigator toolbox is still the same size, but without the black line.

Thank you for the assistance.

Read this answer in context 👍 0

All Replies (8)

more options

Attached SS

more options

Note that it should be -1 and not -0 and that a lightweight theme usually has a height of 200px.

  • /questions/1076533 How to increase size of header bar so that I can view the theme more clearly?
#navigator-toolbox {min-height:200px!important; box-shadow:ThreeDShadow 0 -1px inset !important;}

Do you use an extension to place the Tab bar in its bottom position (e.g. CTR) or are you doing this with code in userChrome.css (-moz-box-ordinal-group)?

You would have to give the Tab Bar a margin-top to move this toolbar down. You can possible do this instead of increasing the height of the #navigator-toolbox element.

#TabsToolbar { -moz-box-ordinal-group:1000!important; margin-top:50px!important; }

Modified by cor-el

more options

Thanks for the reply.

Yes, I'm using Classic Theme Restorer and have the bookmarks toolbar at the bottom. I also have The Addon Bar extension.

I've managed to increase increase the navigator-toolbox by increasing the tab height itself and that doesn't display the black line, but then the tabs themselves are too big.

  1. TabsToolbar { -moz-box-ordinal-group:1000!important; margin-top:50px!important; }

Adding this does not seem to give any visual change.

Not sure if I'm explaining this well, as I'm very new to this.

more options

If the above posted code isn't working then CTR is probably overriding this with its own code for the Tab bar. You could test this by temporarily disabling CTR. Increasing the height of the Tab bar won't work like you noticed, but setting a larger margin-top works for me to move the tab bar down. CTR makes a lot of changes to items in the navigator toolbox and you would have to use the DOM Inspector to see if you can override specific CSS rules. Note that CTR supports an ADD-on toolbar, so you wouldn't need a separate extension.

more options

Chosen Solution

I managed to circumvent the issue by adding a few additional bars from CTR. The navigator toolbox is still the same size, but without the black line.

Thank you for the assistance.

more options

sstoian said

I managed to circumvent the issue by adding a few additional bars from CTR. The navigator toolbox is still the same size, but without the black line. Thank you for the assistance.

How about actually telling us how you did this, if it still actually works in the current Nightly?....

more options

Not sure if it will work for newer Firefox versions, since I'm still using 54.0.1. What I did to view more of the persona was add 3 extra empty toolbars from the Classic Theme Restorer add-on.

Don't if this helps at all since it doesn't actually resolve the black line issue I had previously.

more options

I fixed my current border line issue with this in my userChrome.css (Replace the "1." with "#" and no space. The "#" breaks formatting here....)

#nav-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

And my old one with this:

#navigator-toolbox::after {
  display: none !important;
}

I also just cleaned up my userChrome.css which was a copy/pasted redundant mess previously. Cleaned out the sections that weren't actually doing anything. This is my full config now, to make it more like way back around FF 3.0, and with tabs below the other bars. Also for use with an old FF theme image that I've been using since way back when. It's what I have, but I'm sure people who actually know what they're doing can clean out the useless stuff and shrink it some more. Sorry, I don't know how to post this in a code box here. And ugh... You also have to replace all the number bullets with "#" and no space because formatting here is messed up.

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

/* tabs on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {
	-moz-box-ordinal-group:1000!important;
	margin: 0 !important;
	padding: 0px !important;
	-moz-border-top-colors: !important;
	box-shadow: none;

}

/* Clear background and border/shadow from Navigation Toolbar */
#nav-bar {
	border: none !important;
    background-color:transparent !important;
/*    background-image:none !important;
    border-color:transparent !important;
    box-shadow:none !important;
	margin: 0 !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important; */
	-moz-appearance: none !important;
	padding: 0px !important;
	margin: 0px  !important;
}

#PersonalToolbar {
    background-color:transparent !important;
    background-image:none !important;
    border-color:transparent !important;
    box-shadow:none !important;
	border:none !important;
	margin: 0 !important;
	height: 25px !important;
	  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
box-shadow: none !important;
}

#navigator-toolbox::after {
  content: "";
  display: -moz-box;
  -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
  height: 1px;
  background-color: ThreeDShadow;
}

#navigator-toolbox::after {
  display: none !important;
}

#nav-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


(edited to fix the layout -c)

Modified by cor-el