Creating a new template : Where to put the css code ?

11 months 1 week ago - 11 months 1 week ago #1 by Christophe Lebis
Hello,
I want to create my own template, and I need to write my css code in it. The css code must be in the head, but I don't find any area to write css code in the template editor.

Thanks for your help.

Please Log in or Create an account to join the conversation.

11 months 1 week ago #2 by Christopher Mavros
Replied by Christopher Mavros on topic Creating a new template : Where to put the css code ?
Hello Christophe and thank you for posting!

Email HTML is deliberately very old-style. Most email clients only support inline styles.
Fortunately, there are some tools called CSS Inliners, which allow you to transform your existing HTML and CSS into inline styles.
Here's one from Mailchimp . We haven't built such a tool, only because so many good tools already exist that you can use for free, and this is usually a one-time process that you don't have to repeat over and over again.

Let me know if you need any further assistance!

Christopher Mavros
mavrosxristoforos@gmail.com
If you like our extensions, please rate us on the JED!

Please Log in or Create an account to join the conversation.

11 months 1 week ago #3 by Christophe Lebis
Replied by Christophe Lebis on topic Creating a new template : Where to put the css code ?
Thanks for your response Christopher.

So it seems not possible to make the newsletter responsive since it's not possible to insert media queries ?

Please Log in or Create an account to join the conversation.

11 months 1 week ago - 11 months 1 week ago #4 by Christopher Mavros
Replied by Christopher Mavros on topic Creating a new template : Where to put the css code ?
You do not need media queries to make emails responsive.

Media queries are only partially supported by some, not all, email clients, at the moment.
If you want to add a <style> element, you are free to do so. Just make sure that your Joomla editor doesn't cut it out, by adding it to the allowed elements.
NS Pro does not restrict your email content.

However, one common practice, the one we follow in our email templates, is to use tables.
Wrapping everything in a large table, does the trick.

<table width="100%" bgcolor="#fafafc">
  <tr>
    <td style="padding-top: 20px; padding-bottom: 20px;" align="center">
      <table style="max-width: 600px;" width="100%">
        <tr>
          <td bgcolor="#fff">
            ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

With this simple structure, you get a white max-width: 600px newsletter container on a gray background, to add your content.
Remember that media queries are only really necessary if you want to show/hide things depending on screen size. Pure HTML is responsive by default, unless you start placing multiple table cells next to one another. Moreover, keep in mind that your email viewport width/height usually doesn't match the screen size, unless opened in a full screen client.

One may argue that large companies send very impressive, interactive emails to their users. However, they usually do so, having the advantage of knowing their target email client. (Google sends to Gmail users, Microsoft to Outlook, etc)

To sum up, you can create very complex emails, but they will probably not work well in all email clients. If you don't mind and want to target some specific clients, you could probably write a simple version that works well everywhere, and build up from that, showing content only when it's supported.

Let me know if you need further assistance!

Christopher Mavros
mavrosxristoforos@gmail.com
If you like our extensions, please rate us on the JED!

Please Log in or Create an account to join the conversation.

11 months 1 week ago #5 by Christophe Lebis
Replied by Christophe Lebis on topic Creating a new template : Where to put the css code ?
Thanks, I know that ;)

In fact, media queries are necessary for smartphones, and yes I need to show things differently for a screen 320 px width, and hide some.
Using tables is essential (for Outlook for exemple) but tables are not naturally responsive. You have to display table, tbody, tr, td as block for little screens when you have 2 columns in your nl, what is common.

One other problem is seem there is no click tracking in statistic report (number of clicks), so it seems not possible to use it for professionnal use. Or else I don't see it ?

Please Log in or Create an account to join the conversation.

11 months 1 week ago - 11 months 1 week ago #6 by Christopher Mavros
Replied by Christopher Mavros on topic Creating a new template : Where to put the css code ?
If you want to have two columns, you can still use a table with 50% width in both cells of each row.
You could introduce a media query to break that table into blocks for mobile. That is what Envato does in a newsletter I just checked.
(Yes, Envato does use tables for having two columns)

You could also theoretically add div elements with a maximum width and display: inline-block.
This could work well, if we assume you know the maximum width of your newsletter content, which is a good practice.
I haven't tested it, though, and unfortunately, even display or even float are not fully supported by all email clients.

As for click tracking, we track openings, but not link clicks. If you need more information, please open a separate topic.
Thanks again!
 

Christopher Mavros
mavrosxristoforos@gmail.com
If you like our extensions, please rate us on the JED!
The following user(s) said Thank You: Christophe Lebis

Please Log in or Create an account to join the conversation.

Moderators: Christopher Mavros