EZ Emails
[resolved] Styling with CSS (4 posts)

  1. Reubz
    Posted 3 years ago #

    Awesome plugin!! I've used the below code to style my "Template" (copied and pasted from the "source" on the "Templates" Tab):
    '<!DOCTYPE html>
    <style type="text/css">body {
    background-image:url("http://www.blah blah/WebsiteBackground1.png");
    background-size:900px 900px;
    <p style="text-align: center;">​<img alt="" src="http://www.blah blah/HEADER.png" style="width: 448px; height: 97px;" />​</p>
    <p> </p>
    <p><span style="font-family:arial,helvetica,sans-serif;">%content%</span></p>
    <p> </p>
    <p><span style="font-family:arial,helvetica,sans-serif;">%signature%</span></p>
    This code renders exactly as expected on the "Templates" Tab, but does not render either in the final sent email or in the Preview section on the "Send Email" Tab. Is it possible to get the CSS styling above in my final email - If so, what would I need to change in my code? If not, thought I'd give it go and would like to submit this post as a possible feature for the future.
    Thanks - Reubz


  2. luigipulcini
    Plugin Author

    Posted 3 years ago #

    Hi Reubz,
    thank you for your comment. I am so sorry for getting back to you so late. I had not received any notification about your post.

    Emails do not support CSS styling in the <head> section of the <html> content. Or at least most of email clients out there don't.

    In order to style your email correctly, you need to have an "inline" styling, using the "style" attribute in each tag.
    In your case, it is very simple, since you have only the body styled in the <head> section.

    So just remove the whole <head> section of your code and replace the <body> tag with the following code:

    <body style="background-image:url("http://www.blah blah/WebsiteBackground1.png"); background-repeat:repeat; background-size:900px 900px; background-position:center;">

    Hope this helps.

  3. luigipulcini
    Plugin Author

    Posted 3 years ago #

    Oh, sorry... I have just noticed the double quotation marks in the URL of background-image.
    You don't need and can get rid of those.
    Your code will be:

    <body style="background-image:url(http://www.blah blah/WebsiteBackground1.png); background-repeat:repeat; background-size:900px 900px; background-position:center;">

  4. luigipulcini
    Plugin Author

    Posted 3 years ago #

    I will list this problem as resolved.
    In case you need further help don't hesitate to write me again.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • EZ Emails
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic