Como personalizar a aparência do botão laranja do menu Firefox

Você se cansa de olhar para o botão do menu laranja do Firefox? A interface do Firefox é completamente personalizável, para que você possa alterar a cor, o texto e outras propriedades do botão de menu do Firefox para criar sua própria aparência personalizada.

Para alterar a aparência do botão de menu do Firefox, estaremos editando o arquivo userChrome.css. Este arquivo permite que você altere a aparência de qualquer parte do Firefox, bem como a sua funcionalidade.

Antes de começar a editar o arquivo userChrome.css, instalaremos um complemento, chamado ChromEdit Plus, que nos permitirá editar facilmente o arquivo e salvá-lo no formato correto. Clique no link a seguir para ir para a página da Web do ChromEdit Plus.

http://webdesigns.ms11.net/chromeditp.html

Clique no botão Adicionar ao Firefox na página.

A mensagem a seguir pode ser exibida. Clique em Permitir para continuar instalando o complemento do ChromEdit Plus.

NOTA: Tenha muito cuidado com o que você permite ao instalar extensões e outros softwares. Se você não tem certeza sobre o produto ou não confia na empresa, não instale. Testamos o ChromEdit Plus e descobrimos que ele é seguro e confiável.

A caixa de diálogo Instalação do software é exibida. Clique em Instalar agora, que pode não estar disponível até que uma contagem regressiva termine.

OBSERVAÇÃO: você pode alterar o tempo da contagem regressiva no botão Instalar, mas não recomendamos desativá-lo.

Você deve reiniciar o Firefox para concluir a instalação. Clique em Reiniciar Agora na caixa de diálogo pop-up.

Assim que o Firefox reiniciar, o botão ChromEdit Plus será adicionado à direita da caixa Endereço. Clique para abrir a janela do ChromEdit Plus.

Existem três guias por padrão na janela do ChromEdit Plus. Nós estaremos editando o arquivo userChrome.css, que está na primeira aba. Se a guia estiver vazia, copie e cole o seguinte texto na guia userChrome.css e clique em Salvar. Isso lhe dá um arquivo userChrome.css padrão.

@namespace url (“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
# appmenu-button
fundo: #orange! importante;

# appmenu-button dropmarker: before
conteúdo: "Firefox"! importante;
cor: #FFFFFF! importante;

# appmenu-button .button-text
exibir: nenhum! importante;

Você pode já ter um arquivo userChrome.css, caso em que já haverá texto na guia userChrome.css. Copie todo o texto acima, exceto a primeira linha, a linha @namespace, e cole-a na guia em algum lugar após a linha @namespace. Se você quiser manter o que você já tem, você pode colar o texto acima no final do arquivo.

IMPORTANTE: Certifique-se de que todas as aspas no userChrome.css NÃO sejam aspas inteligentes, incluindo aquelas na linha @namespace. Eles devem ser citações diretas e diretas. Se algum deles for inteligente, o arquivo não afetará a aparência do Firefox..

Clique em Reiniciar para reiniciar o Firefox usando o arquivo userChrome.css novo ou revisado..

Neste exemplo, vamos mudar a cor de fundo para azul escuro e mudar o texto “Firefox” para “How-To Geek”.

Para alterar a cor do plano de fundo, altere o texto “# orange” na linha “background” na seção “# appmenu-button” para uma cor diferente, usando o código de cores hexadecimais ou o código de cores HTML. Por exemplo, escolhemos um azul escuro com o código de cor hexadecimal de # 2C4362.

NOTA: Para descobrir o código de cores hexagonais para uma cor desejada, consulte nossos artigos sobre como obter códigos de cores hexadecimais de cores RGB decimais, selecionar cores em qualquer lugar da tela e obter códigos de cores em vários formatos.

Para alterar o texto no botão, altere o texto “Firefox” na linha “conteúdo” na seção “# appmenu-button dropmarker: before” para o texto desejado, como “How-To Geek“. Adicionamos um espaço após o texto para ter mais espaço entre o texto e a seta suspensa no botão.

Você pode optar por alterar a cor do texto, alterando a linha “cor” na mesma seção “# appmenu-button dropmarker: before”. Nós deixamos a cor do texto como branco (#FFFFFF), mas você pode mudá-la para algo como um cinza claro (# F2F2F2), ou algo parecido.

Clique em Salvar e, em seguida, em Reiniciar para que as alterações entrem em vigor.

O botão agora é azul escuro e diz "Como fazer geek".

Você também pode adicionar uma imagem de fundo ao botão, além de alterar a cor do plano de fundo. Criamos uma imagem que tem o favicon How-To Geek à esquerda e um fundo transparente para que a cor de fundo azul-escuro apareça. Para adicionar uma imagem de fundo ao seu botão, adicione a seguinte linha à seção “# appmenu-button”, alterando o caminho entre aspas para o local da sua imagem em seu computador. Deixe o “file: ///” no caminho.

background-image: url (“file: /// C: /Users/Lori/Pictures/htg_background.png”)! important;

Clique em Salvar e Reiniciar novamente.

Agora nosso botão está completo.

Você também pode personalizar o botão de menu do Firefox convertendo-o em um ícone. Também publicamos muitas outras dicas e ajustes para aproveitar ao máximo o Firefox.