WordPress.org

Ready to get started?Download WordPress

Forums

Optin Forms
[resolved] Change text color of label 'Enter your email here' (19 posts)

  1. myideasagain
    Member
    Posted 8 months ago #

    Thank you for developing a terrific plugin. I am able to customize the CSS, but do not see how to change the text color of the label 'Enter your email here' from grey to something else, such as white. Please assist.

    https://wordpress.org/plugins/optin-forms/

  2. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    Hi myideasagain,

    you can do so by picking a color. Look for "Input fields color" under the "Style your form" section.

    Let me know if you're able to get it working.

  3. myideasagain
    Member
    Posted 8 months ago #

    Thank you. I tried that, and it indeed effects the color of the text that appears once the user starts typing within the field.

    However, it does not seem to change the color of the label text itself, before the user starts typing.

  4. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    What browser are you using, so I can check?

  5. myideasagain
    Member
    Posted 8 months ago #

    Google Chrome Version 35.0.1916.153 m

  6. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    I see what you mean. The color is visible only once a visitor types something into the input field.

    Unfortunately, the JavaScript used for the labels is acting this way in Chrome (ignoring the CSS value).

    The only way to change that, is to edit the .js file itself.

    The file is /wp-content/plugins/optin-forms/includes/placeholder.js

    Find this line of code:
    placeholderColor: '#000',

    Change the HEX value to whatever you like.

    Save file and upload.

    The problem is that you will need to repeat this step each and every time you update the plugin.

  7. myideasagain
    Member
    Posted 8 months ago #

    Thank you, I do not see the file 'placeholder.js' listed there.

  8. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    My bad, the correct directory is
    /wp-content/plugins/optin-forms/js/placeholder.js ;)

  9. myideasagain
    Member
    Posted 8 months ago #

    I made the change but see no effect on the issue.

  10. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    Did you empty your browser cache?

  11. myideasagain
    Member
    Posted 8 months ago #

    Yes. The problem persists.

  12. myideasagain
    Member
    Posted 8 months ago #

    Please assist, Boris. The problem occurs on Firefox too.

  13. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    Hi myideasagain,

    it sounds like your theme's CSS is overriding the values set it in plugin's CSS and JS file. Can you share the URL where your form is included so I can take a look?

  14. myideasagain
    Member
    Posted 8 months ago #

    It's a PW-protected Dev site. How can I PM you access credentials?

  15. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    Send me an email through this link: http://www.codeleon.com/contact/

  16. myideasagain
    Member
    Posted 8 months ago #

    Sent. Any assistance, Boris?

  17. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    You can add the following code to your Custom CSS field, under Form Options in Optin Forms:

    ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #dd3333;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #dd3333;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    #dd3333;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    #dd3333;
    }

    Make sure you change the HEX values.

    I've tested it and it works ;)

  18. myideasagain
    Member
    Posted 8 months ago #

    Terrific! Works. Thank you, Boris!

  19. Boris Beo
    Member
    Plugin Author

    Posted 8 months ago #

    You're welcome ;)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.