Como personalizar a interface do usuário do Firefox com userChrome.css

A interface do Firefox Quantum ainda é extremamente personalizável graças ao seu arquivo userChrome.css. Você pode editar este arquivo para ocultar itens de menu indesejados, mover a barra de guias abaixo da barra de ferramentas de navegação, visualizar várias linhas na barra de ferramentas de favoritos e fazer outras coisas que normalmente não seriam possíveis.

Como isso funciona

O arquivo userChrome.css do Firefox é um arquivo cascading style sheet (CSS) que o Firefox usa. Embora as folhas de estilo sejam normalmente aplicadas a páginas da web, esta folha de estilo em particular é aplicada à interface de usuário do Firefox. Ele permite que você altere a aparência e o layout de tudo ao redor da página da web iteslf. Na verdade, você não pode adicionar nenhum recurso; você só pode modificar o que já está lá para alterar, ocultar ou mover.

Isso não tem nada a ver com o Google Chrome. “Chrome” refere-se à interface do usuário do navegador da web, que é o nome do Google Chrome.

O arquivo userChrome.css existe no Firefox há muito tempo, mas assumiu uma importância renovada com o Firefox Quantum. Muitos ajustes que antes podiam ser realizados por complementos do navegador agora só podem ser realizados editando o arquivo userChrome.css.

Onde encontrar ajustes

Embora você possa criar seus próprios ajustes se entender o código CSS e como a interface do Firefox foi projetada, você também pode encontrar ajustes online. Se você deseja fazer uma determinada alteração, provavelmente outra pessoa já descobriu como fazê-lo e escreveu o código.

Recomendado:  Como revogar o acesso a aplicativos de terceiros no Soundcloud

Aqui estão alguns recursos para você começar:

  • Amostra de ajustes em userChrome.org : uma pequena lista de ajustes interessantes que demonstram o poder do userChrome.css.
  • Classic CSS Tweaks : Um repositório de ajustes userChrome.css do autor da extensão Classic Theme Restorer, que não funciona mais no Firefox Quantum.
  • UserChrome Tweaks : Uma coleção de ajustes interessantes do Firefox.
  • FirefoxCSS no Reddit : este subreddit é uma comunidade para discutir ajustes. Você pode pesquisar o subreddit para encontrar os ajustes de outras pessoas, ver o que as pessoas estão compartilhando e até mesmo pedir informações se não conseguir encontrar o ajuste que realmente deseja.
  • Guia para editar seu menu de contexto : instruções para remover itens do menu de contexto do Firefox e alterar sua ordem na lista, tirada do subreddit do FirefoxCSS.

Lembre-se de que as versões anteriores do Firefox tinham uma interface diferente. Os ajustes mais antigos do userChrome.css que você encontra online podem não funcionar no Firefox 57 e posterior, também conhecido como Firefox Quantum.

Se você sabe o que está fazendo com CSS, pode habilitar a caixa de ferramentas do navegador para inspecionar o cromo do navegador Firefox. Isso fornecerá as informações de que você precisa para personalizar vários elementos da interface do navegador com seu próprio código CSS.

Como criar seu arquivo userChrome.css

O arquivo userChrome.css não existe por padrão, então assim que você tiver um ou dois ajustes que deseja experimentar, primeiro você deve criar o arquivo no local apropriado dentro da pasta de perfil do Firefox .

Para iniciar a pasta de perfil do Firefox, clique no menu> Ajuda> Informações para solução de problemas no Firefox.

Clique no botão “Abrir pasta” à direita da pasta de perfil para abri-la. (No macOS ou Linux, você verá um botão “Mostrar no Finder” ou “Abrir diretório”. As instruções a seguir mostram o processo no Windows, mas é basicamente o mesmo no Mac e no Linux – você apenas usará um gerenciador de arquivos e editor de texto diferente.)

Recomendado:  Steam Deck 2 não precisa de tela de resolução mais alta

Se você vir uma pasta chamada “chrome” na pasta de perfil que aparece, clique duas vezes nela. No entanto, você provavelmente não vai, já que esta pasta não é criada por versões modernas do Firefox.

Para criar a pasta, clique com o botão direito no painel direito e selecione Novo> Pasta. Nomeie-o como “cromo”, pressione Enter e clique duas vezes nele.

Você precisará dizer ao Windows para mostrar as extensões de arquivo , se ainda não o fez. O Windows oculta extensões de arquivo por padrão para simplificar as coisas. Esta etapa não é necessária no macOS ou Linux, que mostram essas informações por padrão.

No Windows 8 ou 10, você pode simplesmente clicar na guia “Exibir” na faixa de opções e marcar a caixa “Extensões de nome de arquivo” para torná-los visíveis. No Windows 7, clique em Organizar> Opções de pasta e pesquisa, clique na guia “Exibir” e desmarque “Ocultar as extensões dos tipos de arquivo conhecidos”.

Agora você criará o arquivo userChrome.css, que na verdade é apenas um arquivo de texto em branco com a extensão .css em vez da extensão .txt.

Para fazer isso, clique com o botão direito no painel direito aqui e selecione Novo> Documento de texto. Nomeie-o como “userChrome.css” certificando-se de remover a extensão de arquivo .txt.

O Windows irá avisá-lo de que você está alterando a extensão do arquivo e isso pode ser um problema para certos tipos de arquivos. Clique em “Sim” para confirmar sua alteração.

No macOS ou Linux, crie um arquivo de texto vazio com o mesmo nome.

Como editar o arquivo userChrome.css

Você pode usar qualquer editor de texto para editar o arquivo userChrome.css. O editor de texto Bloco de notas incluído no Windows funciona perfeitamente. Se você deseja um editor de texto mais poderoso com mais recursos, gostamos do Notepad ++ .

Recomendado:  Como criar um tema para seu dispositivo Android Oreo com substrato e Andromeda (sem necessidade de root)

Para editar o arquivo no Bloco de notas, clique com o botão direito e selecione “Editar”.

Adicione os ajustes que desejar ao arquivo copiando e colando-os. Se você adicionar vários ajustes, certifique-se de adicioná-los em suas próprias linhas.

Quando terminar, salve o arquivo clicando em Arquivo> Salvar no Bloco de Notas.

Sempre que editar o arquivo userChrome.css, você terá que fechar todas as janelas abertas do Firefox e reiniciá-lo para que as alterações tenham efeito.

Se você voltar à pasta “chrome” com frequência para editar o arquivo userChrome.css, pode criar um atalho na área de trabalho para a pasta ou adicioná-lo às pastas de “acesso rápido” no Gerenciador de arquivos.

O arquivo userContent.css

O Firefox também tem um arquivo userContent.css que você pode editar, e você pode encontrar alguns ajustes que dizem que são para o arquivo userContent.css.

Para usar este arquivo, basta criar um arquivo chamado “userContent.css” na mesma pasta que sua pasta Chrome. Os ajustes que você coloca neste arquivo afetam as “páginas de conteúdo” internas do Firefox, como as páginas Nova guia e Opções.

 

Socorro, eu quebrei algo!

If you ever encounter a problem with a tweak, you can just remove it from your userChrome.css file and restart Firefox. If that doesn’t work, you can completely delete the userChrome.css file and restart the browser to erase all your changes and get a fresh Firefox interface.