CSS Conflict

  • Resolved marissamayer

    (@marissamayerwadacom)


    3 years, 5 months ago

    Hi there,

    We have prepared two forms that we will actively use. We’ll be adding a few more forms with different content soon.

    You can find the links to the published forms below:
    A–https://mediagroupinternational.com/company/notices/contact
    B–https://mediagroupinternational.com/send-a-confidential-news-tip

    But we’re having some simple visual issues and we couldn’t fix them.

    The “Send Anonymous” button in B must have the same visual property as the “Send Message” button in A.

    Memo:
    Added some CSS code to the Appearance>Customise>Additional CSS section to edit the visual properties of the “Send “Message” button in A. This button has the same properties as the buttons we use throughout the site and works great.

    In the same area, we added some CSS code to edit the “Send Anonymous” button. However, it didn’t work. I guess there was some conflict with the existing code.

    On the other hand; Is it better to add the CSS codes to the Edit with Elementor>Advanced>Custom CSS section of the page where each form is published, rather than to the Appearance>Customise>Additional CSS section?
    (I’ve added 3 screenshots at the bottom.)

    What should we do, can you help?

    If you need FTP and/or admin credentials please let me know and I’ll be happy to share.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Nebu John – WPMU DEV Support

    (@wpmudevsupport14)

    Hi @marissamayerwadacom,

    Thank you for reaching out to us.

    I checked both the forms and was able to notice the text of the button on form A is placed inside a <span> whereas form B doesn’t have that. Since we do not have access to the dashboard, I am not exactly sure how that happened.

    However, the following CSS should help with making the button on form B look like the other button on the website. You can add the same at Appearance>Customise>Additional CSS.

    .forminator-ui#forminator-module-4147.forminator-design--default .forminator-button-submit {
    font-weight: unset;
    line-height: 1;
}

    I hope that helps.

    Best Regards,
    Nebu John

    Thread Starter marissamayer

    (@marissamayerwadacom)

    Hi Nebu,

Thank you for your response.

We have added the CSS code you suggested. But unfortunately, anything is not changed.
    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    Hello @marissamayerwadacom !

    I trust you’re doing well today!

    I’ve just checked both of the pages and the buttons look the same for me now. Maybe it’s because of some caching or browser cache? Please check in incognito mode and if they look correctly there, clearing browser cache and caches in all caching plugins should do the trick.

    Kind regards,
    Pawel

    Thread Starter marissamayer

    (@marissamayerwadacom)

    Hi Powel,

    I’m afraid there is no cache. Also “Send Anonymous” button has different look than other buttons on the same pages.

    Please see the screenshot in the link.

    https://mediagroupinternational.com/wp-content/uploads/2021/10/2021-10-12_22h29_01.png

    Best,
    Marisa

    Plugin Support Dmytro – WPMU DEV Support

    (@wpmudevsupport16)

    Hi there @marissamayerwadacom

    I checked both links you included in your initial post above, and the only difference I see in the Forminator buttons is a light text-shadow that is being inherited from this on-page CSS on both pages:

    .elementor-kit-16 button, .elementor-kit-16 input[type="button"], .elementor-kit-16 input[type="submit"], .elementor-kit-16 .elementor-button {
    text-decoration: none;
    text-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}

    The culprit is that .elementor-kit-16 button selector which is very general so it also matches the Forminator button.

    To fix that, you could change the above CSS on both pages to this instead to exclude the .forminator-button class:

    .elementor-kit-16 button:not(.forminator-button), .elementor-kit-16 input[type="button"], .elementor-kit-16 input[type="submit"], .elementor-kit-16 .elementor-button {
    text-decoration: none;
    text-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}

    As for your question about where best to add CSS, that really depends on why you’re adding CSS. ??

    If you want your CSS to apply only to a specific element on a page, then it’s likely easier to add it directly in the element’s Advanced > CSS area. That way, you don’t have to worry about CSS specificity as that’s handled internally by Elementor to ensure the CSS applies to that element only.

    However, if you want your CSS to apply globally throughout the site, then it’s preferable to add to add it under Additional CSS in the Customizer, so you don’t have to add the same thing over & over to multiple pages.

    Cheers!
    Patrick

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @marissamayerwadacom ,

    We haven’t heard from you for a while now, so it looks like you don’t need our assistance anymore.

    Feel free to re-open this ticket if needed.

    Kind regards
    Kasia

    Thread Starter marissamayer

    (@marissamayerwadacom)

    `Hello Kasia,

    Thank you for your kind email.

    None of your answers worked for a simple problem. I can see now that we are trying in vain. Using another company’s forms can be wise and time-saving for us.

    Cheers,
    Marissa

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS Conflict’ is closed to new replies.