Viewing 30 posts - 1 through 30 (of 31 total)
1 2
  • Author
    Posts
  • October 26, 2017 at 5:41 pm #869266
    morilumi

    How do I change the button and font color of “submit” button in contact form?

    In a previous post I readed this answer:

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .main_color input[type=’submit’] {
    background-color: orange;
    color: black;
    border-color: orange;
    }
    .main_color input[type=’submit’]:hover {
    background-color: red;
    color: white;
    border-color: red;
    }

    I done it but the button is changed in all the website. I need to change the colour just in a page.

    Can you help me?

    • This topic was modified 7 years ago by morilumi.
    October 26, 2017 at 6:02 pm #869273
    Guenni007

    open your page on which you like to change it – goto your browser menu and look to the source code.
    The body has the page id (looks this way page-id-2604) and is a class . Because body is a parent of main_color class

    than try (in my example)

    .page-id-2604  input[type='submit'] {
background-color: orange ;
color: black;
border-color: orange;
}
.page-id-2604  input[type='submit']:hover {
background-color: red;
color: white;
border-color: red;
}
    October 26, 2017 at 6:58 pm #869290
    morilumi

    thanks

    October 27, 2017 at 2:07 pm #869558
    Victoria

    Hi morilumi,

    Glad Guenni007 could help you :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    May 15, 2018 at 11:53 am #956913
    enoteware

    Hello – How can I define a custom font for the submit button? It seems to want to default to ARIAL?

    Thanks!

    May 16, 2018 at 6:56 am #957329
    Rikard

    Hi enoteware,

    Please try this in Quick CSS to see if you have any luck with it:

    input[type='submit'] {
  font-family: Verdana !important;
}

    Best regards,
    Rikard

    March 19, 2019 at 12:49 pm #1080326
    Marco

    Hi everyone”
    How can you change the color of the button? Post comment comment area?

    March 20, 2019 at 7:22 am #1080693
    Jordan Shannon

    Hey sacha,

    Please provide a URL to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    March 20, 2019 at 11:26 am #1080769
    Marco

    yes, sure, I put the linkin private,
    Thanks!
    Sincerly:
    Sacha

    March 20, 2019 at 8:12 pm #1081007
    Jordan Shannon

    Hi,

    Add this to quick css:

    .main_color #submit, .main_color input[type=submit]{
    background-color: red!important;
    color: #fff!important;
    border-color: red!important;
}

    Adjust the color to what you need.

    Best regards,
    Jordan Shannon

    March 22, 2019 at 12:08 am #1081612
    Marco

    Thank you ! Perfect it worked!
    Now, however, I would like to improve the whole comment area; how can I insert associated labels?

    -I would also like to invert the positions and put the text field first, after the “name” field and delete the “website” field

    -and in the end I’d like every nickname that made a comment to have a link to a page where you can show all its comments … is this possible?

    Best regards
    Sacha

    March 22, 2019 at 12:48 am #1081622
    Jordan Shannon

    Hi,

    The above would require a more advanced contact form. You would need to look into Contact Form 7 or Gravity Forms.

    Best regards,
    Jordan Shannon

    March 22, 2019 at 3:34 am #1081699
    Marco

    ok, Thanks,
    I do not know Gravity Forms , and Contact Form 7 too..
    What abaut it?
    Thanks
    Best regards,
    Sacha

    March 22, 2019 at 4:09 am #1081714
    Jordan Shannon

    Hi,

    These are plugins that have more features than the default contact form built into the theme.They suit better to what you are looking to accomplish:

    Home

    Contact Form 7

    Best regards,
    Jordan Shannon

    March 22, 2019 at 4:49 am #1081718
    Marco

    I don’t think it’s what I am looking for, contact form, if I understand correctly, it manages the contact forms, I don’t think it has functions that concern the comments area …

    March 27, 2019 at 2:54 am #1083348
    Ismael

    Hi,

    Sorry for the confusion. This plugin should help you customize the comment form.

    // https://wordpress.org/plugins/comment-form/

    Best regards,
    Ismael

    April 13, 2022 at 4:56 pm #1348268
    Intell

    I’ve been all through the forum and no matter what I try, I cannot get the text field background color to change AND
    Get the submit text color to change
    AND
    The submit button border.

    I’ve tried absolutely everything!

    I can get the button background to change – but nothing else

    I can get the text field background and the submit button text to change – but then the button border just disappears!

    I’m sunk!

    April 13, 2022 at 6:16 pm #1348286
    Intell

    I have a few pages that need a different color text field background to the contact form. (still need submit button help – that’s the same across all pages) BUT this code worked on 1 page and that’s it – no other page or posts.

    AND I have one page and 2 more posts I need this to work on – but I substitute the page or post id and nothing happens!! It only works on page id 1202! (the contact page)

    #top .header_color input[type='text'], #top .main_color select, #top .main_color textarea .page-id-1202{
    background-color: #f8f8f8;
    color: #3c5c85;
}

    This is an urgent situation. Thanks

    April 13, 2022 at 7:45 pm #1348310
    Intell

    Actually if I could just get the code to make the submit button on the contact form clear – transparent – then that solves that issue, then just need the color of the text in the button to be #3C5C85

    April 14, 2022 at 12:08 am #1348325
    Mike

    Hi,
    Please try this css:

    #top #main input[type='submit'].button {
    background-color: transparent;
    color: #3c5c85;
    border: 1px solid #ae883d;
}

    homepage results:
    2022-04-13_001.jpg
    contact page results:
    2022-04-13_002.jpg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 14, 2022 at 1:00 am #1348332
    Intell

    Thank you Mike!! That is the most beautiful thing I have ever seen!! (at least in a while – lol)!!

    Now how do I get the form’s input fields background to be transparent also?

    April 14, 2022 at 12:14 pm #1348357
    Mike

    Hi,
    Glad this helps, to include the text fields try updating to this css:

    #top #main input[type='submit'].button,
