Differences

This shows you the differences between two versions of the page.

--- newsletter [2024/02/07 22:01] – [HTML Reference] thehort
+++ newsletter [2024/10/08 23:34] (current) – [Changing the Newsletter Theme] thehort
@@ Line 3: / Line 3: @@
 ===== HTML Reference =====
-The following table provides some basic HTML tags that will be helpful to know when editing the newsletter code and adding in copy:
+The following table provides some basic HTML tags that will be helpful to know when editing the newsletter code and adding copy:
 ^ HTML  ^ Description ^
-|''<strong>Bold</strong>'' | Bold text |
+| <code><p>Paragraph</p></code> | Paragraph tag |
-| ''<em>Italic</em>'' | Italic text |
+| <code><br></code> | Line break. Best used for when a single line break is required, otherwise use the paragraph tag. |
-| ''<p>Paragraph</p>'' | Paragraph |
+| <code><strong>Bold text</strong></code> | Bold text |
-| ''<h1>Header 1</h2>'' | Header 1, largest sized header. |
+| <code><em>Italic text</em></code> | Italic text |
-| ''<h2>Header 2</h2>'' | Header 2, medium sized header. |
+| <code><h1>Header 1</h2></code> | Header 1, largest sized header. |
-| ''<h3>Header 3</h3>'' | Header 3, smaller sized header. |
+| <code><h2>Header 2</h2></code> | Header 2, medium sized header. |
-| ''<br>'' | Line break. Best used for when a single line break is required, otherwise use the paragraph tag. |
+| <code><h3>Header 3</h3></code> | Header 3, smaller sized header. |
-| <code><a href="https://thehort.org">Link</a></code> | Anchor (link) tag. URL is place in the ''href'' attribute.  |
+| <code><img src="image.jpg" alt="Alternate Text"></code> | Image tag. Image file path is placed in the ''src'' attribute. The ''alt'' attribute should give a short description of the image.  |
-| ''<img src="image.jpg" alt="Alternate Text">'' | Image tag. Image file path is placed in the ''src'' attribute. The ''alt'' attribute should give a short description of the image.  |
+| <code><a href="https://thehort.org">Link text</a></code> | Anchor (link) tag. The URL is placed in the ''href'' attribute.  |
 | <code><ul>
 	<li>Unordered list item</li>
@@ Line 20: / Line 20: @@
 </ul></code> | Unordered list. |
 | <code><ol>
-	<li>Unordered list item</li>
+	<li>Ordered list item</li>
-	<li>Unordered list item</li>
+	<li>Ordered list item</li>
 </ol></code> | Ordered (numbered) list. |
 ===== Uploading Images =====
@@ Line 37: / Line 37: @@
 After creating the message, click on the newsletter subject that appears between the newsletter name and the code, enter a new subject line, and save.
-Before beginning to edit the code, it's helpful to turn on the ''Live Preview''. Note that the Live Preview does not accurately display all aspects of the newsletter, but is helpful while editing content since it allows you to see the changes being made in real time. To get an accurate preview of the newsletter, it is best to use the ''Preview'' function and/or email yourself a test.
+Before beginning to edit the code, it's helpful to turn on the ''Live Preview''. Note that the Live Preview does not accurately display all aspects of the newsletter, but is helpful while editing content since it allows you to see the changes being made in real time. To get an accurate preview of the newsletter, it is best to use the ''Preview'' function and/or email yourself a test
+===== Changing the Newsletter Theme =====
+The newsletter has been developed to support different color themes. These themes can be changed by updating the class set on the first ''table'' tag after the ''body''—this table also has the class ''container''. You can add the following classes to change the newsletter themes:
+  * ''renew''
+  * ''bloom''
+  * ''harvest''
+This is the full HTML for this line:
+<code>
+<table cellpadding="0" cellspacing="0" border="0" class="container bloom">
+</code>
 ===== Editing Newsletter Sections =====
 The newsletter is comprised of distinct sections that are commented in the code the make them easy to identify. You can use the below reference to aid in locating and updating each distinct content section. If a content section is not needed for a newsletter, it can simply be removed by deleting all the code between ''Start'' and ''End'' comments of the section.