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

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

Vídeo: Como personalizar a aparência do botão do menu laranja do Firefox

Vídeo: Como personalizar a aparência do botão do menu laranja do Firefox
Vídeo: Transmissão de games em 1080i ou 1080p? - YouTube 2024, Marcha
Anonim
Você se cansa de olhar para o botão do menu laranja do Firefox? A interface do Firefox é totalmente personalizável, por isso você pode alterar a cor, o texto e outras propriedades do botão de menu do Firefox para criar sua própria aparência personalizada.
Você se cansa de olhar para o botão do menu laranja do Firefox? A interface do Firefox é totalmente personalizável, por isso você pode 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 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.
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.

https://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.
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 de software é exibida. Clique em Instalar agora, que pode não estar disponível até que uma contagem regressiva seja concluída.
A caixa de diálogo Instalação de software é exibida. Clique em Instalar agora, que pode não estar disponível até que uma contagem regressiva seja concluída.

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

Você deve reiniciar o Firefox para concluir a instalação. Clique em Reiniciar Agora na caixa de diálogo pop-up.
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.
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.
Image
Image

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 fornece um arquivo userChrome.css padrão.

@namespace url(“https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”); #appmenu-button { background: #orange !important; } #appmenu-button dropmarker:before { content: “Firefox” !important; color: #FFFFFF !important; } #appmenu-button.button-text { display: none !important; }

Você pode já ter um arquivo userChrome.css e, nesse caso, 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”.
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ê 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 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".
O botão agora é azul escuro e diz "Como fazer".
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 no seu computador. Deixe o “arquivo: ///” no caminho.
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 no seu computador. Deixe o “arquivo: ///” no caminho.

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

Clique em Salvar e Reiniciar novamente.

Recomendado: