The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013

Transcription

1 INFORMZ USER GUIDE: The HTML Editor Version 1.0 January 13, 2013 ABOUT THIS GUIDE This guide provides an overview of the HTML editor used by Informz. This guide does not cover all aspects of the editor, but covers basic functionality, frequent user actions, and any known quirks discovered during testing. This guide can be used as a reference while learning how to create content with the editor. Page 1 of 34

2 CONTENTS INTRODUCTION... 4 BROWSERS... 4 GETTING TO KNOW THE EDITOR... 4 USER INTERFACE... 4 TOOLBAR OPTIONS... 5 KEY EDITOR FEATURES... 8 SOURCE CODE BUTTON... 8 CSS BUTTON... 9 UNLINK BUTTON... 9 HTML TAG NAVIGATOR... 9 USING THE HTML EDITOR TABLES HOW DO I INSERT A TABLE HOW DO I MODIFY A TABLE HOW DO I DELETE A TABLE HOW DO I CREATE NESTED TABLES HOW DO I MODIFY TABLE ROWS HOW DO I MODIFY TABLE COLUMNS HOW DO I SET DIFFERENT WIDTHS FOR TABLE COLUMNS HOW DO I MERGE TABLE CELLS HOW DO I SPLIT MERGED CELLS HOW DO I APPLY STYLING TO A SINGLE TABLE CELL HOW DO I APPLY A BORDER TO A TABLE HOW DO I ALIGN TEXT IN TABLES HOW DO I INSERT A HORIZONTAL LINE (HR TAG) INTO A TABLE CELL IMAGES HOW DO I INSERT IMAGES HOSTED EXTERNALLY HOW DO I WRAP TEXT AROUND AN IMAGE WITH PADDING HOW DO I PASTE IMAGES FROM AN EXTERNAL SOURCE HYPERLINKS HOW DO I INSERT HYPERLINKS HOW DO I UPDATE HYPERLINKS Page 2 of 34

3 HOW DO I APPLY COLOR TO A HYPERLINK HOW DO I APPLY A COLOR AND BOLD A HYPERLINK HOW DO I REMOVE THE UNDERLINE FROM A HYPERLINK BULLETED OR NUMBERED LISTS HOW DO I CREATE SINGLE-LEVEL BULLETED or Numbered LISTS HOW DO I CREATE MULTI-LEVEL BULLETED LISTS PASTING CONTENT HOW DO I PASTE WITH FORMATTING HOW DO I PASTE AS PLAIN TEXT HOW DO I PASTE HTML CODE KEYBOARD SHORTCUTS: CUT, COPY, AND PASTE HOW DO I CUT CONTENT HOW DO I COPY CONTENT HOW DO I PASTE CONTENT USING THE CSS BUTTON HOW DO I USE THE TEXT & COLOR TAB HOW DO I USE THE BLOCK TAB HOW DO I USE THE BOX TAB HOW DO I USE THE BORDER TAB HOW DO I USE THE LIST TAB LEARN MORE Page 3 of 34

4 INTRODUCTION Informz integrates with a third-party HTML editor, TinyMCE, to create content, story layouts, templates, and more. This HTML editor is JavaScript based, and therefore does not require additional plug-ins installed to use. BROWSERS Informz s recommended browser is Firefox, but the editor has been tested by Informz in the following browsers: Firefox ( version 25.0 and newer) Chrome Internet Explorer 9 The HTML editor will certainly work in other browsers, but since each browser handles HTML code differently, there is no guarantee that all the features will work perfectly. GETTING TO KNOW THE EDITOR After a search for the most reliable and feature-rich HTML editor, the editor was selected by Informz because of its ease-of-use and features. The editor allows users with limited or no HTML knowledge to create visually pleasing content and templates, while those with more advanced HTML skills can work directly in the source code. USER INTERFACE The editor s interface is clean and sleek, with large solid black icons on a grey gradient background. Each icon displays a tooltip bubble when hovering over the icon with the mouse cursor. Page 4 of 34

