Hello
With the new updates, the buttons have a really nice looks.
For example:
https://www.virtualmagie.com/contact/annoncer-sur-virtualmagie-com/
But the problem is the other buttons on the site look very cheap in regards.
Some example with the contact form:
https://www.virtualmagie.com/contact/
or the shop:
https://www.virtualmagie.com/boutique/livres-de-magie-papier/en-route-john-guastaferro-francais/
Before you add this in a new update, could you please provide some CSS code transform all other buttons on the same look like the big round one?
Thanks
Hi,
Well the buttons that you say look ‘cheap’, come from contact form or woocommerce. The thee has no settings to style these buttons.
You can maybe try this css code to style them:
.single-product .product .summary .cart .button, .wpcf7-form input[type=submit] {
border-radius:5px;
background-color: #f60;;
}
.single-product .product .summary .cart .button:hover{
background-color:#444!important
}
.wpcf7-form input[type=submit]:hover{
background-color:#444!important
}
Thank you!
Hello Bogdan
First thank you for your help.
Your code worked… til the last theme update! đ
Here in contact form: https://www.virtualmagie.com/contact/
Here the add cart button is OK https://www.virtualmagie.com/boutique/livres-de-magie-papier/en-route-john-guastaferro-francais/
but not the buttons Ajouter au panier in the block “Vous aimerez peut-ĂȘtre aussi⊔
In the footer, how could we alo change the look of the newsletter button.
Same thing here: https://www.virtualmagie.com/categorie-produit/livres-de-magie-papier/
And in the end of the articles https://www.virtualmagie.com/articles/tests/lectures/harry-houdini-superheros-de-la-magie-philippe-beau-axelle-corty/ the Newsletter orange block.
I put this code for the button but it seems to use only the theme look.
.mailpoet_submit input {
display: inline-block;
font-weight: 400;height:40px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border-radius:6px;
background-color:#f6600;
padding: 10px 16px;
font-size: 20px;
line-height: 1.33;}Thanks
Hello,
The code i provided only applies to the contact form and woocommerce products. and they still apply. Please check your custom css section of the theme panel as it seems the code is no longer present there. Please use the theme panel and do not place the css code directly in style.css as it will get overwritten when updating the theme.
The orioginal code was not created to target products such as here:
https://www.virtualmagie.com/categorie-produit/livres-de-magie-papier/
You can use this new code to also handle the products:
.single-product .product .summary .cart .button, .wpcf7-form input[type=submit], .woocommerce ul.products li.product .button {
border-radius:5px;
background-color: #f60;;
}
.single-product .product .summary .cart .button:hover{
background-color:#444!important
}
.wpcf7-form input[type=submit]:hover{
background-color:#444!important
}
As for the orange block at the end of posts, if i set the button to orange, you will not distinguish it any longer:
https://www.screencast.com/t/NdtU1vBL
Thanks
Many thanks.
The buttons look in the WooCommerce are now quiet nice.
https://www.virtualmagie.com/categorie-produit/tours/
In the FWPCF7form, the color are still invert meaning it would be cool that the buttons are orange and after grey/black like in Woo.
https://www.virtualmagie.com/contact/
For MailPoet, no change : https://www.virtualmagie.com/articles/autres/interviews/enzo-weyne-magicien-grandes-illusions/
Same on te button in the footer.
I try to put the code directly in the MP style mais eather way nothing change.
How I could achieve that?
Hi,
It is the exact same implementation on both this page: https://www.virtualmagie.com/categorie-produit/tours/ and this one: https://www.virtualmagie.com/contact/
Both have a black color and the hover colors are grey.
If you want these 2 inverted, you can do it from the code I provided by switching the colors.
If you cannot do it yourself, please hire a freelancer to help with these modifications as we do this beyond the call of duty. Usually custom work such as this is not covered by the theme support as stated in the support policy.
Thank you!
