CSS para mudar a cor de fundo dos ícones de forma individual (Layouts 1, 2, 5, 7 e 10)

< Voltar

Para personalizar individualmente a cor de cada ícone da homepage, aplique o código deste artigo seguindo as instruções abaixo:

1 – Abra o Construtor de Apps

2 – Vá para a sessão CORES

3 – Desça a página pela barra de rolagem até o final onde você localizará a sessão “PERSONALIZAÇÃO AVANÇADA CSS / SCSS”, se tiver escondido clique em MOSTRA.

4 – Cole o código abaixo (exatamente como esta) no campo em branco.

Obs. Se caso já tiver algum código neste local, aconselhamos que pule pelo menos 2 linhas e depois acrescente o código CSS abaixo. Para separar bem os códigos.


.homepage .layout li:nth-child(1) {
background-color: #0099C7;
}
.homepage .layout li:nth-child(2) {
background-color: #ffd64b;
}
.homepage .layout li:nth-child(3) {
background-color: #ff3a2e;
}
.homepage .layout li:nth-child(4) {
background-color: #9d5cad;
}

Obs: Para personalizar mais que 4 recursos no menu, copie as 3 primeiras linhas deste código e altere apenas o número entre os parenteses, por exemplo: Para alterar o 5º ícone então coloque o número (5) e assim sucessivamente em todos que desejar seguindo a ordem dos recursos no projeto. Para mudar as cores para qual desejar é só mudar o valor entre “#” e “;”, por exemplo, para a cor branca: #ffffff; .

Veja esta tabela de cores “código HTML”: https://www.flextool.com.br/tabela_cores.html ou você pode usar qualquer ferramenta de cor nesta mesma sessão CORES no painel para gerar um código de cor HTML

 

5 – Salve.

6 – Verifique o resultado no simulador ao lado.
Obs. Se caso não houver mudança imediata, por favor clique em F5 ou Ctrl+F5 para atualizar a página e verifique novamente. Se mesmo assim o efeito não estiver ocorrendo verifique o código novamente e salve.

 

Pronto. 😉

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Carrinho Item removido. Desfazer
  • Não a produtos no carrinho.