5 TOOLBAR OPTIONS ICON/BUTTON TOOL TIP TEXT DESCRIPTION KEYBOARD SHORTCUT Cut Cut selected content CTRL+X Copy Copy selected content CTRL+C Paste Paste cut/copied content CTRL+V ADDITIONAL NOTES Button does not work in newer browsers; must use keyboard shortcut Button does not work in newer browsers; must use keyboard shortcut Button does not work in newer browsers; must use keyboard shortcut Paste as Text Paste content as plain text N/A Undo Undo the last action CTRL+Z Redo Redo the last action CTRL+Y Font Family List of available fonts N/A Button enabled only when action is available Button enabled only when action is available Contains web-safe fonts and fonts defined on the Informz font page Font Sizes List of font sizes available N/A Contains font sizes in points Bold Bold text CTRL+B Italic Italicize text CTRL+I Underline Underline text CTRL+U Strikethrough Strikethrough text N/A Subscript Subscript the text N/A Superscript Superscript the text N/A Text Color Background Color Set text color of selected content Set background color of selected content N/A N/A Menu displays: Custom colors defined in the Color section of Informz 40 predefined colors A text field to enter HEX code Menu displays: Custom colors defined in the Color section of Informz 40 predefined colors Text field to enter HEX code Edit Style Apply inline CSS styling to selected content N/A Page 5 of 34

6 Source Code Open the HTML code view N/A Align Left Left align selected content N/A Align Center Center align selected content N/A Align Right Right align selected content N/A Bullet List Numbered List Decrease Indent Increase Indent Create or modify a bulleted (unordered) list Create or modify a numbered (ordered) list Decrease the paragraph or list indent Increase the paragraph or list indent N/A N/A N/A N/A Block Quote Set text as block quote N/A Preferred method to indent Insert/Edit Table Insert/Edit Image Insert, edit, and delete a table Insert an image N/A N/A Bookmark Insert a bookmark N/A Insert/Edit Hyperlink Unlink Insert a hyperlink Remove hyperlink from content N/A N/A Horizontal Line Insert a horizontal rule or line N/A Special Character Insert a special character or symbol N/A Social Networking Insert social networking icons N/A Allows subscribers to share content of the mailing Personalization Insert Informz/remote personalization codes N/A Content Codes Insert Informz content codes N/A Informz custom button Content Manager Insert the body or summary of an active Content Manager story N/A Informz custom button RSS Feeds Insert RSS feed content N/A Informz custom button Story Layouts Insert a Story Layout N/A Only available in Mailing Designer Page 6 of 34

7 Multi Doc Upload Upload multiple documents and automatically insert links N/A Only available in Mailing Designer Find and Replace Find and replace text CTRL + F Clear Formatting Removes formatting from content N/A Text Version Recreate or edit the text version Page 7 of 34

8 KEY EDITOR FEATURES The HTML editor offers similar features to those found in a word-processing application, but also includes a few key features that make content creation even easier. SOURCE CODE BUTTON The Source Code button allows quick access to the HTML code of the content. When the button is clicked, the source code (HTML) loads in a separate window on top of the editor. Tips & Tricks When opening the Source Code window, the position of the cursor and the highlighted HTML code is the location of the cursor in the Editor view. Features of the Source Code view include the following: HTML editing Color-coded HTML tags Find & replace buttons Automatic cursor positioning and highlighting when switching from Editor view to Source Code view Page 8 of 34

9 CSS BUTTON The CSS button provides a way to apply inline styles to any HTML element through an easy-to-use dialog window without requiring advanced HTML or CSS knowledge. To use this feature, highlight the content, then click the CSS button. When the Style window opens, define the styling for the selected content, and then click the Update button. The HTML code for the selected content will update to include the newly defined inline CSS style. To learn about the CSS button and each tab in the dialog, see the Using the CSS Button section in this document. UNLINK BUTTON The Unlink button provides a quick way to remove unwanted hyperlinks from the content without altering the code directly. To use this button, highlight the hyperlinked content and click the Unlink button. The hyperlink HTML code is removed without removing the text itself. HTML TAG NAVIGATOR The HTML tag navigator provides an easy way to select an HTML tag without the need for highlighting content. To use this feature, place your cursor in the content, then select the tag from the HTML tag navigator at the bottom of the window. This ensures the correct HTML tag is selected. This is very helpful when styling HTML elements using the CSS toolbar button. Page 9 of 34

10 USING THE HTML EDITOR Not all HTML editors behave the same or offer the same tools. This editor is no exception. The following sections will cover some of the popular How Do I questions. TABLES HOW DO I INSERT A TABLE 1. Place the cursor in the content area. 2. Click on the Table toolbar button to open the sub-menu. 3. Select Insert Table to open the grid. 4. Highlight the number of rows and columns to include in the table and click. HOW DO I MODIFY A TABLE 1. Select the table within the content. 2. Right-click on the table or click the Table toolbar button. 3. Select the Table Properties menu option. 4. Modify the table properties. 5. Click OK. Tips & Tricks To quickly select a table, place the cursor in a table cell then select the word, table, from the HTML tag navigator found in the lower section of the editor. Page 10 of 34

11 HOW DO I DELETE A TABLE 1. Select the table within the content. 2. Right-click on the table or click the Table toolbar button. 3. Select the Delete Table menu option. HOW DO I CREATE NESTED TABLES 1. Place the cursor in the content area. 2. Click on the Table toolbar button to open the sub-menu. 3. Select Insert Table to open the grid. 4. Highlight the number of rows and columns to include in the nested table and click. 5. When the table is inserted into the content area, place the cursor inside a table cell. 6. Repeat steps 2-4. Tips & Tricks Use the CSS button to apply padding to tables or individual table cells. Page 11 of 34

12 HOW DO I MODIFY TABLE ROWS ADD ROWS 1. Place the cursor in a table cell. 2. Right-click on the table or click the Table toolbar button. 3. Select the Row menu option to open a sub-menu. 4. Select either Insert row before or Insert row after. ADDITIONAL ROW OPTIONS Before selecting any of the following row option, be sure to place the cursor in the table row that will be affected. 1. Delete Row: Use this when a table row needs to be removed from the table permanently. 2. Cut Row: Use this option when the row s content is accurate but the row needs to be shifted up or down in the table. 3. Copy Row: Use this option when a table row needs to be duplicated in the table. 4. Paste Row Before/Paste Row After: Use either option when a copied or cut table row needs to be added back into the table. 5. Row Properties: Use this option to adjust the height or alignment of the table row. HOW DO I MODIFY TABLE COLUMNS ADD COLUMNS 1. Place the cursor in a table cell. 2. Right-click on the table or click the Table toolbar button. 3. Select the Column menu option to open a sub-menu. 4. Select either Insert column before or Insert column after. DELETE COLUMNS 1. Place the cursor in a table cell. 2. Right-click on the table or click the Table toolbar button. 3. Select the Column menu option to open a sub-menu. 4. Select Delete column. Page 12 of 34

13 HOW DO I SET DIFFERENT WIDTHS FOR TABLE COLUMNS 1. Insert a table with multiple columns. 2. Highlight all the cells in a column. 3. With the cells highlighted, right-click to open a menu. 4. Select Cell, then Cell Properties. 5. In the width field, add the column width in pixels. HOW DO I MERGE TABLE CELLS 1. Highlight the cells to merge. 2. Right-click on the table or click the Table toolbar button. 3. Select the Cell menu option to open a sub menu. 4. Select Merge Cells. HOW DO I SPLIT MERGED CELLS 1. Place the cursor in the recently merged table cell. 2. Right-click on the table or click the Table toolbar button. 3. Select the Cell menu option to open a sub menu. 4. Select Split Cells. The split cells option will only work on cells previously merged. Page 13 of 34

14 HOW DO I APPLY STYLING TO A SINGLE TABLE CELL 1. Place the cursor in the table cell. 2. Select the td tag found in the HTML tag navigator section of the editor. When selected, the table cell will appear to have a grey border around it. 3. With the table cell highlighted, click the CSS toolbar button to open the style dialog. 4. Apply the desired styling to the table cell. To learn how to use the CSS button and each tab in the dialog, read through the Using the CSS Button section. HOW DO I APPLY A BORDER TO A TABLE 1. Insert a table. 2. Select the table (sizing handles or boxes will appear around the table). To ensure that the table is selected, click on the table element in the HTML tag navigator. 3. Click the CSS toolbar button. 4. When the Style dialog opened, select the Border tab: a. STYLE: Select the style border (solid, dashed, dotted) b. WIDTH: Select the thickness of the border ( 1= thinnest) c. COLOR: Select the color for the border Page 14 of 34

15 If all four sides of the border should look the same, make sure the Same for All checkbox is selected and the Top row is filled out for style, width, and color. If each side will have a different style or no border at all, uncheck the Same for All checkbox and set the style, width, and color for each side. If a border is not required on a side, leave all fields for that side blank. HOW DO I ALIGN TEXT IN TABLES METHOD 1: USING CELL PROPERTIES 1. Insert a table. 2. Place the cursor in a table cell. 3. Right-click to open a menu. 4. Select Cell and then Cell Properties. 5. Set the Alignment field. Page 15 of 34

16 METHOD 2: USING THE CSS TOOLBAR BUTTON 1. Insert a table. 2. Select the Table toolbar button. 3. With the table selected, click the CSS toolbar button. 4. When the Style dialog opens, select the Block tab. 5. Select an alignment in the Text Align field. This will apply the text align style to the table cell. HOW DO I INSERT A HORIZONTAL LINE (HR TAG) INTO A TABLE CELL 1. Insert a table. 2. Add content into a table cell. 3. Position the cursor at the location for the horizontal line. 4. Click the Insert Horizontal Line icon. If the horizontal line is added to the table cell before the content, the editor only allows content to be added after the line, not before it. Page 16 of 34

17 IMAGES HOW DO I INSERT IMAGES HOSTED EXTERNALLY 1. Outside of Informz, copy the full URL of the image hosted externally. (example: 2. In the Informz HTML editor, click the Image toolbar button. 3. Paste the full URL in the Image URL field. 4. If necessary, set the image properties (Alt Text, Alignment or Display). 5. Click the Insert button. 6. The image is inserted into the content without having to be uploading into Informz. Page 17 of 34

18 HOW DO I WRAP TEXT AROUND AN IMAGE WITH PADDING 1. Insert a 1 x 1 table at the beginning of a paragraph. 2. Insert an image into the table cell. 3. Select the table to display the square handles in each corner. 4. Select a corner handle and drag the table height and width to match the size of the image. Page 18 of 34

19 5. With the table selected, open the Table Properties dialog. a. Add a numeric value to the Cell Padding field (the greater the number, the greater the whitespace). b. Set the Alignment field to Left or Right. c. Click on the OK button. 6. The table with the image shifts to the right with the text wrapping around it. HOW DO I PASTE IMAGES FROM AN EXTERNAL SOURCE Images cannot be copied from an external source and pasted into the HTML editor. To insert images into the content, images must be uploaded into the Asset Manager and then inserted, or if hosted externally the URL can be added into the Insert Image dialog. Page 19 of 34

20 HYPERLINKS HOW DO I INSERT HYPERLINKS 1. Highlight the content to link. 2. Click the Hyperlink toolbar button. 3. Select the type of hyperlink and complete the form. HOW DO I UPDATE HYPERLINKS There are a few ways to update the web address of an existing hyperlink in the content: METHOD 1 1. In the content, highlight the entire link. Avoid highlighting extra spaces or characters. 2. Click the Hyperlink toolbar button. 3. Update the web address. 4. Click the Insert Hyperlink button. METHOD 2 1. Place the cursor in the hyperlink. 2. Select the a tag from the path HTML tag navigation section. The hyperlink will automatically highlight. 3. Click the Hyperlink toolbar button. 4. Update the web address. 5. Click the Insert Hyperlink button. METHOD 3 1. In the content area, place the cursor in the hyperlink. 2. Click the Hyperlink toolbar button. 3. Update the web address. 4. Click the Insert Hyperlink button. Page 20 of 34

21 HOW DO I APPLY COLOR TO A HYPERLINK METHOD 1: USING THE TOOLBAR OPTION, FONT COLOR 1. Place the cursor in the hyperlink. 2. Click the a tag from the HTML tag navigator section located below the content region. This will highlight the entire hyperlink. 3. With the link highlighted, click the Text Color toolbar button to expand the color list. 4. Select a color from the menu or enter the color in the HEX color code. When the color is applied to the link, the color is added as an inline style on the link tag. METHOD 2: USING THE CSS TOOLBAR OPTION 1. Place the cursor in the hyperlink. 2. Click the a tag from the HTML tag navigator located below the content region. This will highlight the entire hyperlink. Something to Note When changing the color of text that contains a previously colored hyperlink, the color of the hyperlink may take on the same color as the text. If this happens, simply reapply the color to the hyperlink. 3. With the link highlighted, click the CSS toolbar button. 4. In the Style dialog window, update the Color field with the desired color 5. Click the Update button. When the color is applied to the link, the color is added as an inline style on the link tag. Page 21 of 34

22 HOW DO I APPLY A COLOR AND BOLD A HYPERLINK METHOD 1: USING THE FONT COLOR AND BOLD TOOLBAR OPTION 1. Place the cursor in the hyperlink. 2. Click the a tag from the HTML tag navigator section. This will highlight the entire hyperlink. 3. With the link highlighted, click the Text Color toolbar button to expand the color list. 4. Select a color. 5. With the link still highlighted, click on the B (bold) icon. METHOD 2: USING THE CSS TOOLBAR OPTION Tips & Tricks If the link is bolded first and then the color is applied, the editor will apply the color to the bold tag (<strong>) and not the hyperlink tag. This may result in unwanted styling. 1. Place the cursor in the hyperlink. 2. Click the a tag from the HTML tag navigator section. This will highlight the entire hyperlink. 3. With the link highlighted, click the CSS toolbar button. 4. In the Style dialog window, update the following fields: a. Weight = bold b. Color = desired color 5. Click the Update button. When the color and weight are applied to the link, the styles are added as inline styles on the link tag. Page 22 of 34

23 HOW DO I REMOVE THE UNDERLINE FROM A HYPERLINK 1. Place the cursor in the hyperlink. 2. Click the a tag from the HTML tag navigator section. This will highlight the entire hyperlink. Tips & Tricks The CSS style dialog is a handy tool when needing to change the font, the color or the decoration of a hyperlink. 3. With the link highlighted, click the CSS toolbar button. 4. When the Style dialog opens, go to the Text tab. 5. In the Decoration section, check the box for NONE. 6. Click Update to save styling. Page 23 of 34

24 BULLETED OR NUMBERED LISTS HOW DO I CREATE SINGLE-LEVEL BULLETED OR NUMBERED LISTS METHOD 1 1. Place the cursor on a new line (paragraph). 2. Click the Bulleted List toolbar button or the Numbered List toolbar button. 3. When the bullet appears, begin typing. 4. Hit the <ENTER> key to start a new bullet item in the list. METHOD 2 1. Type the first list item. 2. Hit the <ENTER> key to start a new bullet item 3. Repeat until all list items appear. 4. Highlight all items for the list. 5. Click the Unordered or Ordered List toolbar button to create the bulleted list. Page 24 of 34

25 HOW DO I CREATE MULTI-LEVEL BULLETED LISTS 1. Highlight all the lines of text that should be in the list. 2. Click on the Ordered List or Unordered List toolbar button. 3. Place the cursor at the beginning of the line that needs to be indented. 4. Click the Increase Indent toolbar button. This will shift the bulleted line to the right and will change the bullet to the next level bullet. Page 25 of 34

26 PASTING CONTENT HOW DO I PASTE WITH FORMATTING When copying formatted content, paste the content into the editor by holding down the CRTL (Control) key while pressing on the letter V. Things to know about the paste function: 1. Images will not paste into the editor. Images must be uploaded into the Asset Manager and inserted into the editor. 2. Basic HTML elements will paste into the editor. These elements include tables, bold or italic text, hyperlinks, paragraphs, lists, etc. 3. Basic styling will paste into the editor. These styling attributes include font, font color, font size, and background color. Tips & Tricks If the styling (colors, fonts, etc) is not quite right, remove the existing formatting by highlighting the content and selecting the Clear Formatting toolbar button. HOW DO I PASTE AS PLAIN TEXT When style and structure of the external content is not wanted, turn on the Paste as Text function before pasting the content into the editor. 1. Click the Paste as Text toolbar button 2. Click the OK button from the informational dialog. 3. Paste copied content into the editor by holding down the CRTL key while pressing on the letter V. 4. After pasting is complete, deselect the Paste as Text button so it has the lighter grey background. 5. Format and style content. What to know about the Paste as Text function: 1. Styling (colors, fonts, etc) will be stripped out of the content. 2. HTML elements (tables, links, bold tags, etc.) will be stripped from the content. 3. This function creates a plain canvas so there is more control over the styling within the editor. Page 26 of 34

27 HOW DO I PASTE HTML CODE Content created in an external web editor can be pasted into the editor as HTML code. 1. Copy external HTML code. 2. Click on the Source Code toolbar button to open the source code window. 3. Paste HTML code into the Source Code window. 4. Click the Update button to save the code and to return to the editor view. KEYBOARD SHORTCUTS: CUT, COPY, AND PASTE In newer, more modern browsers such as Firefox, the browser blocks the functionality of the Cut, Copy, and Paste buttons, leaving only the keyboard shortcuts as the only method to perform these options. The following sections explain how to use these keyboard shortcuts. HOW DO I CUT CONTENT 1. Highlight the content. 2. Hold down the CTRL key while pressing the X key. Page 27 of 34

28 HOW DO I COPY CONTENT 1. Highlight the content. 2. Hold down the CTRL key while pressing the C key. HOW DO I PASTE CONTENT 1. Highlight the content. 2. Hold down the CTRL key while pressing the V key. Page 28 of 34

29 USING THE CSS BUTTON The CSS button provides a way to apply inline CSS to HTML elements without needing to write or even know how to write HTML or CSS code. To use the CSS button use these steps: 1. Highlight the content or select an element in the HTML tag navigator. 2. Click the CSS toolbar button. 3. Customize the look of the content by setting different options within the Style dialog. The following sections breakdown each tab in the Style dialog. HOW DO I USE THE TEXT & COLOR TAB The Text & Color tab is used to define the look of the content. OPTION Font Size Line Height Decoration Weight Style Color Background Color USE Defines the type of font. The dropdown list contains web-safe fonts and Informz defined font*. Defines size of the content. A numeric value must be added to the first field, followed by selecting a unit type. Define the white space between the lines. A numeric value must be added to the first field, followed by selecting a unit type Defines the type of line decoration to apply to the content. This is useful when removing the underline from a hyperlink. Defines the boldness of the selected content. Defines the font styling (italic, oblique). Defines the color of the selected content. Click in the color text field to open a color picker or type in the HEX code. Defines the background color of the selected content (including tables). Click in the color text field to open a color picker, or type in the HEX code. *Informz defined font: To add to the font dropdown list, go to Mailings- -> Templates--> Fonts. Page 29 of 34

30 HOW DO I USE THE BLOCK TAB The Block tab is used to format the alignment and the spacing of text. OPTION Display Text Align Vertical Align Word Spacing Letter Spacing Text Indent USE Defines the positioned of the selected content. Useful for images. Block will position an image on its own line, while Inline will keep the image positioned in the middle of another HTML tag. Defines the left, right, or center alignment of the selected content. Defines the vertical alignment (top, bottom, etc). Useful when the content in a table cell needs to be shifted to the top. Defines the white space between each word of the selected content. Defines the white space between each letter of the selected content. Defines the indentation of the selected content. Useful for when the Indent toolbar option doesn t indent the right amount. Page 30 of 34

31 HOW DO I USE THE BOX TAB The Box tab is used to format a block of content, such as paragraphs or tables. OPTION Padding USE Defines white space above, below, or to the sides of a table cell, paragraph, or any HTML element. To apply the same padding for all four sides: Check the box for Same for All and enter a numeric value in the text field for Top, followed by a unit selected from the dropdown field. This value is applied to all sides. To apply different padding to each side: Uncheck the Same for All checkbox. Enter the numeric value and select a unit for each side that needs padding. If a side is left blank, no extra padding is applied. Margin Defines the exact placement of content, as well as the size of the container the content resides in. To apply the same,margin for all four sides: Check the box for Same for All and enter a numeric value in the text field for Top followed by a unit selected from the dropdown field. This value will be applied to all sides. To apply different margins to each side: Uncheck the Same for All checkbox. Enter the numeric value and select a unit for each side that needs padding. If a side is left blank, no extra margin spacing will be applied. Page 31 of 34

32 HOW DO I USE THE BORDER TAB The Border tab is used when borders are required on any four sides of an HTML element, such as a table cell. OPTION Style USE Defines the appearance of the border line. To set the same style for all four sides: Check the Same for All box and select a style from the top dropdown. To set different styles for each side: Uncheck the Same for All checkbox and select a style for the necessary side. Width Defines the thickness of the border line. To set the same width for all four sides, check the Same for All box, then enter a numeric value in the top field and select the unit. Page 32 of 34

33 To set different width for each side, Uncheck the Same for All checkbox and select a style for each side. Color Defines the color of the border line. To set the same color for all sides: Check the Same for All checkbox and select a color from the top field. To set different colors for each side: Uncheck the Same for All checkbox and select a color for the side(s). IMPORTANT NOTE: To define a single side, the full row must be defined. For example, if Top and Bottom have a style, the Top and Bottom must also have a width and color. Page 33 of 34

34 HOW DO I USE THE LIST TAB The List tab can be used to define the placement of the bullet or the type of bullet. OPTION Type Position USE Defines the type (disc, square, none) of the List item. Defines the position (inside or outside) of the bullet icon for the List item. Inside will add a little extra indentation to the list. LEARN MORE If you would like to learn more about CSS styling and how to use each attribute, please visit: For more information or for helpful tips and tricks, please contact your emarketing Advisor. Page 34 of 34