O arquivo userChrome fica localizado na pasta do perfil do usuário em uma pasta chamada chrome, nesta pasta existem dois arquivos chamados: userChrome-example.css e userContent-example.css, como o nosso foco é o userChrome eu não entrarei em detalhes sobre o userContent, apenas adianto que ele pode ser utilizado pelo usuário para aplicar estilos personalizados à páginas exibidas pelo navegador.
Para o nosso tutorial abra o userChrome-example com um editor de textos qualquer e salve uma cópia com o nome de userChrome.css, o exemplo já vem com algumas modificações comentadas e é por elas que nós começaremos a modificar o navegador.
Uma bem interessante é a que permite remover a animação que representa o loading dá página, chamada throbber, apesar de não ser um empecilho o espaço ocupado pela mesma será utilizado em futuras modificações. Para remover a tal animação utilize a seguinte regra aplicada ao seletor #throbber-box:
#throbber-box {
display: none !important;
}
Para quem conhece CSS a regra acima é de muito fácil entendimento, ela diz que o elemento com o atributo ID igual a throbber-box terá a propriedade display modificada para none, ou seja, o elemento não será exibido. A propriedade !important indica que esse estilo deve ter uma importância maior do que o estilo padrão do navegador.
Após as alterações reinicie o navegador e veja se a animação continua aparecendo na barra de menus.
Aumentando a área de visualização do seu navegador
Em determinadas resoluções de tela o espaço de visualização, ou viewport area, se torna muito importante, o userChrome permite maximizar esse espaço através da eliminação de barras e opções pouco utilizadas.
Abra o arquivo novamente e adicione as seguintes linhas ao final do mesmo:
/* Essa alteração esconde os menus ajuda e editar da barra de menus */
#helpMenu, #edit-menu {
display: none !important;
}
/* Esconde o botão voltar se não houver uma página anterior no histórico de navegação, caso o botão seja necessário ele volta a aparecer na barra */
#back-button[disabled="true"] {
display: none;
}
/* Esconde o botão avançar se não houver uma próxima página no histórico, caso o botão seja necessário ele volta a aparecer na barra */
#forward-button[disabled="true"] {
display: none;
}
/* Esconde o botão parar caso a página não esteja sendo carregada, quando necessário ele se torna visível novamente */
#stop-button[disabled="true"] {
display: none;
}
/* Esconde o botão home */
#home-button {
display: none;
}
O userChrome permite ao usuário alterar de varias maneiras o firefox e torna-lo único ao gosto do usuário.
Fonte: LifeHacker
7 comentários:
Ficou muito legal e fácil esse tutorial! Com certeza, bem mais fácil de entender do que o do site LifeHacker. Valeu!
uma dica é a extensão dom inspector, que atualmente não vem mais instalada com o firefox. com ela você consegue pegar os ids de toda a interface do firefox. é bem simples de mexer e muito interessante!!!
Legal essa do Dom Inspector ler a árvore do próprio Firefox é nova pra mim, vou testar aqui. Vlw!!!
então, no menu "file" tem o submenu "inspect chrome document", lá você escolhe a primeira opção, normalmente o nome da página seguido de " - Mozilla Firefox". e você usa o iconezinho de setinha pra apontar na interface do firefox. ou o binoculo para procurar!!! enfim, aí é só correr para o abraço ;)
Não seria muito mais fácil simplesmente clicar em qualquer canto perto das barras do Firefox selecinar personalizar e então arrastar itens como as barras e os ícones para onde você quiser ? Inclusive para remover ítens como o ícone de loading basta arrastar ele para aquela janela de ícones que abre quando você clica em persolizar.
Correções do comentário acima: Clicar com o botão direito do mouse e não só o ícone de loading pode ser removido mas outros itens também.
Olá Whesley, realmente você pode simplesmente arrastar os botões que não deseja para a janela de personalizar, mas a diferença entre esse método e o meu é que fazendo pelo userChrome a visibilidade dos botões se torna dinâmica, ou seja eles só aparecem quando são necessários, isso é feito através do atributo [disabled="true"], assim é possível tornar a utilização da barra de ferramentas mais inteligente e aproveitar melhor o espaço de visualização de páginas. Em contrapartida se o que você deseja é apenas remover a alguns elementos da barra de ferramentas realmente a janela de personalizar é mais rápida e não exige conhecimentos em CSS.
Postar um comentário