Custom CSS Not working

  • Resolved pwirth158

    (@pwirth158)


    7 years, 2 months ago

    I’m trying to style the submit button with some CSS

    I’ve gotten the CSS to work on a fresh Codepen file, but when I try to add the custom CSS in wordpress it doesn’t work.

    Here’s a link to the Codepen:

    https://codepen.io/ironorrfitness/pen/bzBpLy

    Any help is appreciated, thank you!

    • This topic was modified 7 years, 2 months ago by pwirth158.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • willianxz

    (@willianxz)

    7 years, 2 months ago

    Hello my friend, usually in wordpress when we try to style something from a plugin, it probably already has a css by default, which is why we need to overwrite it.

    Try to use the attribute:
    !important
    Attached to your ex attributes:

    .classofmyplugin{
    color: red !important;
    //atributex: valuey !important;
    ……..
    ……..
    }

    Thread Starter pwirth158

    (@pwirth158)

    7 years, 2 months ago

    Hi @willianxz, unfortunately the !important attribute does not solve the problem.

    willianxz

    (@willianxz)

    7 years, 2 months ago

    Hello my friend this
    !important
    added to the element is so that the element is actually overwritten, but you have to hit the class or id on which it is found.

    Open the preview elements by pressing F12, click the arrow and go right to that button.

    Check what class it contains or id.

    If you want to do a test yet, add it right there by the style tab, placing the desirable attribute with
    !important
    to see if it works.

    Example:

    <button class = “w3plugin800”> alo </ button>

    put the css:

    /* Attention, do not forget the point! if it’s class*/
    .w3plugin800 {
    color: red! important;
    / * others elements with !important * /
    }

    With
    !important
    element styles are required to be overwritten, unless in element the attribute you want to change, already contains the
    !important

    That button element you want to change the style, it comes from some plugin?

    Try to do what I said, if you can not, press f12, go to that element and take a photo of that element, share with me.

    And if possible, take a picture of how you are doing too.

    Use the site below to share photos via link:
    https://pt.imgbb.com

    greetings from Brazil!

    • This reply was modified 7 years, 2 months ago by willianxz.
    • This reply was modified 7 years, 2 months ago by willianxz.
    • This reply was modified 7 years, 2 months ago by willianxz.
    Thread Starter pwirth158

    (@pwirth158)

    7 years, 2 months ago

    Hi @willianxz thank you for your reply!

    I think we are onto something, it appears that the problem is the button is placed through an <input> tag rather than a <div> tag.

    Using developer tools, if I change the <input> tag to a <div> tag, the css works as intended (though the button doesn’t submit).

    Images:

    The CSS works properly here – changed <input> to <div>
    https://ibb.co/FgcqKv9

    This is how the button is without manual edits:
    https://ibb.co/DGVMB3S

    Let me know if this is helpful to what you were thinking!

    Thread Starter pwirth158

    (@pwirth158)

    7 years, 2 months ago

    And actually, changing <input> to <button> both allows the css to work, as well as submits the form

    Thread Starter pwirth158

    (@pwirth158)

    7 years, 2 months ago

    Aha! by changing in the contact form markup from [submit] to

    <button type=”submit” value=”Send” class=”wpcf7-form-control wpcf7-submit”>SEND</button>

    it all appears to work properly. Let me know if anything looks amiss there, but otherwise thank you for pointing me in the right direction!

    • This reply was modified 7 years, 2 months ago by pwirth158.
    • This reply was modified 7 years, 2 months ago by pwirth158.
    willianxz

    (@willianxz)

    7 years, 2 months ago

    Hello my friend, I hope your problem has been solved.
    I’ve found these extra articles that can also help you:

    https://contactform7.com/styling-contact-form/

    https://contactform7.com/submit-button/

    Greetings from Brazil! 🙂
    Hugs!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom CSS Not working’ is closed to new replies.