Custom HTML templates

[ragunaru]

Hi there,

I'm just trying out Keila locally, and I like the simplicity of the app.

However, I could not find a way to define a custom HTML base template. You know, the actual HTML head, body, etc.?

While I like the markdown editor for creating campaigns and such, I would first want to define my custom HTML template with responsive styling, dark mode support, etc.

Or is editing priv/email_templates/default.html.liquid currently the only way to achieve that?

Many thanks!

[wmnnd]

Hey there, thanks for reaching out! I’m currently working on a new block-style editor (see #175) which will bring a new responsive base template (and possibly dark mode support). There are currently no plans to allow the editing of the base template.

What are some things you think are missing from the base template at the moment?

[ragunaru]

Thanks for the response!

I spent a fair few hours yesterday trying to modify the base template to suit my needs. The UX of this has been a nightmare, I must admit. It took me an hour to understand why none of my changes were being applied, and to find a way around it (modifying the @html_template reference in default_template.ex, letting the app crash, and then fix + refresh).

It then took me another couple of hours to figure out that your Css parser craps out when trying to use custom font stacks and doesn't actually output the font. For context, I wanted to use a custom system font stack:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

The solution was to just add some of these overrides in the style block in the base template head.

So there was a lot of fighting against the defaults.

Customizations that I needed:

• Dark mode
  • Color overrides for dark mode
• Transparent default background
• Custom font stack
• Logos in the footer and header
• Custom styling for a bunch of things, like
  • hr tag
  • p tag (font size, line height)
• Customized footer layout

I feel like none of these things are outrageous, but basically table stakes when it comes to sending branded and customized email newsletters.

My question to you would be: why have you decided to not support custom HTML templates?

[wmnnd]

Adding support for custom HTML templates simply hasn’t been a focus for Keila so far. Instead I’m trying to have a good baseline template that works for most use-cases. I agree that more customization would be nice, but that’s probably something for after we get to Keila 1.0.

The CSS parser should have no problem with custom font stacks, by the way. The following seems to work fine:

css = """
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
"""
Keila.Templates.Css.parse!(css) 
# =>
# [
#  {"body", [
#       {"font-family",
#       "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""}
#   ]}
# ]

I’m curious, do you have an example of good UIs that allow for custom HTML templates? The only straightforward way I see is to have a binary switch between a) use the default template and adjust some settings b) use a fully customized HTML/Liquid template with zero settings in the UI.

[BaGsn]

It would be very usefull to have simply have the ability to use a fully customized HTML/Liquid template with zero settings in the UI. Even more simply, it would be great to have the option to inject CSS (or link a css stylesheet) in the templates (especially to be able to use webfonts).