Style template for the newsletter widget

Hi

If you see the attached screenshot, then you can see the style of the widget is very simple, don´t think it will attract any to subscribe. Are there styles/templates to choose from?

I really would like something that had a more visual punch to it.. Text, buttons, maybe image to insert...

  • Predrag Dubajic

    Hey Hamid,

    Hope you're doing well today :slight_smile:

    e-Newsletter widget has some basic styling and most of the things it gets from the theme you're using.
    There are no styling templates for it but below is some CSS I prepared for you which you can modify and adjust the look, it contains code for most of the elements and it's commented out which part affects what.

    /* Title */
    #sidebar .widget_e_newsletter_subscribe h2.widget-title {
        color: #010101;
        font-size: 15px;
        font-family: Arial;
    }
    
    /* Field labels */
    #sidebar .widget_e_newsletter_subscribe label {
        color: #010101;
        font-size: 15px;
        font-family: Arial;
    }
    
    /* Button */
    #sidebar .widget_e_newsletter_subscribe .enewletter_widget_submit {
        background: #efefef;
        border: 1px solid #151515;
        color: #000000;
    }
    
    /* Button hover */
    #sidebar .widget_e_newsletter_subscribe .enewletter_widget_submit:hover {
        background: #efefef;
        border: 1px solid #151515;
        color: #000000;
    }
    
    /* Widget Background */
    #sidebar .widget_e_newsletter_subscribe {
        background-image: url(IMAGE_URL);
        background-repeat: no-repeat;
        background-size: cover;
    }

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Hope this helps :slight_smile:

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Hamid!

    Try replacing this part of CSS provided by my colleague Predrag

    /* Widget Background */
    #sidebar .widget_e_newsletter_subscribe {
        background-image: url(IMAGE_URL);
        background-repeat: no-repeat;
        background-size: cover;
    }

    with this one

    /* Widget Background */
    #sidebar .widget_e_newsletter_subscribe {
        background-image: url(IMAGE_URL);
        background-repeat: no-repeat;
        background-size: cover;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

    You might want to replace 5px values with your own, they should be the same in both lines.

    Let me know if that helps, please.

    Best regards,
    Adam

  • Hamid

    Hi Adam..

    Please see attached. It did not do anything.

    I used this code where i added "background-color"

    /* Widget Background */
    #sidebar .widget_e_newsletter_subscribe {
        background-image: url(IMAGE_URL);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #75BB95;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    }

    One more thing Adam, as you will see on the screenshot, the actual widget is pretty big!!! Is there some CSS code for scaling the whole thing down.?, especially the height...

    Also the other screenshot shows what a logged in user sees, is it possible to not display the widget if a user has allready subscribed?

    Thanks

    Hamid

  • Predrag Dubajic

    Hi Hamid,

    WordPress has class in header specific to logged in users so we can use that to hide the widget when logged in, this CSS should do it:

    .logged-in #sidebar .widget_e_newsletter_subscribe {
        display: none;
    }

    As for the widget size, I'm assuming you want to reduce spacing between the elements in order to make it smaller, is that correct?

    Here's your old CSS with new attributes added to reduce spacings, you can see /*NEW*/ comments for those elements so you can adjust them further to your liking:

    /* Title */
    #sidebar .widget_e_newsletter_subscribe h2.widget-title {
        color: #010101;
        font-size: 15px;
        font-family: Arial;
        margin-bottom: 5px; /*NEW*/
    }
    
    /* Field labels */
    #sidebar .widget_e_newsletter_subscribe label {
        color: #010101;
        font-size: 15px;
        font-family: Arial;
        margin: 0; /*NEW*/
    }
    
    /* Button */
    #sidebar .widget_e_newsletter_subscribe .enewletter_widget_submit {
        background: #efefef;
        border: 1px solid #151515;
        color: #000000;
    }
    
    /* Button hover */
    #sidebar .widget_e_newsletter_subscribe .enewletter_widget_submit:hover {
        background: #efefef;
        border: 1px solid #151515;
        color: #000000;
    }
    
    /* Widget Background */
    #sidebar .widget_e_newsletter_subscribe {
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #75BB95;
        -webkit-border-radius: 13px 13px 13px 13px;
        border-radius: 13px 13px 13px 13px;
        padding: 10px 30px; /*NEW*/
    }
    
    /*NEW*/
    #sidebar .widget_e_newsletter_subscribe input {
        margin: 0;
    }

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Hamid!

    Thanks buddy. I only tested the part with logged in users and it indeed works... BUT the intention was so it was not visible if the user had already signed up. To avoid seeing the "unsubscribe field" Sorry it got more complicated.

    That would require some change in widget's code and it would be a bit outside of the scope of this forum. You might want to post a feature request on our "Features & Feedback" forum so if more members will vote for that idea, our developers will consider implementing it in future.

    If you need that feature urgently, please consider a question about custom development at our "Jobs & Pros" job board here (please note: no WPMU DEV staff involved!):

    https://premium.wpmudev.org/wordpress-development/

    I will try the css regarding box size tonight. That intention is to make the whole box/widget smaller, it's way to big..

    If you use Predrag's CSS (you might adjust values in it to make elements inside even smaller) that'll give you a bit more "space to shrink the widget". Then you can additionally use an additional CSS rule to make entire widget smaller like this:

    #e_newsletter_subscribe-2 {padding: 10px;max-width:250px;margin:10px 35px;display:block;}

    You'll want to adjust values to suit your needs but that should do the trick.

    Best regards,
    Adam

    • Dimitris

      Hey there Hamid,

      hope you're doing good and don't mind chiming in here! :slight_smile:

      You can create a little MU plugin file in your server, like /wp-content/mu-plugins/newsletter-placeholders-script.php (simply create the /mu-plugins/ folder if doesn't exist) and insert the exact snippet in there:

      <?php
      function newsletter_placeholders_script() {
        ?>
        <script>(function($) {
          $('#e_newsletter_email').attr('placeholder','Email address');
          $('#e_newsletter_name').attr('placeholder','Full Name');
        })( jQuery );</script>
        <?php
      }
      add_action( 'wp_footer' ,'newsletter_placeholders_script' );

      Obviously, you can replace placeholder strings in code with anything you'd like!

      Warm regards,
      Dimitris

  • Adam Czajczyk

    Hello Hamid!

    I understand that you are referring to the placeholder text color, is that right?

    You can change it with following CSS:

    /* email placeholder text color */
    #e_newsletter_email::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #AAAAAA;
    }
    #e_newsletter_email::-moz-placeholder { /* Firefox 19+ */
      color: #AAAAAA;
    }
    #e_newsletter_email:-ms-input-placeholder { /* IE 10+ */
      color: #AAAAAA;
    }
    #e_newsletter_email:-moz-placeholder { /* Firefox 18- */
      color: #AAAAAA;
    }
    
    /* name placeholder text color */
    #e_newsletter_name::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #AAAAAA;
    }
    #e_newsletter_name::-moz-placeholder { /* Firefox 19+ */
      color: #AAAAAA;
    }
    #e_newsletter_name:-ms-input-placeholder { /* IE 10+ */
      color: #AAAAAA;
    }
    #e_newsletter_name:-moz-placeholder { /* Firefox 18- */
      color: #AAAAAA;
    }

    I hope that helps!
    Best regards,
    Adam

  • Adam Czajczyk

    Hello Hamid!

    That worked when tested via browser but it's sometimes different when applied to the site. I see that there's no access to your site currently so would you mind enabling it for me so I could check the site? I believe we can make it work :slight_smile:

    Here's a guide on granting access:

    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-4

    Best regards,
    Adam

  • Dimitris

    Hello Hamid,

    hope you're doing good today! :slight_smile:

    I just went ahead and noticed that the color of these placeholders are indeed #AAA as the CSS rules in Appearance -> Custom CSS that my colleague Adam shared with you.

    As this may be a matter of caching, try to clear/purge all caches (from plugins, any server-side mechanisms like Varnish or any 3rd party services like Cloudflare) and also clear your browser's cache and give that another shot.

    Take care,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.