Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 9, 2015 at 5:41 pm #471040
    coeval

    Hey guys,

    I’m working on my new wedding subdomain and therefor I would like to create a costumized contact form.
    I’ve seen that you added 3 options to change the colors (standard, light transparent & dark transparent).
    I like the look of the transparent forms, but the dark one is a little to dark for my design.
    May I change the color of “dark transparent” from black to #d8d8d8?

    My 2.issue: The outline of the “dark transparent” forms are (compared to the short Separators, which I used right above the form)
    a little to thick. Is there an option to make it look as thin as the small Separator lines?

    Thx a lot
    Danny

    July 9, 2015 at 11:18 pm #471190
    Dake

    Hi coeval!

    You can change the border, border color and background color of the dark transparent contact form with the below css:

    #top div .av-dark-form input[type='text'] {
   border-color: #222;
  border-width: 1px !important;
  background-color: #d8d8d8 !important;
}

    Cheers!
    Dake

    July 10, 2015 at 9:58 am #471358
    coeval

    Hey Dake,

    thx for your reply.
    I added the code to my Quick CSS, but the changes don’t apply.
    Do I have to add the code somewhere else?

    xoxo

    July 10, 2015 at 7:08 pm #471686
    Dake

    Hi coeval,

    If you inserted it into the custom css section in your theme options, then that is the correct location.

    If you did, may we have temporary access to your site so we can take a closer look?

    Cheers!
    Dake

    July 10, 2015 at 7:46 pm #471702
    coeval

    Hey Dake,

    yes, I think so. I went to Enfold Options > General Styling > Quick CSS
    I hope thats the right translation cause my WP is in german.
    But the Quick CSS is the area where I always insert new code, when I need to change something.
    Maybe there is some other code which is in conflict with the new one.
    I posted my access in the private content area.

    • This reply was modified 9 years, 4 months ago by coeval.
    July 10, 2015 at 9:09 pm #471721
    Dake

    Hey coeval!

    From what I can tell, once you added the css in your quick css for each sub domain, the apostrophes were changed to &#39

    Example:

    #top div .av-dark-form input[type='text'] {
  border-color: #f0f0f0;
 border-width: 1px !important;
 background-color: #f0f0f0 !important;
}

    Ensure that it looks exactly like the below before saving:

    #top div .av-dark-form input[type='text'] {
  border-color: #f0f0f0 !important;
  border-width: 1px !important;
  background-color: #f0f0f0 !important;
}

    In addition, the below css will style the message field:

    #top .avia_ajax_form .text_area {
  border-color: #f0f0f0 !important;
  border-width: 1px !important;
  background-color: #f0f0f0 !important;
}

    Finally the below css is for the submit button and it’s hover state:

    .av-custom-form-color .button:hover {
  border-color: #f0f0f0 !important;
  border-width: 1px !important;
  background-color: #d6443a !important;
}

.av-custom-form-color .button {
  border-color: #f0f0f0 !important;
  border-width: 1px !important;
  background-color: #f0f0f0 !important;
}

    You should now be able to style all of your forms across the board.

    Please
    Regards,
    Dake

    July 13, 2015 at 4:05 pm #472532
    coeval

    Hey Dake,

    I tried the new code you prepared for me. The one for the message field worked great.
    The one for the submit button worked nearly perfect, the new color changed, but the border is still a little too thick. And the other fields for “name”, “email”, … are still in black with a thick border.

    July 13, 2015 at 4:17 pm #472536
    Dake

    Hi coeval,

    I’m seeing that you got the submit button border reduced.

    As for the name, email etc fields the css in your custom css section is:

    #top div .av-dark-form input<strong>[type='text']</strong> {
 border-color: #f0f0f0;
border-width: 1px !important;
background-color: #ffffff !important;
}

    But

    it should be:

    #top div .av-dark-form input[type='text'] {
 border-color: #f0f0f0;
border-width: 1px !important;
background-color: #ffffff !important;
}

    I’m not sure why, but the form css you inserted previously changed the apostrophe’s surrounding “text” into “'”

    Your form should be displaying properly now on the coeval site now.

    Regards,
    Dake

    July 13, 2015 at 4:29 pm #472540
    coeval

    That is really very strange.
    But now it works fine.
    Thanks for your great help. <3

    July 13, 2015 at 4:59 pm #472559
    Dake

    Hey coeval,

    You’re welcome :)

    Please let us know if you need any more assistance.

    Regards,
    Dake

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘contact form (outlines & colors)’ is closed to new replies.