Home › Forums › Pro Themes › Kids Education Pro › change contact form font colour

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 21, 2020 at 7:19 pm #131974
    messmeriza
    Participant

    Hi! I’m using the Kids Education Pro theme.
    I have installed the Contact Form 7 plugin and have a contact form on this staging page:
    http://fuelcatering.ca/newsite/?page_id=943

    I need help changing the text colour from white to #7a7979 and the Submit button should look like the Submit button in the newsletter sign up form below.

    Could you please provide me with some code? I assume this can be done via CSS, but I’m unsure where the code would have to be inserted.

    Thank you!

    August 24, 2020 at 1:06 am #132085
    wensolutions
    Keymaster

    Hello,

    Regarding your query, you can change the color of the text by adding the CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    article .entry-content {
    color: #7a7979;
}

    Further, you can add below CSS to show the background color of the button.

    input.wpcf7-form-control.wpcf7-submit {
    background-color: #639bad;
}

    You can manage the color code as per your requirement.

    Hope this helps.

    If you have further queries, let us know.

    Regards.

    August 28, 2020 at 2:50 pm #132591
    messmeriza
    Participant

    That worked, thank you!
    Could you also tell me how to change the font of the form and the font of the button?

    August 31, 2020 at 2:24 am #132738
    wensolutions
    Keymaster

    Hello,

    Please add below CSS following the path Admin Panel > Appearance > Customize > Additional CSS to change the font family.

    form label {
    font-family: "Ovo", sans-serif;
}

    Please add below CSS following the path Admin Panel > Appearance > Customize > Additional CSS to change the font family of button.

    input[type="submit"] {
    font-family: "Ovo", sans-serif !important;
}

    You can change the font family as per your requirement.

    Hope this helps.

    If you have further queries, lets us know.

    Regards.

    August 31, 2020 at 4:45 pm #132801
    messmeriza
    Participant

    Thanks. I still need help with the button please. I need it to have the same thin outline and box shadow as the SUBSCRIBE button further down on the same page. And does it currently have the same corner radius? It’s hard to see…

    September 1, 2020 at 1:26 am #132826
    wensolutions
    Keymaster

    Hello,

    Above CSS helps you change the font size of the ‘Subscribe’ button too.

    Please add below CSS following the path Admin Panel > Appearance > Customize > Additional CSS to change the font family of a button.

input[type="submit"] {
    font-family: "Ovo", sans-serif !important;
}
You can change the font family as per your requirement.

    Further, we haven’t changed the radius or anything from the theme.

    Hope this helps.

    If you have further queries, lets us know.

    Regards.

    September 1, 2020 at 2:12 am #132829
    messmeriza
    Participant

    I had already added that CSS code. I need code to show the same thin outline and box shadow as the SUBSCRIBE button further down on the same page.
    https://www.dropbox.com/s/5mne6i5raoxkv5a/Screen%20Shot%202020-08-31%20at%2011.12.10%20PM.png?dl=0

    September 1, 2020 at 6:38 am #132849
    wensolutions
    Keymaster

    Hello,

    Regarding your query, once please add below given CSS following the path Admin Panel > Appearance > Customize > Aditional CSS to make both the buttons as same.

    input[type="submit"], .wpcf7-form input[type="submit"] {
    background-color: #c9c9c9;
    border: 0;
    padding: 12px 30px;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover{
    color: #000 !important;
    background-color: #fff;
}

    Hope this helps.

    If you have any queries, let us know.

    Regards.

    September 1, 2020 at 1:28 pm #132882
    messmeriza
    Participant

    One more small change required. When you hover over the top Send button it goes white, but I want it to go green like the bottom Subscribe button (#E1EEBE)

    Thanks!!

    September 2, 2020 at 12:13 am #132918
    wensolutions
    Keymaster

    Hello,

    Regarding your query, once please add below given CSS following the path Admin Panel > Appearance > Customize > Aditional CSS to make the buttons hover color the same.

    input[type="submit"]:hover{background-color: #E1EEBE !important;}

    Hope this helps.

    Thank you.

    September 2, 2020 at 1:17 am #132923
    messmeriza
    Participant

    Thanks that worked!

    September 2, 2020 at 4:32 am #132937
    wensolutions
    Keymaster

    Hello,

    Glad we could help you.

    Thank you.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.