Custom CSS

  • Sea Jay

    (@jcollier)


    4 months, 1 week ago

    Love the plugin.

    We’d like to add custom CSS to a “classic email” — for which there is field in the campaign settings — but there are few classes in the message (seen in preview) and most styles are being applied at the element level. What are the options to, for instance, change the styling for table cells such as the message heading, text, and meta information?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor mutendebrian

    (@mutendebrian)

    4 months, 1 week ago

    Hi @jcollier,

    I’m happy that you love Noptin!

    It’s a bit tricky to provide an exact CSS snippet without seeing the actual email you’re working on. However, you can definitely target elements more precisely by using child selectors. For example:

    .some-class > p {
       /* your styles here */
    }

    Here’s a list of available CSS selectors:- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

    If you’d like, feel free to send a test email to mutendebrian at gmail.com, and I can help suggest more targeted CSS.

    Thread Starter Sea Jay

    (@jcollier)

    4 months, 1 week ago

    Thanks! I’ll send a test email.

    By way of background, we created an automated campaign with the classic email template, clicked on “Edit” and “Preview” and studied the code. The only classes are these 2:

     <table class=”body-wrap”>
     <td class=”footer”>

    The rest of the styling is inline and there are many table rows, cells, and paragraphs.

    We are pretty experienced with CSS, but not having classes or IDs makes it much more difficult. We look forward to learning more from you!

    Plugin Contributor mutendebrian

    (@mutendebrian)

    4 months, 1 week ago

    To explain a bit about how Noptin processes emails: we automatically add inline CSS and remove unused CSS classes to improve rendering across different email clients, including older ones. For the same reason, we use tables to structure the email layout.

    Plugin Author Noptin Newsletter Team

    (@picocodes)

    4 months ago

    I see you’re using the “merriweather” template. Try overriding these files in your theme:- https://github.com/hizzle-co/noptin/blob/master/templates/email-templates/merriweather/email-header.php#L0-L1

    Thread Starter Sea Jay

    (@jcollier)

    4 months ago

    Thanks, Brian!

    I made a copy of email-header.php and put it inside a subdirectory in my child theme …

    (child theme)/noptin/email-templates/merriweather/email-header.php

    … and immediately got a critical error. Removed and fine again.

    I had already added a localized template file in that same location with no issue.

    (child theme)/noptin/post-digests/email-posts-list.php

    Suggestions?

    Thread Starter Sea Jay

    (@jcollier)

    2 months, 3 weeks ago

    Still not able to make changes to the template files in our child theme 🙁

    Thread Starter Sea Jay

    (@jcollier)

    2 weeks, 6 days ago

    Since the cascading theme templates weren’t having an affect, I previewed a campaign and found inline CSS on the h1. So, I tried adding the following to the Design: Custom CSS box …

    h1
    line-height: 38px !important;
    margin: -10px 0 0 !important;
    }

    … and clicked “Preview in new tab.” No change.

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.