Resposta do Fórum - Abas abaixo da barra de endereços

Este artigo não é mais mantido, portanto seu conteúdo pode estar desatualizado.

Nota da tradução: Alguns links deste artigo direcionam para páginas e vídeos em inglês que não têm tradução disponível.

O estilo e a aparência do Firefox podem ser modificados, criando uma pasta de nome chrome dentro da pasta do seu perfil do Firefox e colocando ali um arquivo de nome userChrome.css, que inclui regras de estilo personalizadas. As regras presentes no arquivo userChrome.css substituem o estilo padrão no Firefox.

Nota: Regras de estilo personalizadas podem não funcionar sempre, devido a outros fatores (como incompatibilidade com outras regras de estilo personalizadas) que estão além do controle da comunidade Mozilla. Suas regras de estilo personalizadas também podem deixar de funcionar em novas versões do Firefox.

Veja como modificar o Firefox para que as abas sejam exibidas abaixo da barra de endereços (URL), em vez de ficar acima dela:

Caso a pasta do seu perfil do Firefox já tenha uma pasta de nome chrome contendo um arquivo userChrome.css, copie o código apropriado à sua versão do Firefox para dentro do seu arquivo userChrome.css. Após salvar suas alterações e fechar o arquivo, você deve desativar a barra de título do Firefox, ou barra de menu no Windows.

No Firefox 64 e anteriores: Visite a página https://www.userchrome.org/what-is-userchrome-css.html#movetabbar e copie a regra CSS do exemplo "Move the Tab Bar Below the Other Toolbars" (Mova a barra de abas para baixo de outras barras) para seu arquivo userChrome.css. As regras CSS deste exemplo incluem outras sugestões com comentários.

No Firefox 69 em diante: A partir do Firefox 69, por padrão fica desativado o userChrome.css e o userContent.css, sendo necessário alterar uma preferência no Editor de configurações do Firefox. Consulte mais detalhes nesta página.

Como alternativa, você pode copiar o seguinte código:

Este código funciona no Firefox 64 e anteriores.

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

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


Este código funciona no Firefox 65 em diante.

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

/* TABS: bottom - Firefox 65 and newer */

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

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*adjust*/
}

/* Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) - 20px) !important; /*adjust*/
}

/* TABS: height */
*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;
  --tab-min-height: 25px !important; /*adjust or omit to use density*/
}

*|*:root #tabbrowser-tabs {
  --tab-min-width: 80px !important; /*adjust or omit to use default*/
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*omit*/
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* indicators - hide  */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* window controls hide*/
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons - hide */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar
 .titlebar-buttonbox-container {display: none !important;}


Se você ainda não tem um arquivo userChrome.css, siga essas instruções:
(Mais informações nesta página de ajuda e neste vídeo de um membro da nossa comuniodade, a partir de 8:45).

  1. Abra a pasta do seu perfil ativo atual assim: Digite about:support na barra de endereços do Firefox. Na seção "Informações básicas sobre o aplicativo", ao lado de "Pasta do perfil""Diretório do perfil", clique em Abrir pasta (Windows), Abrir diretório (Linux) ou Mostrar no Finder (Mac).
    • No Mac, é aberta uma pasta que contém a pasta do seu perfil. Abra a pasta selecionada do perfil (o nome é algo como xxxxxxxx.default para um perfil padrão).
  2. Crie uma nova pasta com nome chrome dentro da pasta de perfil.
    • Se quiser depois ter acesso mais fácil, crie um atalho na área de trabalho para essa pasta chrome.
  3. Baixe e salve este arquivo, depois mova para essa pasta chrome:
  4. Renomeie o arquivo baixado ("userChrome-tabs_on_bottom.css" ou "userChrome-tabs_on_bottom_Fx70.css") para userChrome.css
    • No Windows: Se não aparecer o sufixo .css no nome do arquivo baixado, em vez de renomear o arquivo para userChrome.css, renomeie para userChrome (leia a nota abaixo).
  5. Reinicie o Firefox, que descobrirá o novo arquivo userChrome e aplicará as regras.

Dica: Ative a barra de título, ou a barra de menu no Windows, após fazer essas alterações.


Nota para usuários do Windows:
No Windows, por padrão a extensão do nome dos arquivos não é exibida. Se o arquivo que você baixou aparecer como "userChrome-tabs_on_bottom_Fx70", sem a extensão .css, quer dizer que o Windows está ocultando a extensão do nome dos arquivos. Neste caso, você deve renomear o arquivo para userChrome, assim não acabará com um arquivo de nome "userChrome.css.css" que não funcionaria. Para configurar o Windows para exibir a extensão do nome dos arquivos, consulte How to show File Extensions in Windows 10/8/7 no site thewindowsclub.com e os artigos para Windows 8 e Windows 10 no site fileinfo.com.

Essas pessoas ajudaram a escrever este artigo:

Illustration of hands

Torne-se um voluntário

Desenvolva e compartilhe sua especialidade com outras pessoas. Responda perguntas e aprimore nossa base de conhecimento.

Saiba mais