Support » Plugin: Optin Forms » Change email field opacity (transparency)

  • Resolved Guido

    (@guidobr)


    Buddy, first of all congrats for the awesome plugin, really useful.
    I placed an image background as stated here, nice results!

    For ending in great style, I want to:
    1) change email box opacity, like 50%
    2) BOLD fonts
    3) narrower “sign up” button

    I think CSS can help, but I have no idea how.
    Please, help me!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Just one more, very important:
    4) Fix a minimum box height

    Plugin Author Boris Beo

    (@brs)

    Hi Guido,

    it can be done with custom CSS, but I would need to see the form in order to tell you the exact CSS. Could you share the page URL where you have the opt-in form included?

    Let me know!

    Hi Boris,

    Some questions I solved after research, as follows:

    1) change email box opacity, like 50%
    #optinforms-form1-email-field {opacity: 0.5;}

    2) BOLD fonts
    #optinforms-form1-disclaimer{font-weight: bold;}

    3) narrower “sign up” button
    Still unsolved (help!!)

    4) Fix a minimum box height
    Using CSS ‘min-height’ I couldn’t vertically center texts and boxes, so I solved it raising padding from 15px to 35px instead of using ‘min-height’: #optinforms-form1 {padding: 35px 3%;}

    5 [new]) I see a formatting problem in mobile devices, as you can see in these Image 1 and Image 2.
    Any idea how to fix it?

    Here is the link to one page with optin-form (embedded) in the end of the page.
    Thank in advance!

    Plugin Author Boris Beo

    (@brs)

    Hi Guido,

    You can have a narrower sign-up button by adding custom CSS (see line #1 in the code below). Change the 80% value to anything you’d like.

    However, keep in mind that if you change it’s width to anything narrower than 100%, it will affect the mobile view, so you would have to declare some more custom CSS to make it work on mobile.

    Simply add the following code to the Custom CSS field, under Form Options in Optin Forms, and hit Save Changes:

    #optinforms-form1-button{width:80%!important;}
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    #optinforms-form1-button{width:100%!important;}
    #optinforms-form1-email-field-container{width:100%!important;}
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    #optinforms-form1-button{width:100%!important;}
    #optinforms-form1-email-field-container{width:100%!important;}
    }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
    #optinforms-form1-button{width:100%!important;}
    #optinforms-form1-email-field-container{width:100%!important;}
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change email field opacity (transparency)’ is closed to new replies.