Help with buttons and text display

Hello Aizaz,

Could you please help me with the following customizations please?
I think it is some styling that is not solvable by advanced typography and would require custom css.
I added screenshots below.

1/ On my contact page, I would like to change the hover colors of the button that opens a form from Contact Form 7. This button is supposed to have the same settings that the ones defined in Theme settings, however the hovered colors are not right (black text instead of white, darker yellow than the default one #E9C346). Here is the page with the button: https://jubilefrance.com/contactez-nous/

2/ All the Mailchimp opt-in buttons have the same issue: there is a line break between the button and text instead of being on the same line like in the settings. Is it possible to put them on one line?

3/ On the cart page, I would like to change both normal and hover colors of the button called “Ajouter une pochette cadeau” (text and background), at the bottom of the page. This button is not following the colors set in the theme.

4/ On my account page, I would like to center account tabs titles, for mobile only.

5/ On the popup login/registration sidebar, I would like to remove the picture of the registration section.

Thank you very much for the help you’ll be able to provide.
You’ll find admin access below if needed as well as screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

1. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

a.btn.btn-style-default:hover {
    background: #E9C346;
    color: white;
}

2. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

p.form-row.form-row-wide.mailchimp-newsletter {
    display: inline-flex;
}

3.Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

button.wcgwp-modal-toggle.wcgwp-modal-toggle_after_cart.button.btn.fusion-button.fusion-button-default.edgtf-btn {
    background: #E9C346;
    color: white;
}

button.wcgwp-modal-toggle.wcgwp-modal-toggle_after_cart.button.btn.fusion-button.fusion-button-default.edgtf-btn:hover {
    background: #E9C346;
    color: white;
}

4. The tabs are already centered. Please clear cache and check back.

5. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.create-account-question:before {
    content: none;
}

Best Regard

Hello Aizaz,

Thank you very much for your reply.

1/ It works well. However there is like a dark layer when the buttons is hovered that darkens the background color. Is it possible to take it out?
I would also like to change the hover colors of the button to submit the form. Could you please help me find the right custom selector? I wasn’t able to find it, sorry…

2/ Thanks! Now it is on one line. The button and text are not exactly aligned (see screenshot) but if there is not an easy fix it’s okay.

3/ Thank you, works perfectly!

4/ I cleared caches and looked again but the tab titles are not centered on mobile (see screenshot). Is there something we can do to center them please ?

5/ Works great, thank you.

Attachments:

You must be logged in to view attached files.

[Aizaz Imtiaz Awan]

Hello,

You are Most Welcome.

1) Please replace the previous Custom CSS with the following then check back.

a.btn.btn-style-default:hover {
    background: #E9C346 !important;
    color: white;
}

a) Please try adding the following Custom CSS for that.

input.wpcf7-form-control.has-spinner.wpcf7-submit.btn-color-black:hover {
    background: #E9C346;
    color: white;
}

2) Please try adding the following Custom CSS for that.

p.form-row.form-row-wide.mailchimp-newsletter label {
    margin-top: 7px;
}

Best Regards

• This reply was modified 1 year, 9 months ago by Aizaz Imtiaz Awan.

Hello Aizaz,

1/ Unfortunately it didn’t work. I still have this darker color when I hover. I realize I also have a “transition” color of the button. You’ll find a video below to show you what I mean.

a) Works great, thanks!

2/ Works great as well.

4/ Sorry to come back to this one, but the tabs are not centered on mobile. I have cleared caches many times and looked from both a normal and an incognito window on my phone. You’ll see how it look in the screenshot below.

5/ I am coming back to this one… It was working well yesterday, but now the image appears again although I didn’t change the css… Should I edit the css?
You’ll find admin access in first post if you want to check something.

Thanks again

Attachments:

You must be logged in to view attached files.

Hello,

1. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

a.btn.btn-style-default {
    background: #E9C346 !important;
}

4. Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.woocommerce-MyAccount-navigation ul li a, .woocommerce-MyAccount-title {
    text-align: center;
}

5. Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.create-account-question:before {
    content: none !important;
}

Best Regards

Hello Aizaz,

4/ and 5/ work well, thank you.

Regarding 1/, the issue is for hover colors. I already have this line of code but it doesn’t change the darker color that appears :

a.btn.btn-style-default:hover {
    background: #E9C346 !important;
    color: white;
}

It happens here if you want to check the button: https://jubilefrance.com/contactez-nous/

Thank you

Aizaz,

Just in case it could help, I had a similar issue with my header icons that had a similar “transition” color. Here is how it was solved:

body .wd-tools-element {
	--wd-header-el-color-hover: #E9C346;
}

Maybe this could help with the transition color, although it might not solve the darker hover color.

Hello,

Your issue has been Resolved. Please clear cache and check back.

Best Regards

Hello Aizaz,

Yes it works great!
I see that you have added box-shadow: none !important; to the code. Have you done other changes?
I have the same issue with other buttons. I’ll apply your changes to them as well.

Otherwise everything works great, you can close this topic.
Thank you so much for your help!

Hello,

You are Most Welcome.

The issue was caused by the box shadow. I have removed it and the issue was fixed.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts