Boa tarde. Gostaria de alterar cor os textos os campos - Calcule o Frete, CEP e Calcule.
Bom dia. Não estou conseguindo acessar essa página, sua loja está em manutenção?
Bom dia José. Está em manutenção.
Segue link: https://blazelongboards-manutencao.lojaintegrada.com.br/
Para alterar as cores dos elementos, use esse código CSS:
/*Cor do texto "Calcule o Frete"*/
#formCalcularCep > label {
color: red;
}
/*Cor do placeholder do campo CEP*/
#formCalcularCep > div > div > input::placeholder {
color: blue;
}
/*Cor do botão Calcular*/
#formCalcularCep > div > div > button {
background: red;
border-color: black;
}
/*Cor do texto*/
#formCalcularCep > div > div > button:before {
color: white;
}
Para alterar os textos, use esse código JavaScript:
$(document).ready(function() {
//Altera Texto "Calcule o Frete"
$('#formCalcularCep > label').text('SEU TEXTO AQUI!');
//Altera texto do placeholder CEP
$('#formCalcularCep > div > div > input').attr('placeholder', 'SEU TEXTO AQUI!');
});
Se o código anterior não funcionar igual aconteceu com os ícones das redes sociais, tenta trocar por esse aqui:
setTimeout(
function() {
//Altera Texto "Calcule o Frete"
$('#formCalcularCep > label').text('SEU TEXTO AQUI!');
//Altera texto do placeholder CEP
$('#formCalcularCep > div > div > input').attr('placeholder', 'SEU TEXTO AQUI!');
}, 1000);
Só o texto do botão Calcular que você precisa alterar via CSS também:
/*Altera texto do botão Calcular*/
.produto div.principal .cep .input-append.input-prepend .btn:before {
content: "SEU TEXTO AQUI!";
}
Naquele código que eu te enviei para alterar o texto do botão Calcular, é só adicionar uma linha a mais com o nome da fonte que você quer usar:
/*Altera texto do botão Calcular Frete na tela de adicionar o item ao carrinho*/
.produto div.principal .cep .input-append.input-prepend .btn:before {
content: "Calcular";
font-family: Arial;
}
Aliás, altera esse código também para garantir que não vai aparecer nenhum texto diferente no seu botão, como um “OK”, é só apagar a linha font-size: 16px;:
/*Cor do botão Calcular*/
#formCalcularCep > div > div > button {
background: #00bfff; /*azul*/
border-color: #00bfff; /*azul*/
/*Essa linha deve ser apagada*/
/* font-size: 16px; */
}
Parece que tinha um CSS associado ao evento de clique do botão. Veja se esse código resolve o problema:
.btn:focus {
outline: none;
outline: none;
outline-offset: 0px;
}
Faz um teste nessa linha da fonte, tenta mudar o valor dela para esse:
font-family: emoji;
Esse está difícil. Tenta usar esse código CSS no lugar do anterior:
.produto div.principal .cep .input-append.input-prepend .btn:before {
content: "Calcular";
font-family: inherit;
font-size: 12px;
font-weight: 400;
}
Que esquisito. E a sombra só está neste botão. Tenta usar esse código para ver se nos livramos dela:
.btn {
text-shadow: none;
}
Já tem um código CSS que você colocou para alterar esse botão. No caso, só acrescente essa linha a ele:
.produto .acoes-flutuante .botao-comprar {
background: #32CD32;
color: #000000;
/*Linha nova para retirar sombra do texto*/
text-shadow: none;
}
Ficou perfeito José. Muito Obrigado.