Styling with CSS

  • Resolved Reubz

    (@reubz)


    10 years, 11 months 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>
    <html>
    <head>
    <title></title>
    <style type=”text/css”>body {
    background-image:url(“http://www.blah blah/WebsiteBackground1.png”);
    background-repeat:repeat;
    background-size:900px 900px;
    background-position:center;}
    </style>
    </head>
    <body>
    <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>
    </body>
    </html>’
    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

    http://wordpress.org/extend/plugins/ez-emails/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author luigipulcini

    (@luigipulcini)

    10 years, 11 months 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.

    Plugin Author luigipulcini

    (@luigipulcini)

    10 years, 11 months 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;">

    Plugin Author luigipulcini

    (@luigipulcini)

    10 years, 11 months ago

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling with CSS’ is closed to new replies.