X
Tippen Sie hierhin, um die Version dieser Website für Mobilgeräte aufzurufen.

Hilfeforum

How do I move the tabs on bottom (directly above webpage) and while Private Browsing ? FF65

Veröffentlicht

Basically Firefox 65 rolled up and brought back the tabs on top and broke the css. I want the tabs to be right above the webpage. Like this: https://imgur.com/v6byBhV

I currently have a css code I found that I'm using to achieve that result:

/* TABS: on bottom */

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

#TabsToolbar {
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}

#tabbrowser-tabs {
 width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

I don't know what's important and what isn't, so I haven't touched it much.

The problem though is that in Private Browsing it gets messed up. Here's what I mean: https://imgur.com/PQ8ZjVp I have 2 tabs opened there.

(Also I just noticed how Youtube's search bar doesn't appear, that's because it has been moved slightly off the of where I cropped the screenshot. Not the code's fault since I tried without it. Private browsing caused that which makes me question what else changes)

After some searching I found this code:

#TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator {
position: absolute !important;
right: 0;
bottom: 1px;
}

But then that introduces this problem: https://imgur.com/kO5w538 the Private Browsing icon overlaps with the "open a new tab" icon or the "List all tabs" icon if there are too many tabs open. That makes me believe that at some point, the mask icon was detached or something.

I would appreciate some help for either a new code for moving the tabs to the bottom, or fixing the Private Browsing tab.

Here are all the images in a single post https://imgur.com/a/5a7e0fV .

Basically Firefox 65 rolled up and brought back the tabs on top and broke the css. I want the tabs to be right above the webpage. Like this: https://imgur.com/v6byBhV I currently have a css code I found that I'm using to achieve that result: <code> /* TABS: on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} #TabsToolbar { position: absolute !important; bottom: 0 !important; width: 100vw !important; } #tabbrowser-tabs { width: 100vw !important; } #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;} </code> I don't know what's important and what isn't, so I haven't touched it much. The problem though is that in Private Browsing it gets messed up. Here's what I mean: https://imgur.com/PQ8ZjVp I have 2 tabs opened there. (Also I just noticed how Youtube's search bar doesn't appear, that's because it has been moved slightly off the of where I cropped the screenshot. Not the code's fault since I tried without it. Private browsing caused that which makes me question what else changes) After some searching I found this code: <code> #TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator { position: absolute !important; right: 0; bottom: 1px; } </code> But then that introduces this problem: https://imgur.com/kO5w538 the Private Browsing icon overlaps with the "open a new tab" icon or the "List all tabs" icon if there are too many tabs open. That makes me believe that at some point, the mask icon was detached or something. I would appreciate some help for either a new code for moving the tabs to the bottom, or fixing the Private Browsing tab. Here are all the images in a single post https://imgur.com/a/5a7e0fV .

Geändert am von MainGoldDragon

Ausgewählte Lösung

cor-el said

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

Well like I said, I know nothing about coding so I don't know what works on FF65 or even where I can search for what works on it. (sorry for the confusion, I'm not good at explaining things)

Also I guess I kind of forgot to update this post that I actually did find a solution with this:

#nav-bar { /* Main Toolbar */
  -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* Bookmarks Toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#titlebar { /* Menu + Tab Bar */
  -moz-box-ordinal-group: 3 !important;
}

That moves the Tab Bar on the bottom, but it also drags the Menu Bar (File, Edit, View....) for some #&@*#$% reason, so I use this to fix it:

/* Menu Bar on top */

#navigator-toolbox{ 
  margin-top: 11px;
  padding-top: 8px !important; 
}
#toolbar-menubar{
  position: fixed;
  top: 0px;
}

The most annoying part is that I have to basically detach that menu bar, create some spacing on top and then move the detached menu bar on that space. I would very much prefer to just move it just like another bar because my OCD is killing me.

Oh and for another *$&%)@! reason there is a vertical shift when moving a tab that this code overrides:

/* Override vertical shifts when moving a tab */
#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;
}

And that's pretty much all the css code that I use to keep the bars in place and working the way they should.

There is only one thing that bothers me A LOT though and I would appreciate a solution. That's the Menu Bar I mentioned above. I hate to have being essentially detached and I have to put it in it's place with some Margin and Padding. I think it also messes up the Title Bar if you have that disabled big time (I've got it enabled).

Diese Antwort im Kontext lesen 0

Mehr Details zum System

Installierte Plugins

  • Shockwave Flash 32.0 r0

Anwendung

  • User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0

Weitere Informationen

cor-el
  • Top 10 Contributor
  • Moderator
17475 Lösungen 157940 Antworten
Veröffentlicht

If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area.

If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area.

Fragesteller

cor-el said

If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area.

Thank you for the reply but it is fair to say that I know nothing about coding. You say that by positioning elements absolutely then it creates overlaps. That must mean that there is an alternative way to position elements without overlaps. I don't know what to modify though. I hate paddings and margins. I don't want to change to change the widths. I don't want to add spacings. I don't want to change colors. I don't want to change to change the heights. I just want to take each bar and put in its place like this https://imgur.com/v6byBhV

The code below is the one I was using to have the bars in place until FF 65.0 rolled up destroyed it.

#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
} 
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
}

