New Landing › How can we help? › Atelier › Change Light/Dark Styling for a Specific Contact Form

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Atelier
  • December 1, 2015 at 6:39 am #232313
    ninesolutions
    Member
    Post count: 192

    Dear Swift Ideas,

    Is there anyway which i can change the light/dark styling of a specific contact form?

    In my main page i would like to specifically change the contact form in the footer to dark. “the email” text is currently white, and i would like a darker color to be more visible. (shown here http://i.imgur.com/f46aE6Q.png)

    Thanks!

    jas

    December 1, 2015 at 1:38 pm #232414
    ninesolutions
    Member
    Post count: 192

    Dear swiftideas,

    The product variable drop down is also white in text now too (http://i.imgur.com/kwxnWxs.png)

    Please help me with it.

    Appreciate it greatly!

    Thanks!

    Jas

    December 1, 2015 at 1:47 pm #232421
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Go to the Color Customiser > UI Elements: http://d.pr/i/1097Y/1cb2YSlO

    – Kyle

    December 1, 2015 at 2:32 pm #232442
    ninesolutions
    Member
    Post count: 192
    This reply has been marked as private.
    December 2, 2015 at 9:30 am #232610
    ninesolutions
    Member
    Post count: 192

    Hello Swiftideas,

    I have solved the color in the woocommerce product dropdown.

    Can you help me with the email place holder text in the contact form at the footer please? (shown here http://i.imgur.com/f46aE6Q.png)

    Thanks!

    December 2, 2015 at 5:43 pm #232807
    ninesolutions
    Member
    Post count: 192

    Hello!

    I did some research and found that i can change the placeholder text color with this CSS. Tested and it works, but it changes all contact form. I only need it to change a specific contact form.

    How can i modify it for a specific contact form?

    ::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}

    My contact form id is the follow: wpcf7-f656-p259-o2

    Thanks and appreciate it a lot!

    December 2, 2015 at 5:46 pm #232809
    David Martin – Support
    Moderator
    Post count: 20834

    Each form has a unique ID that you can use, ex: wpcf7-f656-p202-o1.

    Knowing this you can use that to prefix each of your CSS selectors, ex:

    #wpcf7-f656-p202-o1 ::-webkit-input-placeholder { 
/* WebKit browsers */
color: #000 !important;
opacity: 1;
}

    Thanks.

    December 2, 2015 at 5:55 pm #232814
    ninesolutions
    Member
    Post count: 192

    Thanks so much Mr David Martin!

    you are a live safer!

    It is all good now!

    Appreciate your reply and help with many thanks!

    Jas

    December 2, 2015 at 5:59 pm #232817
    David Martin – Support
    Moderator
    Post count: 20834

    Happy to help you!

    December 2, 2015 at 6:21 pm #232830
    ninesolutions
    Member
    Post count: 192

    Hi David,

    The CSS appears to works at first, but after refresh of pages the id e.g. (wpcf7-f656-p641-o1) is consistently changing to another new number, which hence null the effect of the previous CSS.

    Any idea why is this so?

    December 3, 2015 at 3:06 pm #233087
    David Martin – Support
    Moderator
    Post count: 20834

    You can always make it specific to just a single page, each page in WP has a unique body classes added.

    Ex: page-id-259 So you can prefix the CSS using that ex:

    .page-id-259 ::-webkit-input-placeholder {}

    Thanks.

    December 4, 2015 at 6:28 am #233239
    ninesolutions
    Member
    Post count: 192

    Thanks David, appreciate the headsup!

    Made #footer and it works perfect now!

    Thank you again!

    December 4, 2015 at 8:03 am #233258
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Great thanks to David.
    Thanks
    Mohammad

  • Back to forum
    Posted in: Atelier
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register