Spring Forward Web Design

Build your own Site... Control your own Future!

Breadcrumbs

E NEWSLETTER

2 Making a Template

Create a Free E Newsletter Part 2 Making a Newsletter Template

A template is a default Newsletter which will be loaded and is there to facilitate the writing of your Newsletter. In most cases, you want your Newsletters design to be the same. So, you can create your own template and AcyMailing will automatically load it when creating a new Newsletter if you set it as "default" and if you publish it.

Click on JOOMLA > COMPONENTS > ACYMAILING > TEMPLATES:

Here you will see three pre-made templates. Two of them are two column templates which can have some problems. So for now, select the White Shadow Template and then click on COPY to make a copy of it which we can modify to create our own template.

Then select the Copy_White Shadow template and click on EDIT.

Change the template name to Community Newsletter and change the Default setting to YES.

READING HEXADECIMAL COLORS

Notice that the Background color for this template is #e2e8df. Scroll down and you can see what the default template currently looks like:

After the # symbol, the first two places indicate the amount of RED, the second two places indicate the amount of GREEN and the third two places indicate the amount of BLUE. Hexadecimal color names run from 0 through 9 and then a through f – with 0 being no color at all (black) and f being all of that color. So black is #000000 and white is #ffffff. The first digit of each color counts much more than the second digit. In fact, some color codes use the shortcut of just the first digit for RED, GREEN and BLUE. So the shortcut code for #e2e8df would be #eed. This is pretty close to white which is #fff. But there is slightly more RED and GREEN than BLUE. What we are going to use for our Community Newsletter Template is a Green Background Border with a Blue Interior Newsletter.

So change the Background color to #00aa00 – meaning a lot of GREEN and no Red or Blue.

Scroll down again and this is what your new template now looks like:

The darker border helps create a better visual frame for your newsletter. Click on APPLY to save your changes and still stay with the same EDIT screen.

The next area we will change to make the template a Blue Template is the Individual Styling Section. It is important to know that the styling with HTML newsletters is different than the styling for HTML webpages. With webpages, style sheets are recommended which handle the whole page. But may email reading programs will delete style sheets, turning your colorful Newsletter back to a plain black and white text document. The solution to this problem is to use “inline” CSS styling. There are whole books on CSS coding. But for right now, we are only going to change some of the font colors. Right now, they are a light Red:

Put your cursor inside the Title h1 box and use the Right Arrow to move the cursor to the right:

The color is color:#d47e7e; The 3-digit shorthand for this color is d77 – meaning a lot of Red and a Medium amount of Green and Blue. Change this to #7744ff – meaning medium RED, less Green and a lot of BLUE. This will create a light Purple. Click APPLY to see if the change is what you want:

For Title h2, let’s use a darker color: #000055 and also change the underline (called border-bottom) to blue: #0000ff.

For Title h3, let’s use #000077.

For Title h6, change the background color to #5555aa. Then click APPLY:

This is what the Individual Styling Section now looks like:

Next we will look at the HTML VERSION section and make a few changes just to show you how it is done. First, please note that the Text Editor that comes with Joomla does not work well for creating HTML Newsletters. A much better Text Editor is the JFCK Editor. Hopefully, you have already uploaded this to your website and made it your default editor. Note that the JFCK Editor will not even appear if you are using the Internet Explorer Browser. So hopefully you are using the Mozilla Firefox Browser. If so, then here is what your custom template now looks like with the JFCK Editor just above it:

It would be good at some point to learn CSS and HTML so that you can quickly customize templates to however you want them to look. But you do not really need that detailed knowledge to do some basic changes. If you do know CSS, just be aware that you must use inline CSS and NOT style sheets. If you know HTML, just be aware that E Newsletters MUST use TABLES and not <DIV> tags. Also you need a “container” table around all of the inside tables to hold all the tables in their proper places. This may seem crazy and primitive, but Tables are the only way to assure your E Newsletter will come out looking the way you want after having gone through all the email transmission filters. Also be aware that many HTML tags will simply not work. This is why you are better off using a pre-made template and modifying it rather than trying to build your own template from scratch.

With all of these precautions, we are ready to modify some of the HTML. First, turn off the SPELL CHECKER on the JFCK Editor by clicking on CANCEL to leave the Template Edit Screen. Then click on Extensions > Plug In Manager and scroll to the JFCK Editor. Click on it to open it. Under Advanced Parameters, at the bottom where it says “Always Check Spelling” Click on NO, then click on SAVE. Then back to COMPONENTS > ACYMAILING> TEMPLATES and click on Community Newsletter to Edit it.

Next, click on SOURCE in the upper left corner of the Text Editor to view the Newsletter HTML Source Code. Do not be afraid when you see it. We are only going to change a couple of lines. If you make a mistake, you can always try again with a fresh copy of the original template.

This HTML code goes on for the next three pages, mainly because there are several tables within tables and each has to be well defined. To begin with, some of the colors are stated using a 0 to 256 system. Again, the first number is RED, the second is GREEN and the third is BLUE. So (0, 0, 0) is BLACK and (256, 256, 256) is WHITE. The first line notes that the background (border) color was changed to GREEN.

At the beginning, it also sets the Container Table width at 560. This is roughly 5 to 6 inches across. While most computer screens are at least 1200 pixels – or 14 inches across and most webpages are 960 pixels which is a little wider than an 8 ½ by 11 inch sheet of paper, the standard width for an email is 560 and it would be good to leave it at this. 600 Pixels is considered the maximum. You will occasionally see emails that scroll all the way across the page. This is usually because the author forgot to include a container table specified at 560.

FIRST HTML SECTION:

The html tag <tbody> opens the body of the email. It is the outer container which is set for 560 pixels wide.

The <tr> tag opens a table row. It includes the text which is shown above the main email. The section is closed with the html tag </tr>. But note that the <tbody> is still open.

<tbody>

<tr>

<td colspan="3" style="padding: 20px 0px; font-size: 10px; color: rgb(0, 0, 0); margin: auto; text-align: center;" class="hideonline">This email contains graphics, so if you don't see them, {readonline}view it in your browser{/readonline}.</td>

</tr>

SECOND HTML SECTION (MAIN EMAIL)

The second section begins by opening another row with a <tr> tag. There are two cells in this row. One is 37 pixels wide and the other is 496 wide. The color (251, 251, 247) is a bright white.

Click on the word SOURCE in the Editor to see what it will look like in HTML view.

We will make two changes in this section. First, we will increase the width of the bigger cell to 520 pixels to give us more room. Second, we will change the background color from white to light blue. Make the change in the HTML, then Click on Apply, then see what this change does.

<tr>

Here is what our custom template looks like after the above changes:

THIRD SECTION (HEADER)

Click on SOURCE again to get back to the HTML. What we want next is to change the header table so that it is a light green. We also want to replace the box with our own image and replace the Header text with our own text.

The header section begins by opening up another table with the <tbody> tag. It then opens up a row in the table with the <tr> tag. This row is simply a blank row intended to put some space between our picture and header text and the blue are above it. The height of this row is 20 pixels.

<tbody>

<tr>

</tr>

After this row closes, another row is opened. The second row begins with a cell that is 20 pixels wide. This is to create space to the left of the image. The cell then closes with a </td> tag:

<tr>

Then another cell in the same row opens. This one includes some properties for the whole Header. So we are going to change the header width from 456 pixels to 520 pixels. The second height we will increase from 110 to 190 pixels and the background color we will change to light green (210, 250, 210). The click on APPLY and then view the changes.

Here is what our custom template looks like now: