WordPress.org

Ready to get started?Download WordPress

Forums

Subscribe2
[resolved] CSS from theme not not rendering inline into email (10 posts)

  1. parkvisitor
    Member
    Posted 1 year ago #

    First - love the plugin.

    In the specs you say its possible to load the theme CSS into the HTML emails.

    Reading over some previous forum threads - it sounds like I just need to wrap particular parts of the email (title, post, etc.) with the correct divs (specifying the id and or classes) - and it sounds like the plugin will then pull the css for those classes/ids and write inline css into the email (i'm assuming also for the child elements that are included inside the post, such as p tags, images, etc. the plugin will write inline css for those objects)

    Problem is if I specify div classes or ids, no styling is applied to the email (its acting as if your plugin is NOT writing inline css for those divs). If I instead take the actual css and apply it inline myself, then it works - except I can't apply it in any amount of detail since your template only allows me to access {TITLE} and {POST} for example (not the elements inside {POST} such as p tags or images).

    So my question is: Am I doing something wrong when I put in the div id/classes as you specify in the forum? Does your plugin pull in the styles and embed them into the email from the theme css?

    OR: Can I only apply inline styles around the TITLE and POST objects in the template and only apply a limited depth of styling?

    Here is my template:

    <div id="main">
    <div class="post single">
    {BLOGNAME} has posted a new item, '{TITLE}'
    <h1 id="single-title">
    {TITLE}
    </h1>
    <div class="postcontent">
    {POST}
    </div>
    You may view the latest post at
    {PERMALINK}

    You received this e-mail because you asked to be notified when new updates are posted.
    Best regards,
    {MYNAME}
    {EMAIL}
    </div>
    </div>

    thanks!
    Dave

    http://wordpress.org/extend/plugins/subscribe2/

  2. parkvisitor
    Member
    Posted 1 year ago #

    p.s am definitely purchasing your plugin if I can get this fixed :)

  3. mattyrob
    Member
    Plugin Contributor

    Posted 1 year ago #

    @parkvisitor,

    I presume you are using per-post emails and are testing by clicking on the send preview button in the Settings page.

    Applying the correct DIVs should work fine.

    Have you included your theme CSS in the email? "Include theme CSS stylesheet in HTML notifications" should be marked as Yes in the Settings page near the top.

    Also, does your theme use more than one CSS file? Some themes have core CSS and then one or more child CSS files. Subscribe 2 can only add the core file by default but can be plugged to include other child files if needed.

  4. parkvisitor
    Member
    Posted 1 year ago #

    The theme only uses styles.css

    I'm using the 'send preview button' as you guessed.

    I have also checked the 'include theme css stylesheet in HTML notifications'.

    Knowing that I am on the right track - I'll dig into it a bit more and see if there is something I'm overlooking.

    Thanks for the fast response!
    Dave

  5. parkvisitor
    Member
    Posted 1 year ago #

    Mattyrob,
    I took a look at the code, please correct me if I'm wrong, but it looks like it does not actually write inline CSS from the blog theme, it just embeds the blog stylesheet into the head of the email - which is most likely the reason why its not styled for me, as its not compatible with most email clients.

    Does this sound accurate?

    thanks
    Dave

  6. mattyrob
    Member
    Plugin Contributor

    Posted 1 year ago #

    @Dave,

    The stylesheet is embedded into the header, you are correct.

    Does your theme inline style all elements then? That's a fairly inefficient use of CSS, surely it's better to define a global look for links for example and then have a style sheet apply that to all links on your site rather than inline styling each individual link - or am I misunderstanding you?

  7. parkvisitor
    Member
    Posted 1 year ago #

    @Mattyrob,
    The theme does not use inline style elements - it does use a stylesheet, but stylesheets embedded in the header of an email are commonly not supported by email clients.

    For example - "As of 2012, Gmail is the most restrictive as it will ignore all external and embedded style sheets. (It will support inline styles.)"
    http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters

    That's why I was hoping that the plugin was taking the embedded stylesheet and writing inline css so that it would be more compatible.

    It wouldn't be a problem with this plugin if it was possible to write inline pseudo and child classes but as I described in the past post, If I'm only allowed to wrap a div around {POST} for example, the inline styling on that div is only going to get me so far (for example I can't apply inline CSS to the children image of that div so that images float left)

    Perhaps there is a solution you use with your plugin - otherwise I'll see what I can do with inline styling.

    thanks!
    Dave

  8. parkvisitor
    Member
    Posted 1 year ago #

    @Mattyrob,
    Just pinging again to see if you have any thoughts on the previous comment. thanks!
    Dave

  9. mattyrob
    Member
    Plugin Contributor

    Posted 1 year ago #

    @Dave,

    The only way to do this would be to use a parser that can convert linked CSS to inline stuff. BUT, the ones I've looked at come with drawbacks - they convert full URLs to relative ones and most list numerous email client (web and desktop) compatibility problems in the resulting text.

    I think no matter what is done here a perfect result is not attainable because of the huge variation in HTMLand CSS compliance in email readers (and you thought browsers were bad!)

    Until a reasonable solution can be found I'm inclined to leave things alone for fear of making the code less robust.

  10. parkvisitor
    Member
    Posted 1 year ago #

    Yes, I agree it is difficult to get email compatible messages.

    Something you may consider in the future for a nice feature that may push your plugin closer to JetPacks, and I don't think would be too hard is:

    Set up 2 or 3 form fields in the settings page that specify an inline style you would like to apply some basic element selectors in the email, for example:

    1. p tags
    2. p > img tags
    3. h1

    Or, perhaps instead of hardcoding the 3 above selectors, allow the user to create their own selector, and inline css for each selector (since every theme is going to have different html, it might not be a good idea to have hardcoded selectors).

    How the plugin is right now, for example, a user can't (compatibly) even make their images float left of a paragraph. A simple selector of 'img', and inline css of 'float: left' would make my email template already 100x better.

    thanks again for the feedback and help troubleshooting the plugin. Keep up the great work!

    Dave

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic