Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 26, 2015 at 1:03 pm #402622
    cberentz

    Hello again,

    I added some lines of quick css to change the optics of my contact form on my .home page. Problem is that these settings apply on every page now.

    I use the following quick css:
    #top div .av-dark-form .input-text, #top div .av-dark-form input[type=”text”], #top div .av-dark-form input[type=”input”], #top div .av-dark-form input[type=”password”], #top div .av-dark-form input[type=”email”], #top div .av-dark-form input[type=”number”], #top div .av-dark-form input[type=”url”], #top div .av-dark-form input[type=”tel”], #top div .av-dark-form input[type=”search”], #top div .av-dark-form textarea, #top div .av-dark-form select, div div .av-dark-form .button {
    border-width: 1px !important;
    }

    #top .main_color .input-text, #top .main_color input[type=’text’], #top .main_color input[type=’input’], #top .main_color input[type=’password’], #top .main_color input[type=’email’], #top .main_color input[type=’number’], #top .main_color input[type=’url’], #top .main_color input[type=’tel’], #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select { border-color: #ffffff !important; }

    label .required { color: #ffffff !important; }
    .avia_ajax_form input, .avia_ajax_form textarea { color: #ffffff !important; }

    #top label {
    font-size: 20px !important;
    color: #ffffff !important;
    }

    .avia_ajax_form .button {
    font-size: 20px !important;
    color: #ffffff !important;
    }

    The contact form on the other page lies upon a white background and these settings cause it to be invisible, so I just need to change the color.

    Is there any way to make these settings “home-only”? Or apply them to just a certain form?

    Thanks guys.

    • This topic was modified 9 years, 9 months ago by cberentz.
    February 26, 2015 at 9:56 pm #403014
    Elliott

    Hey cberentz!

    You can add a .home in front of each CSS rule to target only the homepage like so.

    .home a { color: red; }

    You could also drag a codeblock element to your homepage content and add this inside.

    <style type = "text/css">
your code goes here
</style>

    To apply it only on the homepage.

    Regards,
    Elliott

    February 27, 2015 at 5:38 am #403164
    kellymarie2001

    Hey guys! This is right up my alley – I’m trying to add a background to a Contact Form on my home page banner. I’ve got a 2/3 and a 1/3 element inside a Color Section with a large background image (like on the Enfold theme demos) and have place a Form in the 1/3 element. I want that form to have a white but slightly transparent background. I’m not a savvy coder but I’ve gotten as far as dragging the code blog to the same 1/3 element as the contact form, and I’m hoping you can help me put together the basic code snippet to add that transparent box behind the form.

    Thank you in advance!

    February 27, 2015 at 5:58 am #403174
    Josue

    Hi @kellymarie2001,

    Can you post the link to that page please? also a screenshot/mockup of what would you want to achieve.

    Regards,
    Josue

    February 27, 2015 at 7:32 am #403219
    kellymarie2001

    I’m in dev mode right now but I’m trying to make it look like this: http://demo.whoathemes.com/crossway/v6/

    Here’s a screnshot of how I’ve got the page set up: https://www.dropbox.com/s/26qh09uq019iry1/screenshot.jpg?dl=0

    Thanks!

    February 27, 2015 at 11:15 am #403306
    cberentz

    I allready tryed adding .home to the commands, but it did not do the trick. I changed this command e.g.:

    #top label {
    font-size: 20px !important;
    color: #ffffff !important;
    }

    to:

    .home #top label {
    font-size: 20px !important;
    color: #ffffff !important;
    }

    and:

    #top .home label {
    font-size: 20px !important;
    color: #ffffff !important;
    }

    But this resultet in the command not working at all :/
    Im gonna try the “codeblock”-thing though, maybe thats the way to do it.

    February 27, 2015 at 11:29 am #403312
    cberentz

    Allright the code block did the trick. Thanks guys!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change contact form settings individually on different pages’ is closed to new replies.