Subscribe by Email styling

I really wanted a short code so I could put the form anywhere, but when I found that was not available, I registered a new sidebar so I could use the widget. Now I am having issues styling it. Is there a styling post of tutorial somewhere for this plugin?

  • aecnu

    Greetings curiouslight,

    Thank you for the great question and there is no tutorial for doing this directly but the css can be adjusted that is in the \subscribe-by-email\css folder and a css tutorial is here.

    It may be possible to change the widget into a short code as you originally suggested using the Widget Shortcode plugin but it is a bit dated.

    Thank you for being a WPMU DEV Community Member!

    Cheers, Joe

  • Fullworks

    The styling can be done by putting some specific css in your themes style.css.

    The plugin creates a form

    and within that and input text field for the e-mail and an input button.

    So some css like this will do the trick.
    The widget. so some reason uses soem inline styles, so the important override is needed occasionally

    /* the overall widget */
    .subscribe-by-email {
    border-color: #038ac2;
    color: #ffffff;
    background-color: #0378a9;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px 15px;
    display: inline-block;
    /* the widget title */
    .subscribe-by-email .widget-title{
    color: #ffffff;
    /* input text box - inline style of width needs important override */
    width: 75%!important;
    font-size: 18px;
    /* button is in a center tag so that needs to be dealt with */
    #subscribe-by-email-form center {
    width: 75%;
    /* the submit button */
    #subscribe-by-email-form input[type="button"] {
    width: 100%!important;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 20px;
    background-color: #5bb75b;
    color: #ffffff;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -ms-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(top, #62c462, #51a351);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 9px 14px;
    font-size: 13px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    #subscribe-by-email-form input[type="button"]:hover {
    background: #51a351;
    /* opt out paragraph */
    .subscribe-by-email p {
    width: 80%;
  • aecnu

    Greetings curiouslight,

    We have not heard back from you as to the status of this issue.

    If you are still having an issue please let us know so that we may try to get you fixed up as soon as possible by choosing to check mark this ticket as unresolved below and posting any new errors or symptoms you are noticing.

    This action will also bring your ticket up front back in plain view again within the ticket system.

    Thank you for being a WPMU DEV Community Member!

    Cheers, Joe

  • pierce_plam

    Great styling. I had fun reverse-engineering it. I am trying to make the box a bit smaller. I see that it is making space for the secondary widget area (second text box). I tried this to remove it hoping that it would make it smaller (shorter in height). Didn't work.

    #secondary .widget-area { display: none; }

    Can someone help me with that? My goal is to make the background box shorter. I do not use the second text box.