Writing Emails with the HTML editor

From HostBaby Wiki

Jump to: navigation, search

Contents

What the Buttons Do

htmledit1.png

Row 1 (From top left to right)

  • Bold Click this button or type Ctrl-B to bold the text you type. Click the button again to end bolding the text. You can also select text and click the button to bold the selected text.
  • Italic Click this button or type Ctrl-I to italicize the text you type. Click the button again to end italicizing the text. You can also select text and click the button to italicize the selected text.
  • Underline Click this button or type Ctrl-U to underline the text you type. Click the button again to end underlining the text. You can also select text and click the button to underline the selected text.
  • Left Justify Click this button to left-justify (align text to the left margin) the text you type. You can also select text and click the button to left-justify the selected text.
  • Center Justify Click this button to center (align text to the center of the field) the text you type. You can also select text and click the button to center the selected text.
  • Right Justify Click this button to right-justify (align text to the right margin) the text you type. You can also select text and click the button to right-justify the selected text.
  • Block Justify Click this button to block-justify (align text to both margins) the text you type. You can also select text and click the button to block-justify the selected text.
  • Paragraph Use this to select different heading sizes and styles
  • Font Size Use this pull-down menu to select a font to use for your text. Your theme already uses a default font, so selecting a font here will override the default for your page. The fonts available in the list are ones that are available on most computers.
  • Size Use this pull-down menu to select a relative size for your text. Your theme already has a default font size, so selecting a size from this menu will either increase or decrease the font size.
  • Text Color Click this button to change the text color. A color-selection menu will allow you to select the new text color. You can also select text and click this button to change the color of the selected text.
  • Background Color Click this button to change the background color. A color-selection menu will allow you to select the new background color. You can also select text and click this button to change the background color for the selected text.

htmledit1.png

Row 2 (2nd row of buttons. Left to Right)

  • Cut Click this button or type Ctrl-X to remove the selected content to the clipboard.
  • Copy Click this button or type Ctrl-C to copy the selected content to the clipboard.
  • Paste Click this button or type Ctrl-V to insert the contents of the clipboard at position of the cursor.
  • Find Click this button to search for text in the field. A pop-up window will open to allow you to enter the text you want to search for.
  • Replace Click this button to search for text in the field and replace it with alternate text.
  • Undo Click this button to undo your most recent changes. You can Configure how many undo steps the editor will keep.
  • Redo Click this button to redo changes you've undone.
  • Bullet list Create a list with bullet points
  • Numbered List Create a numbered list
  • Insert Horizontal Line Click this button to insert a horizontal line at the cursor.
  • Indent left
  • Indent right
  • Insert/Edit Link Click this button to insert a link to an HTML page or an anchor.
  • Remove Link Click this to remove a link
  • Broom Cleans up messy code
  • Erase
  • HTML HTML source editor


htmledit1.png

Row 3 (3nd row of buttons. Left to Right)

  • Table Use this to create a table with rows and columns
  • Table Row Properties Once you create your table you can configure the rows
  • Cell Properties You can set your individual cell properties
  • Add Row Top
  • Add Row Bottom
  • Add column Left
  • Add Column Right
  • Add Column Center
  • Merge Table Cells
  • Merge Table Colums & Rows
  • Subscript Creates small text just below regular text
  • Superscript Creates small text just above regular text
  • Select Custom Characters You can select custom characters not found on your keyboard.
  • Happy Face Insert an emoticon so your recipients know what your mood is.
  • Insert/Edit Image Click this button to insert an image, or select an image and click this button to edit that image's properties.



A new HTML editor was added to Listbaby on January 25th, 2009. These are some of the questions people have been asking about it...

The images don't show up when I read my email

This is the expected behavior. Right now you can only add "remote" images to your emails.. eventually we plan on adding the ability to upload images and embed them in your mails as attachments, but that's probably still a ways off (it's a lot harder than it sounds).

Still, what you're seeing is basically how every other mailing list in the world works.. if you're on some other mailing lists then I'm sure you've seen the "removed for security reasons" image if you use the webmail, or a privacy notice about "remote images" if you use an email program. You have to click "View Unsafe Images" in our webmail to show the hidden images. Other email programs or webmails have the same exact feature, although it's usually called something different (but they *all* hide these images by default).

I wouldn't worry too much about it.. people who have experience with their email know how to show the images, but if you want you can always include a note in your mail saying something like "Add me to your address book/whitelist or tell your mail program to show remote images to see the full email" .. or something like that.

See also: http://www.campaignmonitor.com/blog/post/2559/current-conditions-and-best-pr-1/


The sentences/paragraphs are too wide when reading

Listbaby now simply won't manually word-wrap your text like it used to in the plain-text version.. the width of your paragraphs will be as wide as the email body window of the person reading it. They can adjust the width themselves by simply resizing their window (the old plain text mails would start looking really bad if you resized too small, this is no longer the case).

I'm on the fence about applying a global "fix" for this. I'm leaning towards not, since forcing a width may actually break emails for some people who take advantage of all that free space. Maybe we could use a shortcut though.. not sure yet.

If you want to force a shorter overall width for your mail right now, what you can do is:

  • click the "Insert a new table" icon on the toolbar -- it's the left-most one on the bottom row, and set it up like:
    • Cols: 1
    • Rows: 1
    • Width: this is up to you.. around 450 (pixels) is pretty common, or you can do a percentage like 70%
    • (you can leave the other options as-is)
  • type/paste your email contents *inside* of this table.. the paragraphs will then wrap at width you specified (this probably won't be obvious until you see the test emails).


I liked the way the old mails looked, can I go back to that editor?

No but you can recreate the same basic look by applying the table width fix I mentioned above and set your Font Family to: Courier New.


What else can I do?

Do you have Microsoft Word or some similar-type word processor? Try composing your mail in there, then select all and copy+paste into Listbaby.. it *should* preserve most/all of the formatting.

If you have web design software, you can try composing your email in one of those. Copy+pasting may not work directly, but you can click the "HTML" button on the Listbaby editor toolbar and paste in all the raw HTML code.

Personal tools