#top #main input[type='text'] {
    background-color: transparent;
    color: #3c5c85;
    border: 1px solid #ae883d;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 15, 2022 at 1:52 pm #1348508
    Intell

    You are beautiful Mike! Thank you so much. I appreciate you and the entire Kriesi team SO MUCH!!

    April 16, 2022 at 12:20 pm #1348541
    Rikard

    Hi Intell,

    Great, I’m glad that Mike could help you out :-)

    Best regards,
    Rikard

    April 22, 2022 at 5:26 am #1349093
    Intell

    Okay crew!! Use awesome guys at Kriesi! New issue.

    So now we’re using MailChimp. You geniuses have made my life easy with the changes you helped me with before translate right into that dang ‘ol MailChimp.

    One area your fix doesn’t cover in MailChimp is the text field labels are not centered like the Enfold theme.

    See what I’m talking about on the page in the private section. On the right hand side of the page, the Mailchimp form is first and below is the enfold theme form.

    So could you help me center the text field labels just like you did before with the Enfold contact form?

    Thank you so much!!

    April 22, 2022 at 6:01 am #1349101
    Intell

    And how do I change the font to match the rest of the site – Josefin Sans?

    And why is the “discover more” so different looking than the other field label font’s? Like different size and font weight.

    And can I make the MailChimp submit button not as wide? So it looks like the Enfold form submit button? Just curious. If it were possible.

    • This reply was modified 2 years, 7 months ago by Intell.
    April 22, 2022 at 9:19 am #1349114
    Rikard

    Hi Intell,

    Please try the following in Quick CSS under Enfold->General Styling:

    .avia-mailchimp-form input {
    text-align: center;
    font-family: 'Josefin Sans';
}

    Do you want the first Discover more button to look like the second one?

    Best regards,
    Rikard

    April 22, 2022 at 11:18 am #1349130
    Intell

    Yes please!! I need the Mailchimp “submit” (Discover More) button to look like the Enfolds, which yes, the 2nd one.

    Do you want the first Discover more button to look like the second one?

    Thank you sooooo much!! Really appreciate it!

    April 22, 2022 at 6:04 pm #1349175
    Rikard

    Hi,

    Please try this CSS as well:

    .avia-mailchimp-form input.button {
    width: auto;
    min-width: 142px;
    display: table;
    margin: 0 auto;
    padding: 20px 25px;
}

    Best regards,
    Rikard

    April 24, 2022 at 1:39 pm #1349277
    Intell

    Thank you Rikard! This is going great! Need the following:

    Now I need to figure out how to get the “message” text area of my form to show up in my website.
    And the message text area to be transparent background.
    And submit button to be #A78F4F on hover for sign up and contact forms.

    Thank you SO MUCH!!

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