Campaign HTML CSS

groundzero2010

Total Posts: 196
Karma: 1298
Joined: 5/2/2013
Location: United States

Posted: 9 years ago

I've done some searching but was unable to find a solution to my question.

What I'd like to is take an html/css email template I have and copy paste it into a campaign to send out that way. I've tried copy pasting and even copy pasting into the source code view of the message, but wasn't able to get my email to look correct.

Is this possible to do?

ima9ines

MVP

Certified Developer

Total Posts: 766
Karma: 16050
Joined: 12/24/2012
Location: Vietnam

Posted: 9 years ago

Sure, you can. How your html/css email template look like? Which're sections not look like your designed?

groundzero2010

Total Posts: 196
Karma: 1298
Joined: 5/2/2013
Location: United States

Posted: 9 years ago

Thanks for the response. Just for testing purposes I used some stripped down CSS (see code below). After a little more research I found some articles about TinyMCE Full page addin. Looks as though I may need to include this addin to have access to the <head> portion of the campaign. Thoughts?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style>
        logo {
            background: #00ff00 url("http://www.splaudio.com/Content/Images/logo.png") no-repeat fixed center;
        }

        body {
            background-color: #d0e4fe;
        }

        h1 {
            color: orange;
            text-align: right;
        }

        p {
            font-family: "Times New Roman";
            font-size: 20px;
        }

        buttons {
            font-size: 50px;
        }
    </style>
</head>
<body>

    <logo>SPL</logo>
    <h1>SPL Audio.com</h1>
    <p>This is a paragraph.</p>
    <buttons>Button</buttons>

</body>
</html>

groundzero2010

Total Posts: 196
Karma: 1298
Joined: 5/2/2013
Location: United States

Posted: 9 years ago

I sent you a PM with the full code snippet I'm trying to place into a campaign.

petemitch

MVP

Certified Developer

Total Posts: 558
Karma: 6401
Joined: 7/29/2011
Location: United Kingdom

Posted: 9 years ago

You could try a CSS inliner like the MailChimp or Zurb ones. CSS support in mail clients is patchy at best, (particularly in recent versions of Outlook which use the Word HTML rendering engine), so writing HTML for emails tends to mean coding like it's 1999 and breaking out the table layouts and spacer gifs and testing in as many email clients as you have access to. Even simple stuff like the background image from your example code just doesn't work in Outlook.

ima9ines

MVP

Certified Developer

Total Posts: 766
Karma: 16050
Joined: 12/24/2012
Location: Vietnam

Posted: 9 years ago

petemitch wrote:

You could try a CSS inliner like the MailChimp or Zurb ones. CSS support in mail clients is patchy at best, (particularly in recent versions of Outlook which use the Word HTML rendering engine), so writing HTML for emails tends to mean coding like it's 1999 and breaking out the table layouts and spacer gifs and testing in as many email clients as you have access to. Even simple stuff like the background image from your example code just doesn't work in Outlook.

You are right to using CSS inliner online tool to convert to email.
But, I suggest another better online tool with suggestions after convert process (quite good suggestions).
It is: http://inlinestyler.torchboxapps.com/styler/convert/

Here is the suggestions after I converted your email template on it (and I think it is a best practice when you make another mailing template):

- The pseudo-class focus cannot be supported inline
- The pseudo-class before cannot be supported inline
- The pseudo-class after cannot be supported inline
- The pseudo-class hover cannot be supported inline
- height not supported by: MySpace, Notes 6 and 7, Outlook '07, Blackberry
- font-size not supported by: Blackberry
- right not supported by: MySpace, Gmail, Yahoo! Mail, Android Gmail, Notes 6 and 7, Palm Treo (Win Mobile 6.5), Hotmail, Yahoo! Classic, Palm Treo (Palm Garnet OS), Outlook '07, Blackberry
- vertical-align not supported by: Android Email, Notes 6 and 7, Outlook '07, Blackberry
- display not supported by: Palm Treo (Palm Garnet OS), Outlook '07, Blackberry
- border not supported by: Notes 6 and 7
- top not supported by: MySpace, Gmail, Yahoo! Mail, Android Gmail, Notes 6 and 7, Palm Treo (Win Mobile 6.5), Hotmail, Yahoo! Classic, Palm Treo (Palm Garnet OS), Outlook '07, Blackberry
- float not supported by: Android Email, Android Gmail, Notes 6 and 7, Outlook '07, Blackberry
- font not supported by: Palm Pre (WebOS) (partial support), Notes 6 and 7, Palm Treo (Win Mobile 6.5) (partial support), Palm Treo (Palm Garnet OS), Blackberry
- line-height not supported by: MySpace, Notes 6 and 7, Palm Treo (Palm Garnet OS), Blackberry
- padding not supported by: Notes 6 and 7, Outlook '07 (partial support)
- width not supported by: MySpace, Notes 6 and 7, Outlook '07
- background not supported by: Gmail (partial support), Android Email, Android Gmail, Notes 6 and 7, Hotmail, Palm Treo (Palm Garnet OS), Lotus Notes 8.5, Outlook '07 (partial support)
- position not supported by: MySpace, Gmail, Yahoo! Mail, Android Gmail, Notes 6 and 7, Palm Treo (Win Mobile 6.5), Hotmail, Yahoo! Classic, Palm Treo (Palm Garnet OS), Outlook '07, Blackberry
- font-family not supported by: Palm Treo (Win Mobile 6.5), Palm Treo (Palm Garnet OS), Blackberry
- margin not supported by: Notes 6 and 7, Palm Treo (Win Mobile 6.5) (partial support), Hotmail, Blackberry
- font-style not supported by: Palm Treo (Palm Garnet OS)
- clear not supported by: Notes 6 and 7, Palm Treo (Win Mobile 6.5), Palm Treo (Palm Garnet OS), Outlook '07
- left not supported by: MySpace, Gmail, Yahoo! Mail, Android Gmail, Notes 6 and 7, Palm Treo (Win Mobile 6.5), Hotmail, Yahoo! Classic, Palm Treo (Palm Garnet OS), Outlook '07, Blackberry

Still have questions or need help?