I've been working with ACY Mailing (Joomla!) for years and am looking forward to the progress with Version 6. The template is always a problem and my self-editing clients tend to give up on the extension. ACY Mailing is an essential part of automating a full marketing platform. So, I hope Version 6 will save some time eventually; it's still relatively new and tweaks are understandable.
I am open to any feedback, corrections, ideas, whatever....
-------- So far, this is my observation about customizing the template:--------
1) Custom CSS File in Settings of Template Editor:
Using the custom css option works to a point, but it is not reliable. For example, I can pull in my Google Fonts but you need a backup font.
2) How to Control the Font Style per Section:
When you are editing, the default font will write over your main css style. Example: <p style="the default font family, font size etc">
from the right side editor. So, the only way to OVERRIDE that is going into the HTML and adding <span style="your choice of font family, font size.">Your text </span>
The final will look something like this. I am using 'Fira Sans' as the custom font in my main css.
<p style="word-break: break-word; font-family: Arial; font-size: 10px; font-weight: normal; font-style: normal; color: rgb(0, 0, 0);" data-mce-style="word-break: break-word;"><span style="font-family: 'Fira Sans', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; line-height: 25px; color: #454545; margin: 0px;" data-mce-style="font-family: 'Fira Sans', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; line-height: 25px; color: #454545; margin: 0px;">Text
here</span></p>
I use placement text to save styles. If you remove that text, then you must re-enter the span styles.
3) Images:
Sometimes I can get them to be responsive and sometimes not. When I give up, I set the image size to 300px to work with phones. I have tried using a class="img-responsive"
directly in theimg
code, but it's not reliable for Outlook.
I never place an image to the left or right of text. It tends to look funny on tablets, as would any web page. If you decide to add a table and force 2 columns, you may want to use the class="stack-column"
approach with css media queries. That has worked for me in Version 5. I have not tested that in Version 6 yet with photos; but it works well for text.
Here is the code I use in Version 5
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {width: 100% !important;}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid, .fluid-centered {max-width: 100% ; height: auto; margin-left: auto; margin-right: auto; }
.fluid-centered {margin-left: auto !important; margin-right: auto !important;}
/* What it does: Forces table cells into full-width rows. */
.stack-column, .stack-column-center {display: block; width: 100%; max-width: 100%; direction: ltr !important;}
.stack-column-center {text-align: center !important;}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {text-align: center; display: block; margin-left: auto; margin-right: auto; float: none;}
table.center-on-narrow {display: inline-block;}
}/*responsive template*/
4) Forwarding:
I am still testing the custom font challenge you mention, but the <span> seems to help, and at least uses the backup font of my choice.
5) General Info About Layouts:
I find it easier to break down my content into small sections for the template. If something breaks, it's well contained in 1 section.
There are many things I love about Version 6; but they are not pertinent to this thread.