Subscribe by Email - more styling

I'm trying to style the message returned once someone enters their email address. I tried 'subscribe-by-email-msg' but that didn't seem to have any effect. Thanks!

  • aecnu

    Greetings curiouslight,

    Thank you for bringing this item to our attention and perhaps the following coding will help you with styling and getting results you prefer.

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

    The plugin creates a form
    #subscribe-by-email-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 some 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;
    text-align:left;
    }
    /* the widget title */
    .subscribe-by-email .widget-title{
    color: #ffffff;
    }
    /* input text box - inline style of width needs important override */
    #subscription_email{
    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);
    filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    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%;
    }

    Please advise if this indeed does the job for us.

    Cheers, Joe

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.