Você já quis personalizar a aparência do seu navegador da web? Os temas para o Google Chrome podem ser usados para fazer exatamente isso. A Chrome Theme Store pode ter uma grande variedade de opções, de temas espaciais a carros e belas paisagens, mas e se nenhuma essas opções são exatamente o que você deseja, ou se deseja personalizar o Chrome para ter uma de suas próprias fotos como plano de fundo em vez disso? Bem, felizmente você pode fazer exatamente isso.
Existem dois métodos para criar seu próprio tema. O Chrome tem uma função embutida simples que permite importar uma imagem de fundo para a página da nova guia e personalizar o esquema de cores da interface do usuário a partir de uma série de predefinições. Se o recurso integrado do Chrome não tiver a quantidade de opções de personalização que você deseja, um site chamado ThemeBeta tem coberto, com um criador de temas Chrome rico em recursos, mas fácil de usar, (embora o processo de instalação seja um pouco mais complexo). Neste artigo, vamos orientá-lo no processo de criação de seu próprio tema do Chrome com as duas ferramentas.
A ferramenta simples integrada do Chrome
Para usar o editor de temas integrado do Chrome, abra uma nova guia. No canto inferior direito da página nova guia há um ícone de lápis, clique nele para personalizar a aparência de seu Chrome.
Na janela pop-up que aparece quando você clica no ícone de lápis, sua primeira opção é configurar a imagem de fundo. Aqui você pode escolher entre um número muito limitado de opções predefinidas ou pode carregar sua própria imagem. Esta imagem de plano de fundo só se aplica à página da nova guia, não se tornará um plano de fundo em nenhum site real.
Depois de selecionar uma imagem de plano de fundo, vá para a guia “Cor e tema”. Aqui você pode escolher entre uma seleção de combinações de cores. Essas opções de cores afetam as cores da guia e as barras de pesquisa e de favoritos que formam a interface de usuário do Chrome. Em outras palavras, na maioria dos sites que você visita, essas cores serão mais perceptíveis do que a imagem de fundo, simplesmente porque a barra superior do navegador sempre será desta cor!
Se nenhum dos esquemas de cores predefinidos for exatamente o que você deseja, a opção de cor superior esquerda permite que você escolha seu próprio esquema de cores, com um espectro completo de opções de cores para escolher. Para selecionar uma cor, primeiro clique no símbolo superior esquerdo e, em seguida, use o pop-up que aparece para escolher sua cor. Ajuste a mira no espectro de cores para obter sua sombra e a seta preta à direita da janela para escolher o brilho do tom. Se você não tem certeza de como isso funciona - quanto mais para cima ou para baixo você move a seta preta, mais clara ou mais escura sua cor fica. Para tons mais intensos, defina a cruz perto do topo e a seta no meio. Para cores mais claras, mova a mira um pouco mais para baixo e a seta para cima.
Depois de selecionar a cor desejada, clique em “Adicionar às cores personalizadas” no canto inferior direito. Em seguida, selecione sua cor personalizada na lista “Cores personalizadas” no canto inferior esquerdo e clique em “OK” para aplicá-la. Se você estiver escolhendo um esquema de cores personalizado, você só pode escolher uma cor, o Chrome escolherá uma segunda cor semelhante para completar o tema com o que ele acha que vai caber melhor.
Dica: o Chrome quase sempre assume que a cor escolhida é a mais escura das duas cores do tema e escolherá uma segunda tonalidade mais clara. Escolha de acordo!
Quando estiver satisfeito com sua imagem de fundo e conjunto de cores, clique em “Concluído” para salvar seu tema personalizado e você está pronto para começar!
Temas de terceiros simplificados
Se você quiser um tema simples, a ferramenta integrada do Chrome deve ser suficiente, mas se você quiser mais individualidade, ThemeBeta oferece mais controle. O site permite que você modifique manualmente as cores das guias de primeiro e segundo plano, o texto nas barras de guias e muito mais.
Em primeiro lugar, você precisa navegar até o site da ThemeBeta. Você pode navegar por temas enviados por usuários em seus pagina inicial, ou você pode ir direto para o página do criador do tema para começar com o seu. A primeira etapa, uma vez que você está no criador do tema, é escolher uma imagem de plano de fundo. Clique em “1. Carregar uma imagem ”e, em seguida, carregar uma imagem do seu disco rígido. Esta imagem será a base do seu tema e será a imagem de fundo na página nova guia.
Dica: Qualquer imagem que você enviar deve estar no formato de arquivo PNG ou JPG, pois esses são os únicos formatos suportados. Use um conversor online se sua imagem for diferente.
Se a imagem que você carregou não parece certa, pode ser muito ampliada ou ter barras nas laterais ou na parte superior - então você deve tentar alterar as opções de “Imagem de fundo”. Respectivamente, configuram alinhamento horizontal, alinhamento vertical, se a imagem se repete se for muito pequeno para a tela, como a imagem é redimensionada para caber na tela e um ajuste de escala manual. Teste as opções até encontrar algo que o agrade!
Depois que sua imagem for carregada, a visualização no lado direito da página será atualizada para representar a aparência do seu tema. O segundo passo é clicar em “2. Gerar cores ”, este botão usará as cores presentes na imagem que você carregou, para criar uma paleta de cores semelhantes para usar no resto da interface do usuário.
Se o esquema de cores gerado automaticamente se adequar à aparência que você deseja, você pode pular aqui para o instruções de instalação. Mas se você deseja configurar manualmente as cores de coisas como guias de primeiro plano, guias de plano de fundo e a barra de ferramentas, os detalhes são cobertos na seção de configuração avançada abaixo.
Configuração avançada
Existem duas guias de opções de configuração avançada disponíveis no canto superior esquerdo, a primeira é “Imagens”. Aqui você pode configurar uma imagem de fundo para certos elementos. Quando você passa o mouse sobre cada uma das opções, ele destaca em vermelho o elemento que aquela configuração modificaria na visualização.
Dica: NTP significa “página nova guia”, as opções que começam com este acrônimo estão presentes apenas na página nova guia, outras estão visíveis em outras páginas.
- “Fundo NTP” configura o fundo principal, se você importou uma imagem anteriormente esta já estará “Carregada”.
- “Frame” configura a interface do usuário, excluindo a lista de guias, barra de pesquisa e barra de favoritos.
- “Barra de ferramentas” configura a guia ativa, a barra de favoritos e a área ao redor da barra de pesquisa.
- “Fundo da guia” configura a cor de fundo para guias não ativas.
- “Sobreposição de quadro” permite configurar uma segunda imagem que se sobrepõe à imagem em “Quadro”.
- “Atribuição NTP” adiciona uma imagem ao canto esquerdo inferior da página da nova guia, geralmente para fins de marca d'água.
Dica: se você fez upload de uma imagem e não gostou da aparência, pode removê-la clicando no botão “X” ao lado do marcador “Carregado” relevante. Se o upload de uma imagem mudou a cor de fundo para aquele elemento, você pode defini-lo de volta manualmente ou clicar em “Gerar cores” na guia “Básico” novamente para redefinir o esquema de cores.
A segunda guia avançada é intitulada “Cores”. Aqui - como nas opções da página anterior que tinha uma caixa ao lado - você pode usar a caixa para abrir um seletor de cores e escolher uma cor sólida para os respectivos elementos. Mais uma vez, se você passar o mouse sobre a opção de configuração, o elemento afetado será destacado na visualização em vermelho.
- “Barra de ferramentas” configura a cor de fundo do rótulo de atribuição ThemeBeta no canto inferior esquerdo da página da nova guia.
- “Tab Text” configura a cor do texto na guia atualmente ativa na lista de guias. Ele também define a cor do texto de atribuição ThemeBeta no canto inferior esquerdo da página da nova guia.
- “Background Tab Text” configura a cor do texto nas abas inativas da lista de abas.
- “Texto dos favoritos” configura a cor do texto dos itens da barra de favoritos.
- “Texto NTP” configura a cor do texto ou os links de página recomendados / regulares no centro da página.
- “Link NTP” não tem nenhum efeito.
- “Botões de controle” configura a cor dos botões minimizar, maximizar e fechar no canto superior direito.
- “Botões” configura a cor dos botões para frente, para trás, recarregar e inicial.
Depois de configurar todas as opções avançadas da maneira que deseja, você está pronto para prosseguir com o processo de instalação.
Instalação de um tema de terceiros
Por motivos de segurança, o Google agora permite que apenas extensões e temas sejam instalados por meio da Chrome Webstore. Para instalar seu tema personalizado, você precisará habilitar um recurso de desenvolvedor. Infelizmente, essa alteração significa que o botão simples “Empacotar e instalar” nas guias “Básico” e “Empacotar” não funcionam mais. Se você tentar o método “Empacotar e instalar”, receberá uma mensagem de erro.
Para contornar isso, vá para a guia “Pacote” e clique em “Empacotar e baixar o arquivo Zip”
Depois de fazer o download do arquivo zip, extraia os arquivos e salve-os em seu disco rígido. Clique duas vezes no arquivo que você baixou e selecione Extrair na parte superior do visualizador de arquivos. Você terá que selecionar para onde extrair seus arquivos. Lembre-se de onde você os salvou para que possa carregá-los novamente com mais facilidade.
Dica: Se você renomear a pasta para indicar qual é o tema, pode ser mais fácil encontrá-lo novamente no futuro, se você quiser reutilizá-lo.
A próxima etapa é a página de extensões do Chrome. Você pode acessá-lo clicando nos três pontos no canto superior direito, em “Mais ferramentas”, depois em “Extensões”, ou você pode clicar aqui.
Assim que estiver no menu de extensões, no canto superior direito da página, há um controle deslizante marcado “Modo de desenvolvedor”. Habilitá-lo. Assim que o modo de desenvolvedor estiver habilitado, três botões devem aparecer no canto superior esquerdo. O que você precisa é “Load unpacked”. Clique em “Carregar descompactado” e importe a pasta que você extraiu do arquivo zip anteriormente.
Dica: você deseja importar a pasta pai, não a pasta “imagens” que ela contém. Se você não o renomeou antes, o nome será algo como “theme1234567890”
Assim que o tema for importado, um alerta aparecerá na guia atual, confirmando que o tema foi instalado e oferecendo um botão de desfazer. Antes de fechar este alerta, abra uma nova guia e certifique-se de que tudo esteja como você desejava.
Se o seu tema não saiu da maneira que você esperava, clique em “Desfazer” e tente modificar o seu modelo novamente. Quando estiver satisfeito com os resultados, fique à vontade para fechar a página “Extensões” e continuar navegando com seu novo tema personalizado do Chrome.