Pergunta sobre Dara do Wordpress: Alterar a cor do carrinho flutuante

Um usuário perguntou ?

Eu só quero ajustar a cor do botão Adicionar ao carrinho quando nenhuma opção estiver selecionada. É uma cor mais quente que o azul marinho que eu gostaria de ter.

Agradecemos qualquer ajuda! Abençoar!

lançador de tópicos

(@windanwaves)

1 ano, 11 meses atrás

Existe uma maneira de alterar todas as capas de botão em todo o site? Cada vez que penso que tenho todos, encontro outro.

Também gostaria de alterar a cor do cursor do botão ‘passar para o paypal’ nesta página:

Se eu pudesse mudar todas as cores de um pergaminho, poderia reduzir a quantidade de código que uso e capturar qualquer botão que ainda não tenha notado.

OBRIGADO POR AJUDAR!!

(@anônimo-16453565)

1 ano, 11 meses atrás

Olá @windanwaves

Para isso, acesse Aparência → Personalizar → CSS adicional e digite o seguinte código:

button:hover {
  background-color: red !important;
}

Espero que o acima te ajude.

Obrigado.

(@mattjallday)

1 ano, 11 meses atrás

Então isso funciona na maioria dos botões.

Também estou usando este código para alterar todas as cores dos botões para preto:

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Existe uma maneira de combinar esses dois códigos para que todos os botões sejam #000000 e os códigos de rolagem dos botões sejam #24c7e1?

(@kokkieh)

1 ano, 11 meses atrás

Olá Mateo

O problema com isso é que alguns botões podem ter seus próprios plugins que podem ter seu próprio arquivo style.css, então esses botões usam o estilo especificado pelo plugin ao invés do estilo especificado pelo tema. A única maneira de capturar todos eles é obter os seletores CSS específicos aplicáveis a cada botão.

E se você alterar a cor de fundo dos botões para preto, também precisará alterar a cor do texto para tornar o texto do botão legível.

Finalmente, tente evitar o uso de !important o mais longe possível. Se o seu seletor CSS for específico o suficiente, você não precisará dele. Qualquer que seja o código que eu tente, existem alguns !important As garantias que você adicionou impedem que ele funcione corretamente, então é melhor removê-las completamente.

Vá para seu CSS personalizado e remova essas duas regras que você adicionou:

button:hover {
  background-color: #24c7e1 !important;
}

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt {
	background: #000000 !important;
}

Em seguida, adicione o seguinte: Altere todos os botões que posso encontrar, incluindo o botão Ir para o PayPal:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #24c7e1;
}

a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #515151;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #24c7e1;
}

a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #24c7e1;
}

lançador de tópicos

(@windanwaves)

1 ano, 11 meses atrás

Você é maravilhoso! Muito Obrigado. Ficou bem parecido com o que eu queria. Eu aprecio.

A única coisa que quero ajustar agora é a cor do texto no botão de opções selecionado aqui:

Quero mudar de azul para branco.

Com o plano de fundo no botão Adicionar ao carrinho aqui quando nenhuma opção estiver selecionada:

Eu quero mudar de azul esverdeado para preto.

Se possível tudo será perfeito. Já estou muito feliz com o código que você forneceu. Obrigado novamente !!

(@lizkarkoski)

1 ano, 11 meses atrás

Olá –

A única coisa que quero ajustar agora é a cor do texto no botão de opções selecionado aqui:

Quero mudar de azul para branco.

Adicione o seguinte CSS:


a.button.product_type_variable.add_to_cart_button 
.content-wrapper.full-width a {
    color: #ffff;
}

Com o plano de fundo no botão Adicionar ao carrinho aqui quando nenhuma opção estiver selecionada:

Eu quero mudar de azul esverdeado para preto.

Use a seguinte SEQ:

div.product form.cart .button {
 background-color: #15b6b8;
}

Deixe-me saber se isso funciona bem 🙂

(@lizkarkoski)

1 ano, 11 meses atrás

Desculpa. Eu fiz uma bagunça com aquela segunda parte da SEC. Como o botão fica desabilitado até que um produto seja selecionado, você precisa usar isso:

.disabled {
   background-color: black !important;
}

lançador de tópicos

(@windanwaves)

1 ano, 11 meses atrás

Hmmm, por algum motivo o primeiro código não faz nenhuma alteração no texto das opções selecionadas.

O segundo código funcionou muito bem!

Muito obrigado!

(@kokkieh)

1 ano, 11 meses atrás

Hmmm, por algum motivo o primeiro código não faz nenhuma alteração no texto das opções selecionadas.

A ordem em que um SEC é colocado é importante: é sempre executado de cima para baixo. E parece que em ambos os casos você coloca o código que Liz te deu entre o código que eu te dei antes. Isso pode estar impedindo que o código funcione corretamente, pois pode levar a uma violação posterior do novo código; uma vez que Liz tentasse, ela estaria adicionando seu código APÓS o código que eu dei a ela, não no meio.

Mova todo o código que Liz lhe deu para a parte inferior do CSS personalizado, para que ele apareça apenas após o código que eu lhe dei. Ou seja, deve ficar assim:

/* Sets background and text color for clickable buttons */
a.button, button.button, input.button, #respond input#submit, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, a.button.wc-backward, a.button.wc-forward,button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span, .button {
  background-color: #000000;
  color: #ffffff;
}

/* Sets background and text color for button hover */
a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover, a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, a.button.wc-backward:hover, a.button.wc-forward:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, #infinite-handle span:hover, .button:hover {
  background-color: #24c7e1;
  color: #ffffff;
}