Maybe it's easier to fix That code instead of trying to find a new one or fixing the bigger one ? All I want to do is move tabs to the bottom.

BTW the first code I posted was from your answer here https://support.mozilla.org/en-US/questions/1248277#answer-1192325

''cor-el [[#answer-1192682|said]]'' <blockquote> If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area. </blockquote> Thank you for the reply but it is fair to say that I know nothing about coding. You say that by positioning elements absolutely then it creates overlaps. That must mean that there is an alternative way to position elements without overlaps. I don't know what to modify though. I hate paddings and margins. I don't want to change to change the widths. I don't want to add spacings. I don't want to change colors. I don't want to change to change the heights. I just want to take each bar and put in its place like this https://imgur.com/v6byBhV The code below is the one I was using to have the bars in place until FF 65.0 rolled up destroyed it. <code> #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; } </code> Maybe it's easier to fix That code instead of trying to find a new one or fixing the bigger one ? All I want to do is move tabs to the bottom. BTW the first code I posted was from your answer here https://support.mozilla.org/en-US/questions/1248277#answer-1192325

Geändert am von MainGoldDragon

cor-el
  • Top 10 Contributor
  • Moderator
17475 Lösungen 157940 Antworten
Veröffentlicht

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

Ausgewählte Lösung

cor-el said

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

Well like I said, I know nothing about coding so I don't know what works on FF65 or even where I can search for what works on it. (sorry for the confusion, I'm not good at explaining things)

Also I guess I kind of forgot to update this post that I actually did find a solution with this:

#nav-bar { /* Main Toolbar */
  -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* Bookmarks Toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#titlebar { /* Menu + Tab Bar */
  -moz-box-ordinal-group: 3 !important;
}

That moves the Tab Bar on the bottom, but it also drags the Menu Bar (File, Edit, View....) for some #&@*#$% reason, so I use this to fix it:

/* Menu Bar on top */

#navigator-toolbox{ 
  margin-top: 11px;
  padding-top: 8px !important; 
}
#toolbar-menubar{
  position: fixed;
  top: 0px;
}

The most annoying part is that I have to basically detach that menu bar, create some spacing on top and then move the detached menu bar on that space. I would very much prefer to just move it just like another bar because my OCD is killing me.

Oh and for another *$&%)@! reason there is a vertical shift when moving a tab that this code overrides:

/* Override vertical shifts when moving a tab */
#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;
}

And that's pretty much all the css code that I use to keep the bars in place and working the way they should.

There is only one thing that bothers me A LOT though and I would appreciate a solution. That's the Menu Bar I mentioned above. I hate to have being essentially detached and I have to put it in it's place with some Margin and Padding. I think it also messes up the Title Bar if you have that disabled big time (I've got it enabled).

''cor-el [[#answer-1192979|said]]'' <blockquote> The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+. </blockquote> Well like I said, I know nothing about coding so I don't know what works on FF65 or even where I can search for what works on it. (sorry for the confusion, I'm not good at explaining things) Also I guess I kind of forgot to update this post that I actually did find a solution with this: <code> #nav-bar { /* Main Toolbar */ -moz-box-ordinal-group: 1 !important; } #PersonalToolbar { /* Bookmarks Toolbar */ -moz-box-ordinal-group: 2 !important; } #titlebar { /* Menu + Tab Bar */ -moz-box-ordinal-group: 3 !important; } </code> That moves the Tab Bar on the bottom, but it also drags the Menu Bar (File, Edit, View....) for some #&@*#$% reason, so I use this to fix it: <code> /* Menu Bar on top */ #navigator-toolbox{ margin-top: 11px; padding-top: 8px !important; } #toolbar-menubar{ position: fixed; top: 0px; } </code> The most annoying part is that I have to basically detach that menu bar, create some spacing on top and then move the detached menu bar on that space. I would very much prefer to just move it just like another bar because my OCD is killing me. Oh and for another *$&%)@! reason there is a vertical shift when moving a tab that this code overrides: <code> /* Override vertical shifts when moving a tab */ #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; } </code> And that's pretty much all the css code that I use to keep the bars in place and working the way they should. There is only one thing that bothers me A LOT though and I would appreciate a solution. That's the Menu Bar I mentioned above. I hate to have being essentially detached and I have to put it in it's place with some Margin and Padding. I think it also messes up the Title Bar if you have that disabled big time (I've got it enabled).

Geändert am von MainGoldDragon

stevewack 0 Lösungen 1 Antworten
Veröffentlicht

Does anyone know how to make the nav icons larger? The back/forward/home etc?

Does anyone know how to make the nav icons larger? The back/forward/home etc?