28Jun
Você se cansa de olhar para o botão de 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 do menu do Firefox para criar seu próprio visual personalizado.
Para alterar a aparência do botão do 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 sua funcionalidade.
Antes de mergulhar na edição do arquivo userChrome.css, instalaremos um complemento, chamado ChromEdit Plus, que nos permitirá editar facilmente o arquivo e salvá-lo no formato correto. Clique no seguinte link para acessar a página do ChromEdit Plus.
http: //webdesigns.ms11.net/ chromeditp.html
Clique no botão Adicionar ao Firefox na página.
A seguinte mensagem pode ser exibida. Clique em Permitir para continuar a instalar o complemento 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 achamos que ele é seguro e confiável.
A caixa de diálogo Instalação do software é exibida. Clique em Instalar agora, que talvez não esteja disponível até a conclusão da contagem regressiva.
NOTA: Você pode alterar o comprimento da contagem regressiva no botão Instalar, mas não recomendamos desativá-lo.
Você deve reiniciar o Firefox para finalizar a instalação. Clique em Reiniciar agora na caixa de diálogo pop-up.
Quando o Firefox for reiniciado, o botão ChromEdit Plus é adicionado à direita da caixa Endereço. Clique nele para abrir a janela ChromEdit Plus.
Existem três guias por padrão na janela ChromEdit Plus. Vamos editar o arquivo userChrome.css, que está na primeira guia. Se a aba estiver vazia, copie e cole o seguinte texto na guia userChrome.css e clique em Salvar. Isso fornece um arquivo defaultChrome.css padrão.
@namespace url( "http: //www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul");
# appmenu-button{ fundo
: #orange! Importante;
}
# appmenu-button dropmarker: antes do conteúdo{
: "Firefox"! Importante;
cor: #FFFFFF! Importante;
}
# appmenu-button. button-text{ display
: nenhum! Importante;
}
Você já pode ter um arquivo userChrome.css, caso em que já haverá texto na guia userChrome.css. Copie todo o texto acima, exceto para a primeira linha, a linha @namespace e cole-o na guia em algum lugar após a linha @namespace. Se quiser manter o que você já possui, você pode colar o texto acima no final do arquivo.
IMPORTANTE: Certifique-se de que todas as aspas no userChrome.css NÃO sejam citações inteligentes, incluindo as da linha @namespace. Eles devem ser cotações simples e diretas. Se qualquer um deles for citações inteligentes, o arquivo não afetará a aparência do Firefox.
Clique em Reiniciar para reiniciar o Firefox usando o novo ou revisado arquivo userChrome.css.
Neste exemplo, vamos mudar a cor de fundo para um azul escuro e mudar o texto "Firefox" para "How-To Geek".
Para alterar a cor de fundo, altere o texto "#orange" na linha "fundo" na seção "# appmenu-button" para uma cor diferente, usando o código de cor hexadecimal 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 cor hexadecimal para uma cor que você deseja, consulte nossos artigos sobre como obter códigos de cores hexagonais de cores decimais RGB, selecionando cores de qualquer lugar na tela e obtendo 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".Nós adicionamos um espaço após o texto para ter mais espaço entre o texto e a seta suspensa no botão.
Você também pode 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 branca( #FFFFFF), mas você pode mudá-la para algo como um cinza claro( # F2F2F2), ou algo assim.
Clique em Salvar e depois em Reiniciar para que as alterações entrem em vigor.
O botão agora é azul escuro e diz "How-To Geek".
Você também pode adicionar uma imagem de fundo ao botão, além de alterar a cor de fundo. Criamos uma imagem que possui o favicon How-To Geek à esquerda e um fundo transparente para que a cor do 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 nas aspas para a localização da sua imagem em seu computador. Deixe o "arquivo: ///" no caminho.
background-image: url( "arquivo: /// C: /Users/Lori/Pictures/ htg_background.png")! Importante;
Clique em Salvar e reiniciar novamente.
Agora nosso botão está completo.
Você também pode personalizar o botão do menu do Firefox convertendo-o em um ícone. Também publicamos muitas outras dicas e ajustes para tirar o máximo proveito do Firefox.