Subscribe by Email Widget in sidebar to look like so...

Hello!

I need a bit of help. I would like my subscription widget to look like the one attached but I am a dunce at CSS. And I would put my own icon in it, change the words etc.

Thank you in advance!!!
- Meredith

  • Vaughan
    • Support/SLS MockingJay

    Hi Meredith,

    Hope you're well?

    .subscribe-by-email h2.widget-title {
        background: green;
        text-align: center;
        padding: 30px 0px 45px;
        color: white;
        font-size: 20px;
    }
    form#sbe-widget-subscribe-form-2 {
        background: #cccccc;
        padding: 20px;
        margin-top: -30px;
    }
    p.sbe-widget-top-text {
        text-align: center;
        margin-top: 30px;
    }
    .sbe-widget-form-field-title {
        display: none;
    }
    .sbe-widget-subscribe-form .sbe-spinner {
        margin: 6px -10px 0 !important;
    }
    form#sbe-widget-subscribe-form-2::before {
        content: URL(http://domain.com/path/to/image/image.png);
        position: relative;
        top: -30px;
        left: 91px;
    }

    something like the above will get you close, replace the URL in the last rule for content: URL with the URL to your image file. Then you just need to adjust the colours and paddings etc to get it to look how you want etc.

    Hope this helps

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    It looks like you have the widget title & description disabled in the widget options.

    First, let's get the elements all setup with the correct title you want & description text + the button text (Which I see you've done) as in the screenshot.

    Then I can work on the correct CSS for you and have everything looking like the image :slight_smile:

    Thanks

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    Sorry for all the questions, do you want it looking exactly like the above image? or do you want the white background instead of the grey as in the image?

    Do you have the circular image you want in the form already uploaded to the media gallery? if so, could you go to the media library, select the image & then paste me the URL for the image file? it'll save me time adding it in afterwards.

    Thanks

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    Let's see how this goes;

    div#subscribe-by-email-6 {
        background: #efefeb;
        padding-bottom: 40px;
    }
    .subscribe-by-email h4.widget-title {
        background: #a3cf5e !important;
        text-align: center !important;
        padding: 21px 0px 80px !important;
        height: 50px;
        color: #ffffff !important;
        vertical-align: middle !important;
        font-size: 30px;
    }
    .subscribe-by-email h4.widget-title::after {
        content: URL(http://puregoldfish.com/wp-content/uploads/2015/10/Untitled-2.png);
        position: relative;
        top: 12px;
    }
    form#sbe-widget-subscribe-form-6 {
        margin-top: 50px;
        padding: 0px 20px;
    }
    input.sbe-widget-form-submit {
        background: #73c2e3 !important;
        border: 0 !important;
        color: #ffffff;
        padding: 10px !important;
        font-weight: bold !important;
        border-radius: 5px !important;
        -webkit-box-shadow: 0px 4px 0px 0px rgba(73,165,204,1);
        -moz-box-shadow: 0px 4px 0px 0px rgba(73,165,204,1);
        box-shadow: 0px 4px 0px 0px rgba(73,165,204,1);
    }

    Hope this helps

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    It should've centered, but let me look.

    .sbe-widget-form-field-title {
        display: none !important;
    }
    .sbe-widget-form-submit-container {
        text-align: center !important;
    }
    span.sbe-spinner {
        margin-left: -25px !important;
    }

    Hopefully that should sort the rest :slight_smile: and also remove the enter email text.

  • Meredith
    • The Bug Hunter

    Vaughan! I need your help! =O

    I realized I can't use the subscribe by email plugin and have to switch to e-newsletters! Can you PLEASE tweak what you wrote so it will apply the same styling to that widget instead?

    Thank you sooooooo much.

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    Can you try the following CSS;

    .widget.widget_e_newsletter_subscribe {
        background: #efefeb none repeat scroll 0 0;
        padding-bottom: 40px !important;
    }
    .widget.widget_e_newsletter_subscribe .e-newsletter-widget::before {
        content: "Learn how to become a goldfish expert with the free care checklist!";
        margin-left: 20px !important;
        padding: 10px !important;
        text-align: center !important;
        word-wrap: normal !important;
    }
    .widget.widget_e_newsletter_subscribe .e-newsletter-widget {
        display: inline-block;
        margin: 30px 20px !important;
        padding: 10px;
        width: auto;
    }
    .widget.widget_e_newsletter_subscribe h4.widget-title::after {
        content: url("http://puregoldfish.com/wp-content/uploads/2015/10/small-subscribe.png");
        position: relative;
        top: 12px;
    }
    .widget.widget_e_newsletter_subscribe h4.widget-title {
        background: #57be43 none repeat scroll 0 0 !important;
        color: #ffffff !important;
        font-size: 30px;
        height: 50px;
        padding: 21px 0 80px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    .widget.widget_e_newsletter_subscribe .e-newsletter-widget form#sbe-widget-subscribe-form-6 {
        margin-top: 30px;
        padding: 0 20px;
        vertical-align: middle;
    }
    .widget.widget_e_newsletter_subscribe label {
        display: none;
    }
    .widget.widget_e_newsletter_subscribe #e_newsletter_email {
        width: 100% !important;
    }
    .e-newsletter-widget-screen p {
        display: block !important;
        margin: auto !important;
        text-align: center !important;
    }
    
    .widget.widget_e_newsletter_subscribe input.enewletter_widget_submit {
        background: #73c2e3 none repeat scroll 0 0 !important;
        border: 0 none !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 0 0 rgba(73, 165, 204, 1);
        color: #ffffff;
        font-weight: bold !important;
        padding: 10px !important;
    }

    Hopefully that should do it.

  • Meredith
    • The Bug Hunter

    Okay so it looks pretty close, I've added a screenshot of what it looks like. I think why it looks different is that it says "Subscribe to our Newsletter" instead of "Get Exclusive Tips" so it is bumping off.

    I think there is some other CSS that Luis helped me with for another page's form that might be interfering with the sidebar widget and the home page form. So I added a pic of that too.

    I will post what he wrote here for the other page here for your reference:

    .e-newsletter-widget {
            display: inline-block;
            width: 100%;
    }
    .e-newsletter-widget-screen p {
            display: inline
    }
    
    #e_newsletter_email {
            background: #ffffff;
            border: 1px solid #d0d0d0;
            box-sizing: border-box;
            color: #707070;
            display: inline-block;
            font: 16px Open Sans,Arial;
            height: 50px;
            padding: 12px 10px;
            width: 40%;
    }
    
    .enewletter_widget_submit{
            background: #73c1e2;
            border-color: #4aa5cc;
            border-radius: 0px;
            border-style: solid;
            border-width: 0 0 3px;
            color: #ffffff;
            font: 24px Open Sans,Arial;
            line-height: 25px;
            padding: 10px 25px;
            text-decoration: none;
    }
    
    input:hover.enewletter_widget_submit{
    	background: #4aa5cc;
    	transition: all 0.3s ease 0s;
    }

    Thanks again for your help =) I really do appreciate it greatly.

  • Michael Bissett
    • Recruit

    Hey @Meredith,

    On your first widget, I've added in this CSS code:

    .widget.widget_e_newsletter_subscribe .e-newsletter-widget::before {
      content: "Learn how to become a goldfish expert with the free care checklist!";
      margin-left: 0px !important;
      padding: 10px !important;
      display: block;
    }
    
    .widget.widget_e_newsletter_subscribe h4.widget-title {
      height: 125px !important;
    }
    
    .widget.widget_e_newsletter_subscribe div#subscribe  {
      text-align: center;
    }

    And I've also used the Network Wide Text Change module in our Ultimate Branding plugin to rename the subscribe button, for those that are logged in, so that it says "Subscribe".

    Where can I find the 2nd form, mentioned here?

    https://premium.wpmudev.org/forums/topic/subscribe-by-email-widget-in-sidebar-to-look-like-so#post-972806

    Please advise,
    Michael

  • Meredith
    • The Bug Hunter

    The second form is on this page near the bottom:

    puregoldfish.com/ test

    @Michael Bissett, you've been so helpful to me today. I know I'm probably the most demanding person on here and you've stuck with me all the way =) What can I do to pay you back sir??

    Thanks so much,
    - Meredith

  • Michael Bissett
    • Recruit

    Hey @Meredith, thanks for your patience here! :slight_smile:

    The second form is on this page near the bottom:

    puregoldfish.com/ test

    I should've asked this earlier (and I do apologize for not doing so), but what exactly should that look like instead?

    I only have a screenshot here of what it looks like now, rather than what it looked like before.

    What can I do to pay you back sir??

    Well, a positive upvote never hurts my feelings (though it's not mandatory), it's always nice to know the effort's appreciated. :slight_smile:

    Kind Regards,
    Michael

  • Meredith
    • The Bug Hunter

    No apology necessary! Well, before the button was on the same line as the email field to the right. Wish I could show you a picture, but I didn't snap a screenshot.

    And certainly I will give the upvote... your efforts are indeed appreciated =)

    Best,
    - Meredith

  • Michael Bissett
    • Recruit

    Hey @Meredith! :slight_smile:

    I got this working for you by inserting the following CSS code into your theme's custom CSS area:

    .fusion-row .e-newsletter-widget .e-newsletter-widget-screen p {
        display: inline !important;
    }

    Can you confirm that it's working on your end as well please? :slight_smile:

    Kind Regards,
    Michael

  • Meredith
    • The Bug Hunter

    Hello! I just have one thing I would like to mention. It seems that the styling to the button on the home page does not apply on my iPhone. Just an ugly gray button, not like the pretty one you made @Michael Bissett. Any ideas?

    Thank you very much.

  • Michael Bissett
    • Recruit

    Hey @Meredith,

    The reason is that this CSS code, inside of your theme's custom CSS area:

    .enewletter_widget_submit{
            background: #73c1e2;
            border-color: #4aa5cc;
            border-radius: 0px;
            border-style: solid;
            border-width: 0 0 3px;
            color: #ffffff;
            font: 24px Open Sans,Arial;
            line-height: 25px;
            padding: 10px 25px;
            text-decoration: none;
    }

    Is only applied if the screen width is larger than 800px, due to the media query it's been placed inside of, you'll want to move it out of that media query, and place it below the other code that you've got inserted in there.

    That should do the trick here. :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

  • Michael Bissett
    • Recruit

    Hey @Meredith,

    The line of code I mentioned hadn't been moved out of the section I mentioned, I've now moved it to the bottom of the CSS rules for you. :slight_smile:

    However, I did notice you had a media query that didn't have a closing bracket, you'll see it if you search for this code:

    @media only screen and (min-width: 800px){}

    I closed it for you, in that fashion, as I am not aware of where you originally had it end before, you'll need to do some adjusting (I'd advise backing up your CSS rules before a change is made next time, so that this can be avoided).

    We really should be closing out this thread, as we've gone quite a ways off topic here, if there's any further questions, please open a new thread. I'll be marking this one as resolved. :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.