Make a pretty sign up widget

My signup widget looks really sad... the sad looking thing can be seen in then next post. Any tips on how I can make it prettier? It's on the site http://www.magicdailydeal.com

  • aristath
    • Recruit

    Hello idomagic, how are you today?

    Since sad and pretty are very subjective, it would be nice to know what you actually want to achieve.
    Have you seen a sign up form that you like somewhere?
    That would help us get a sense of what you want to do... and in turn we'll be able to help some more. :slight_smile:

    It's a pretty site by the way...

    Cheers,
    Aristeides.

  • idomagic
    • The Incredible Code Injector

    I would love to have a box that looks like the one attached. Just something that is formatted nicely. This is probably too much to ask for free help but it never hurts to ask. I am just a CSS wimp, I am still quite the newb.

  • aristath
    • Recruit

    Hello idomagic,
    you can try adding the following to your stylesheets:

    #subscribes_form {
      text-align: center;
      background: #fff;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
    }
    
    #subscribes_form div {
      display: inline-block;
      margin-right: 10px;
    }
    
    #subscribes_form #e_newsletter_email,
    #subscribes_form e_newsletter_name,
    #subscribes_form #new_subscribe {
      border: 1px solid #ddd;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
    }
    
    #subscribes_form #new_subscribe {
      color: #fff;
      border: 1px solid #555;
      background: #333;
    }

    The only thing missing from the above code is the red/white/blue stripes that your image includes. I hope that helps. :wink:

    I'm marking this issue as resolved, feel free to re-open it if you need any further assistance!

    Cheers,
    Aristeides.

  • idomagic
    • The Incredible Code Injector

    Now I look like a begging man on the side of the road with a sign... what if I wanted the sing up to go to the WPMU "https://premium.wpmudev.org/project/subscribe-by-email/" What would I change and how many YOU-r-AWESOME points would it cost?

  • aristath
    • Recruit

    @idomagic thank you very much!
    I really appreciate this, but there's really no need to give points to me. I'm already a lifetime member and I'm also staff. :stuck_out_tongue:

    I have nothing to gain except the pleasure of helping you. :slight_smile:

    what if I wanted the sing up to go to the WPMU "https://premium.wpmudev.org/project/subscribe-by-email/"

    I'll need some more info on that... you want them to be redirected to that URL after signing up? Or did I misunderstand?

  • aristath
    • Recruit

    Try this:

    input#subscription_email {
      display: inline-block;
      width: 200px !important;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #dedede;
      padding: 4px 10px;
    }
    
    form#subscribe-by-email-form center {
      display: inline-block;
    }
    
    form#subscribe-by-email-form input.button {
      width: auto !important;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background: #00888cc;
      border: 1px solid #0088bb;
      color: #fff;
    }

    Cheers! :slight_smile:
    Aristeides.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.