Custom css

  • Resolved nandoanversa

    (@nandoanversa)


    4 years, 9 months ago

    Hi there,

    I looked everywhere but could not find a list of classes to aply css on the give form.

    Can you share that?

    I am actually trying to change all the input fields color and borders, but I cannot find the correct class or maybe I just don′t know how to style it at all. I found some individual IDs like #give-first #give-last #give-email, but not the class to change all fields at once.

    Thanks for your help

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Matt Cromwell

    (@webdevmattcrom)

    HI there,

    Each field can be a different type of input, so it’s not so straight-forward as to style all fields with one CSS rule. But, for example, .give-input styles a lot of the text inputs.

    We do have this tutorial that will help in terms of discovering the various class names. Many find it very useful and instructive.
    https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/

    Let us know how it goes or if you get stuck on anything in particular.

    Thanks!

    Thread Starter nandoanversa

    (@nandoanversa)

    Thanks for the quick reply.

    I tried .give-input but saw no results. Weird.

    As for the link, I didn’t find the classes. It just shows a video that shows a button class. I acesses Google dev tools but it’s confusing to understand all the info there. I tried copying and pasting a lot of classes but could not find the one responsible for the input fields. But as you said, there is not a general o e that will change all at once. Will keep tritongo to find the IDs…

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Keep in mind the other thing you’ll have to overcome is “specificity” essentially being more specific than our rules. So in the case of the .give-input you’ll need to use this:

    form.give-form .form-row input[type=text] {
   border-color: purple;
}

    The video tries to show that as well.

    Thread Starter nandoanversa

    (@nandoanversa)

    Hi Matt,

    I tried and put this code
    form.give-form .form-row input[type=email],
    form.give-form .form-row input[type=password],
    form.give-form .form-row input[type=tel],
    form.give-form .form-row input[type=text],
    form.give-form .form-row input[type=url],
    form.give-form .form-row select,
    form.give-form .form-row textarea, ] {
    border-color: purple;
    background-color: black
    }

    It did work in most of the fields. It was missing some fields for credit card info. (card number, cvc and MM/YY). I tried to find the input types on google deve tools but couldnt figure out. Could you please share that? thanks again

    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    Can you point me to a live URL of a form you’re trying to style? That would help me more specifically guide you.

    Thread Starter nandoanversa

    (@nandoanversa)

    i figured it out. thanks

    • This reply was modified 4 years, 9 months ago by nandoanversa.
    • This reply was modified 4 years, 9 months ago by nandoanversa.
    Thread Starter nandoanversa

    (@nandoanversa)

    i figured it out. thanks

    • This reply was modified 4 years, 9 months ago by nandoanversa.
    • This reply was modified 4 years, 9 months ago by nandoanversa.
    Plugin Author Matt Cromwell

    (@webdevmattcrom)

    OK, glad to hear it!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Custom css’ is closed to new replies.

Tags