Mudando a cor dos elementos de uma página usando CSS
Adicionando extensão no navegador
Utilizamos uma extensão do Google, para realizar qualquer alteração no CSS da página, assim conseguimos testar antes de aplicar a alteração, evitando que quebre alguma informação no site.
Extensão que utilizamos: Stylebot
Como fica no Google:
Clique no ícone da extensão para abrir o Editor e realizar a edição.
Quando clicamos, abre o Editor na lateral onde aplicamos nossa estilização via CSS. (No Modo de Código)
Após isso, clique com o botão direito do mouse para abrir o inspecionar da página.
Após abrir, clique no seletor para buscar a classe que quero alterar. No caso o botão "Finalizar Compra"
Ao clicar no botão "Finalizar Compra", ele marca e mostra qual classe preciso alterar.
Copie a classe, coloque no editor do Stylebot e aplique alteração da cor utilizando o "background-color: "
Obs: Sempre importante verificar antes de aplicar, se essa classe aplica apenas a esse botão, pois se for em uma classe genérica pode mudar em outro lugar do site, assim quebrando o layout.
Após verificar, adicionamos dentro da plataforma nos Arquivos Estáticos para salvar essa alteração.
Clico em Criar Arquivo Estático --> após em CSS
Adicione as informações como:
Nome do arquivo, Página a ser aplicada , Dispositivos onde quero que apareça, Status em "produção" para
ficar ativo no site, adicione a Prioridade pois caso tenha o mesmo conteúdo é aplicado com a prioridade maior, escolha os Canais a ser aplicado (Varejo ou Atacado) e adicione a classe CSS dentro do Conteúdo.
Após isso clique em Criar
Após, clique em "Limpar Cache" para atualizar na página.
Pronto, alteração realizada com sucesso!