Oi. Eu uso bastante o Whatsapp Web, ainda mais em tempos de home-office e quarentena. A aparência padrão desse mensageiro é legal, mas pode melhorar, ficando ao gosto de quem usa. Vou mostrar como modificar seu whatsapp web de um jeito super simples; você pode alterar cores, no modo básico, e, caso curta personalizações em CSS, poderá adicionar planos de fundos com imagens, mudar fontes, remover algumas coisas...
Primeiro: lembra daquela extensão para navegador que falei nesse post, a Stylebot? Então, é com ela que a personalização de sites se torna possível. No post a que me refiro também tem a Stylish, onde você encontrará temas para o whatsapp web feitos por terceiros, se preferir.
Continuando, também é preciso que você tenha os links das imagens que irá utilizar como plano de fundo, sua foto... Hospede em algum site e copie os links delas para um bloco de notas.
Ok. Agora, no whatsapp web, clique em alguma parte vazia com o botão direito e escolha Stylebot - Style Element, para abrir o editor.
Ele é dividido em editor básico (Basic) e avançado (Advanced). Ali onde destaquei com um coração vermelho, serve para que, ao clicar, você possa selecionar a área a ser editada. Onde coloquei os morangos é para mudar o texto e onde estão as cerejas, muda plano de fundo e texto (as cores).
Basta clicar na ferramenta destacada no topo da imagem acima e depois clicar em alguma área que queira mudar.
Foi dessa forma que fiz para editar a área dos Status. É bem fácil!
No editor avançado podemos adicionar css. Novamente clique na ferramenta de seleção e na parte que deseja mudar. Por exemplo, a tela inicial do whatsapp web.
Vai aparecer tudo em branco. Aí mudei o plano de fundo usando a propriedade background; ao invés de imagem, usei aquele código de criar background com css, que você pode ver aqui.
Para trocar a imagem padrão e colocar minha foto, após selecionar a área da imagem que vem, usei esse código:
background: url(LINK-DA-FOTO) no-repeat top center;
background-size: 100%;
margin-bottom: -120px;
margin-top: -155px;
border: 25px double #f9b;Margin serve para posicionar a imagem mais para cima (top) ou para baixo (bottom).
E para mudar a fonte, usei a propriedade em css font-family. Na tela inicial, primeiro cliquei em "Mantenha...", e na parte avançada do css acrescentei:
color: #ff7d93;
font-family: magic love;
font-size: 35px;
line-height: 1.0;
text-shadow: 1px 1px white;Viu onde diz Magic Love? É o nome da fonte; pode ser usado as que estejam instaladas em seu computador, só mudar o nome. Essa é uma das fontes que compartilhei na postagem anterior.
Nas demais áreas de texto, usei a Beligna (post anterior). Color é a cor do texto, font-size é o tamanho da fonte, line height distância entre linhas e text-shadow sombra do texto. Mas pode ser mais simples ainda:
color: #9191cc;
font-family: beligna ;
font-size: 18px ;E aí é só ir personalizando tudo o que encontrar pela frente! Nas conversas tem como mudar até as cores dos balões das mensagens :>
Caso queira remover todas as alterações, só clicar em Reset Page. Para copiar os estilos, clique em Edit Css, se quiser usar em outros computadores. Fica bem mais fofo💕
Adorei o post,o Whats fica uma fofura!! <3
ResponderExcluirObrigada pelo tutorial (´｡• ω •｡`) ♡
vc pode actualizar o blog ? Não consigo adicionar o fundo css
ResponderExcluirA dica segue funcionando; basta usar a opção de seleção de área da extensão citada no post e personalizar o css inserindo background-color ou background image ^^
Excluir