X
Πατήστε εδώ για μετάβαση στην έκδοση της ιστοσελίδας για κινητές συσκευές.

Φόρουμ υποστήριξης

userChrome.css Tabs at Bottom covering content

abt
Δημοσιεύτηκε

I have moved the tabs to the bottom but now the tabs are covering some useful content. Is there a way to pad the content bottom or some other way to move the content up to make way for the tabs? I've tried everything.

Here's my current code:

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

#main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 0px !important;
   width: 100% !important;
}

#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
#TabsToolbar { background-color: #4d4d4d !important }
#tabbrowser-tabs { background-color: #4d4d4d !important }

I have moved the tabs to the bottom but now the tabs are covering some useful content. Is there a way to pad the content bottom or some other way to move the content up to make way for the tabs? I've tried everything. Here's my current code: <pre> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); #main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;} #main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;} #TabsToolbar { position: fixed !important; bottom: 0px !important; width: 100% !important; } #tabbrowser-tabs {width: 96% !important;} #TabsToolbar[inFullscreen] #TabsToolbar { background-color: #4d4d4d !important } #tabbrowser-tabs { background-color: #4d4d4d !important } </pre>

Τροποποιήθηκε στις από το χρήστη abt

Επιλεγμένη λύση

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423

I have not tried it myself.

Ανάγνωση απάντησης σε πλαίσιο 0
Παράθεση

Επιπρόσθετες λεπτομέρειες συστήματος

Εφαρμογή

  • Πλατφόρμα χρήστη: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Περισσότερες πληροφορίες

jscher2000
  • Top 10 Contributor
8783 λύσεις 71817 απαντήσεις
Δημοσιεύτηκε

Hi abt, it might be beneficial to follow up with the source of the rules you're using, to make sure they are current with the latest release of Firefox. Do you recall where you got them?

P.S. Use <pre> before and </pre> after your code to preserve its integrity.

#main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;}
#main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;}

#TabsToolbar
{
   position: fixed !important;
   bottom: 0px !important;
   width: 100% !important;
}

#tabbrowser-tabs {width: 96% !important;}
#TabsToolbar[inFullscreen]
#TabsToolbar { background-color: #4d4d4d !important }
#tabbrowser-tabs { background-color: #4d4d4d !important }
Hi abt, it might be beneficial to follow up with the source of the rules you're using, to make sure they are current with the latest release of Firefox. Do you recall where you got them? P.S. Use &lt;pre> before and &lt;/pre> after your code to preserve its integrity. <pre>#main-window:not([inFullscreen]) #content-deck {margin-bottom: 32px !important;} #main-window[inFullscreen] #content-deck {margin-bottom: 0px !important;} #TabsToolbar { position: fixed !important; bottom: 0px !important; width: 100% !important; } #tabbrowser-tabs {width: 96% !important;} #TabsToolbar[inFullscreen] #TabsToolbar { background-color: #4d4d4d !important } #tabbrowser-tabs { background-color: #4d4d4d !important } </pre>
Σάς φάνηκε χρήσιμο;
Παράθεση
abt
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

@jscher2000 Thanks.

No, I don't recall where I got the code other than I searched, found, and tried lots of different ways and this is what I went with. Many of them worked but they all have the same problem, the tabs cover the content.

Duly noted on using the pre tag. I have edited my post.

@jscher2000 Thanks. No, I don't recall where I got the code other than I searched, found, and tried lots of different ways and this is what I went with. Many of them worked but they all have the same problem, the tabs cover the content. Duly noted on using the pre tag. I have edited my post.

Τροποποιήθηκε στις από το χρήστη abt

Σάς φάνηκε χρήσιμο;
Παράθεση
cor-el
  • Top 10 Contributor
  • Moderator
17564 λύσεις 158869 απαντήσεις
Δημοσιεύτηκε

Try to add a "display:block !important;" rule:

#TabsToolbar
{
  display: block !important;
  position: fixed !important;
  bottom: 0px !important;
  width: 100% !important;
}
Try to add a "display:block !important;" rule: <pre><nowiki>#TabsToolbar { display: block !important; position: fixed !important; bottom: 0px !important; width: 100% !important; }</nowiki></pre>
Σάς φάνηκε χρήσιμο;
Παράθεση
abt
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

cor-el said

Try to add a "display:block !important;" rule:
#TabsToolbar
{
  display: block !important;
  position: fixed !important;
  bottom: 0px !important;
  width: 100% !important;
}


Thanks. No luck with that. I the problem is that this moves the tabs tools bar and what I'm trying to do is resize the content so that the tabs aren't over the top of it.

''cor-el [[#answer-1267055|said]]'' <blockquote> Try to add a "display:block !important;" rule: <pre><nowiki>#TabsToolbar { display: block !important; position: fixed !important; bottom: 0px !important; width: 100% !important; }</nowiki></pre> </blockquote> Thanks. No luck with that. I the problem is that this moves the tabs tools bar and what I'm trying to do is resize the content so that the tabs aren't over the top of it.
Σάς φάνηκε χρήσιμο;
Παράθεση
cor-el
  • Top 10 Contributor
  • Moderator
17564 λύσεις 158869 απαντήσεις
Δημοσιεύτηκε

Can you attach a screenshot?

See also:

Can you attach a screenshot? *https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem *use a compressed image type like PNG or JPG to save the screenshot See also: *https://support.mozilla.org/en-US/kb/forum-response-tabs-below-url-bar
Σάς φάνηκε χρήσιμο;
Παράθεση
abt
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

Okay, so I think I may have been misleading with my post (sorry!). When I said I want the tabs on the bottom I meant the bottom of the screen not the bottom of the navbar.

I've attached screenshot of what I mean by the tabs covering the content.

Okay, so I think I may have been misleading with my post (sorry!). When I said I want the tabs on the bottom I meant the bottom of the screen not the bottom of the navbar. I've attached screenshot of what I mean by the tabs covering the content.

Τροποποιήθηκε στις από το χρήστη abt

Σάς φάνηκε χρήσιμο;
Παράθεση
jscher2000
  • Top 10 Contributor
8783 λύσεις 71817 απαντήσεις
Δημοσιεύτηκε

Επιλεγμένη λύση

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423

I have not tried it myself.

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423 I have not tried it myself.
Σάς φάνηκε χρήσιμο;
Παράθεση
abt
Δημοσιεύτηκε

Ιδιοκτήτης ερώτησης

jscher2000 said

As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423 I have not tried it myself.

THANKS @jscher2000! That worked.

Here's the link to the code is case someone reads this:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_main_content.css

''jscher2000 [[#answer-1267161|said]]'' <blockquote> As you may know, the author of Classic Theme Restorer maintains a large set of CSS files with intricately detailed rules for moving the tab bar. The ones to move the tab bar below the content start here, and incorporate several additional files: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L423 I have not tried it myself. </blockquote> THANKS @jscher2000! That worked. Here's the link to the code is case someone reads this: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tabs_below_main_content.css
Σάς φάνηκε χρήσιμο;
Παράθεση
Κάντε μια ερώτηση

Πρέπει να συνδεθείτε στο λογαριασμό σας για να απαντήσετε στις δημοσιεύσεις. Παρακαλούμε ξεκινήστε μια νέα ερώτηση, αν δεν έχετε ήδη λογαριασμό.