/* Sets background and text color for disabled buttons */
a.button:disabled, a.button.disabled, a.button:disabled[disabled], button.button:disabled, button.button.disabled, button.button:disabled[disabled], input.button:disabled, input.button.disabled, input.button:disabled[disabled], #respond input#submit:disabled, #respond input#submit.disabled, #respond input#submit:disabled[disabled]{
  color: #ffffff;
}

/* Sets background and text color for disabled buttons hover */
a.button:disabled:hover, a.button.disabled:hover, a.button:disabled[disabled]:hover, button.button:disabled:hover, button.button.disabled:hover, button.button:disabled[disabled]:hover, input.button:disabled:hover, input.button.disabled:hover, input.button:disabled[disabled]:hover, #respond input#submit:disabled:hover, #respond input#submit.disabled:hover, #respond input#submit:disabled[disabled]:hover {
  background-color: #000000;
}

/* Changes text color on Select Options button on Shop page */
a.button.product_type_variable.add_to_cart_button  {
  color: #ffffff;
}

Observe também que alterei um pouco o código do botão Selecionar opções.

O segundo código funcionou muito bem!

usando !important viola este comando, então qualquer código que você adicionar sempre funciona. Mas ele viola este comando, o que significa que quando você o adiciona !important com alguma coisa, não há como superar isso mais tarde, se você precisar.

Tente isso (lembre-se de adicioná-lo somente após o código existente):

/* Changes background color for inactive Add To Cart button on variable product page */
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
  background-color: #000000;
}

Ao ser mais específico em nosso seletor, podemos obter e usar o mesmo resultado !importantmas sem os possíveis problemas futuros !important pode causar.

lançador de tópicos

(@windanwaves)

1 ano, 11 meses atrás

Funciona perfeitamente! Obrigado!!!!!

(@kokkieh)

1 ano, 11 meses atrás

Disposto a ajudar ?

Isto foi útil?

0 / 0

Deixe uma resposta 0

Em geral, desenvolvedores experientes podem entregar um trabalho e valor mais rápidos para seus clientes com seu trabalho, portanto, os preços geralmente refletem isso. As taxas de desenvolvedor gratuitas podem ser afetadas pela localização geográfica e pelas condições do mercado local. Outro fator é a popularidade de um desenvolvedor WordPress. Se eles ainda estão construindo seu portfólio, eles podem ter preços mais competitivos do que profissionais experientes. A pessoa que você quer vai depender da complexidade do seu site; Se você encontrar o desenvolvedor WordPress certo, seu objetivo deve ser atingir os objetivos do seu site.

Outras perguntas relacionadas

Pergunta sobre Dara do WordPress: Alterar a cor do carrinho flutuante
Um usuário perguntou ? Eu só quero ajustar a cor do botão Adicionar ao carrinho quando nenhuma opção estiver selecionada. É uma cor mais quente que o azul marinho que eu gostaria de ter. Agradecemos qualquer ajuda! Abençoar! lançador de tópicos (@windanwaves) 1 ano, 11 meses atrás Existe uma maneira de alterar todas as capas […]
Pergunta sobre Dara do WordPress: Altere a cor de fundo e a cor do texto do rodapé
Um usuário perguntou ? Quero alterar a cor de fundo do rodapé para branco (em vez de cinza escuro) e alterar a cor do texto do rodapé para preto (em vez de branco). (@ addweb-solution-pvt-ltd) 2 anos, 10 meses atrás Olá Mattjallday, Insira o código CSS abaixo no arquivo style.css do tema para seu filho […]
Pergunta sobre Dara do WordPress: informações de direitos autorais no rodapé e várias imagens da barra lateral
Um usuário perguntou ? Olá! Algumas perguntas sobre o segundo tópico. Posso colocar informações de direitos autorais no rodapé em vez de “Powered by WordPress…” e, em caso afirmativo, como faço para que o ano seja atualizado automaticamente? Não consigo encontrar onde editar o rodapé. Além disso, o widget de imagem da barra lateral pode […]
Pergunta sobre Dara do WordPress: O segundo tema não funciona no celular
Um usuário perguntou ? Eu uso o segundo tema, que deve ser responsivo, mas vejo uma versão minúscula do meu site de desktop usual ao tentar retirá-lo no meu iPhone. Quando habilito a cena mobile em “aparência” fica bem estranho, sem minha imagem de capa por exemplo. Ele não olha para a visualização móvel que […]
Pergunta sobre Dara do WordPress: Alterar a cor por trás de um logotipo
Um usuário perguntou ? Olá, como faço para mudar essa cor branca atrás do logotipo? (inferior acima da barra de menu) Eu gostaria que fosse amarelo. (@darnelldibbles) 1 ano, 9 meses atrás Olá, Qual é a URL do site? Eu verifiquei o site anexado ao seu perfil (http://igorfinelli.com/), mas não vi um logotipo nesse site, […]
Pergunta sobre Dara do WordPress: Encontre apenas o widget do blog
Um usuário perguntou ? Olá! Sou novo neste tópico (mas não no WordPress), mas gostaria de saber se existe uma maneira de limitar o recurso de “pesquisa” na página do blog apenas para blogs … Por exemplo, se você pesquisar por “yoga”, você renuncia aos depoimentos, mas prefere que você pesquise apenas as postagens dessa […]

Pergunta sobre Dara do WordPress: Alterar a cor do carrinho flutuante