GithubHelp home page GithubHelp logo

activecampaign / postmark-templates Goto Github PK

View Code? Open in Web Editor NEW
3.0K 69.0 1.1K 417 KB

Rock-solid transactional email templates for applications.

Home Page: https://postmarkapp.com/transactional-email-templates

License: MIT License

HTML 100.00%

postmark-templates's People

Contributors

ansidev avatar derekrushforth avatar garrettdimon avatar isaacbowen avatar matt-west avatar timobakx avatar weisisheng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

postmark-templates's Issues

Social media icons

Hi,

How do I add social media icons on the footer section?.

Any samples available?

Thank you
Deepu

Unclear how to add logo

In the ccs, there are mentions of the email-masthead-logo, but no directions on how to add the logo to the masthead. Is that supported with these templates? I don't see it in any of the demos/screenshots that you've published.

Great templates, can't wait to play with them more!

Darkmode doesn't work without meta tags

Hi, thanks for awesome templates! But, I test on iOS and Mac OS default mail apps and dark mode doesn't work.
I added this to the template

 <meta name="color-scheme" content="light dark">
 <meta name="supported-color-schemes" content="light dark">

And this to style and this works as planned.

    :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
    }

What do you think?

How can I use my custom font?

How can I use my custom font from an URL.
I added font-face to style tag at head tag, but it didn't work.
My template header like that:

<style type="text/css" rel="stylesheet" media="all"> @font-face { font-family: PlusnetCreighton; src: url(https://s3-eu-west-1.amazonaws.com/assets.comparetechnology.co.uk/emails/plusnet/plusnetcreightonprobook.woff); } .plustnetFont { font-family: PlusnetCreighton,Arial,sans-serif; } /* Base ------------------------------ */
*:not(br):not(tr):not(html) {
  font-family: PlusnetCreighton, Arial, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
}

rendering mustachio in previews

In trying to modify previews.html to render the mustachio template, I have failed to find a JS compatible library that can handle the sections appropriately.

My reason for trying to do this, is my templates contain lots of conditional logic.

I've seen suggested somewhere, to use handlebars to achieve what I desire, but handlebars dosn't support the pathed sections.

Any ideas on a library that might support?

Vertical align table cells

Is it possible to vertical align the table cells in a cross browser/client way. I attached an image of the receipt template (changed the google font and deleted some sections, no other modification).
2020-06-29 19 59 13

iOS Mail Reader and iCloud Mail

The template within inline CSS is not rendering correctly on iOS mail (it's small) and on iCloud mail its really wide and causes scrolling.

Switch To Better Font Stacks

Problem:

Currently, the Postmark templates use custom Google fonts. Specifically Nunito Sans. This has several consequences:

  1. Email clients such as Mail.app on macOS Ventura now display a very prominent "This message loaded remote content" bar for Postmark template emails. To a layperson, that seems very suspicious. They don't understand that it was just a font; they've read 321 CNN articles about viruses and trackers in email and now it looks like MY company is doing that because I adopted Postmark templates.

  2. Because OS vendors are (rightfully) tightening down security screws, loading remote content in emails is more frequently disabled by default now, meaning that the custom font isn't displayed anyway and the remaining fonts in the current stack are sub-optimal.

Proposed Solution:

Switch to a font stack that leverages the fonts already present on the user's system. The stack from WordPress is the gold standard here:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

That covers Apple platforms (mac and iOS), Windows, Android, KDE Linux, Ubuntu Linux, Other Gnome Linux and then falls back to Helvetica Neue. Eliminating the @import for the remote Google font also eliminates the scary this message loaded remote content banner and it increases message load performance. All wins.

Dark Mode

Hey there,

i´ve tried this email template but i cant get the dark mode to work. iOS13 supports dark mode but emails created with this template are not in dark mode.

Add break-word to elements holding action_url

Outlook 2019 on Windows have a hard time breaking url's.
Therefor the elements that contain {action_url} will often break the layout, if the url is long.

We have added ´break-word: break-all´ to these elements to fix it, and I would suggest the same is done in the templates.

Let me know if I should open a pull request.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.