Move template to admin interface

[bdolor]

Description

Migrate any hard coded values to the admin interface, allowing for string replacement mechanism for dynamic content.

Expected behaviour

Admins can control all aspects of the template.

Actual behaviour

They only control some aspects of the template

[bdolor]

@paulagaube @kathreenriel ready for validation

[kathreenriel]

@paulagaube I've reviewed this. Would you review this before it moves to "Done"

[paulagaube]

@kathreenriel I am reviewing this and would like to test a bit more tomorrow. It looks good so far, but I'm not ready to move this to Done yet.

[paulagaube]

I have modified the text in the email template and am comfortable with adding HTML tags and adding an image from the media library, but I have a couple questions about the email styling.

1. There is a large amount of white space after the headline text at the top "Early Years Certification site" and above the words "Hello". Can the height of this space be reduce to about half what it is now?

2. In the email I receive, the font is consistent and all serif, probably Times New Roman. When I try to print that email, the bulleted list and the hyperlinks are larger and sans-serif. How can I make the font be consistent in the whole email?

3. What is the styling/format required in the "Custom CSS" section? Can you provide an example so I can test this more? Can I create new classes or IDs in this section, or do I just add styles between the curly brackets of the ID #emailContainer { } ? I've tried adding styles here, but have not had success with this feature.

[paulagaube]

What is the logic for displaying the events shown in the email? Or, what are the restrictions? My understanding is only one event per Organizer will display, and that event will be the most recently posted, but is that the case?

Case: As Bradner Community Place, I just posted a new event called "Playing with Education:..." but that event doesn't show up on the test email as a recently posted event. The "Playing with Education..." event does show up on the "Recently Posted" events on the home page though, so maybe the logic on the {EVENTS} code in the email template has not been fixed yet?

[paulagaube]

This is the print version of the same email (from Zimbra):

[paulagaube]

Here is the iPhone version of this email message. The "EYPD web portal" link is not sans-serif, but the bulletted list is.

[bdolor]

1. You can reduce whitespace by adding the following CSS:

   td, tr {
   padding: 0px;
   }

2. You can keep the font consistent with the following CSS:

   #emailContainer{
   font-family: RobotoSlab;
   }

3. The Custom CSS feature behaves like a regular stylesheet. In the HTML area you can create html elements with custom classes, like <p class="my-red-class">Should be Red TEXT</p> and then add some corresponding CSS like .my-red-class{ color: red; }. For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

[paulagaube]

Thanks, @bdolor ! This is very helpful.

[kathreenriel]

@paulagaube Do you notice that the style of links and text is different between email clients?Check out the following images

[paulagaube]

@kathreenriel Hmmm. I'm looking and testing. Where did you capture that middle image from? e.g., browser? iPhone?

[kathreenriel]

All images captured on my desktop. It makes me wonder just how much styling we can control.