Whatsapp Web Kawaii

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💕

3 Comments

  1. Himenyanko19 junho

    Adorei o post,o Whats fica uma fofura!! <3
    Obrigada pelo tutorial (´｡• ω •｡`) ♡

    ResponderExcluir
  2. Ari Rush09 julho

    vc pode actualizar o blog ? Não consigo adicionar o fundo css

    ResponderExcluir
    Respostas
    1. Roberta30 julho

      A 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

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up