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!";
}
Ficou perfeito José. Muito obrigado.
Ficou muito bom. Só achei que não ficou muito nítido as Letras do campo (Calcular). Será que é possível alterar a fonte para ficar melhor?
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; */
}
José eu fiz a alteração. Porém não surtiu efeito. Posso ter esquecido de algum detalhe.
Segue o comando o comando e resultado.
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;
Ele ficou ficou bom José. Mas eu gostaria de deixar da mesma forma do botão
(Adicionar ). Como está na imagem anexo abaixo.
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;
}
Olá @Jose_Claudio_Alvarez pode me dar uma ajudinha?
Gostaria de arrendondaro menu busca
Ficou perfeito José. Muito Obrigado.