Alteração do texto e dos botões

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?

1 curtida

Bom dia José. Está em manutenção.

Segue link: https://blazelongboards-manutencao.lojaintegrada.com.br/

1 curtida

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!";
}
2 curtidas

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?

1 curtida

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; */
}
2 curtidas

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.

1 curtida

Ele está ficando nesse formato ao clicar. Quando eu clico no botão Calcular.

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;
}
2 curtidas

Faz um teste nessa linha da fonte, tenta mudar o valor dela para esse:

font-family: emoji;
2 curtidas

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;
}
2 curtidas

Está ficando bom José. Mas ele ainda está com uma impressão de embaçado.

Alterei a cor para testar José. Parece que ele está com uma sombra.

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;
}
2 curtidas

Ficou perfeito José. Muito Obrigado.

1 curtida

Bom dia José. Tem mais um campo que está com aquela sombra.
No botão Adicionar. Pode me ajudar?

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;
}
2 curtidas

Olá @Jose_Claudio_Alvarez pode me dar uma ajudinha?

Gostaria de arrendondaro menu busca

image

Ficou perfeito José. Muito Obrigado.Resultado - adicionar

1 curtida