Writer's Cafe Wizardry - Lesson 6

A Chapter by dw817

Reiterate about how to have messages pop-up over an image you have the cursor held on, the power of Header Text specifically for Writer's Cafe, and how to make text area for left- and right- images.

Writer's Cafe Wizardry - Ch 06

Want to read this in a different language ?
Change the TO field to your own country and click the TRANSLATE button after going HERE

LESSON SIX - July 16th 2013 < >

Good afternoon, class ! Let's begin.

As you may no doubt be aware, there are instances on the Internet where you can hover over an image or button and a little pop-up window will appear, like this:

If you hover your mouse over it, a message will appear. How can you do this for yourself ?

First off you should realize, you don't necessarily need to use Seamonkey for all your webpage editing needs, but you DO need to use it to make a single advanced element like this.

The simplest way to do it would be to create a new writing in Writer's Cafe. Then insert an image, either from a URL or from your hard-drive. Then click it so 9-squares appear around it. Press CTRL-C and then ALT-TAB to your Seamonkey webpage editor.

If you have not yet created a blank page, from there there select File, New, Composer Page.

Then press CTRL-V. Your image will appear. Now click on it in Seamonkey once. The same 9-squares appear showing it is selected. Now from Seamonkey's menu, select Insert, Image.

A dialog window will appear.

In there go to the Tooltip area and TYPE OUT what message you want to have POP UP when you hover the cursor over this image. Select OK when done. Now the image should still be highlighted so press CTRL-C, and ALT-TAB to return back to your Internet Browser page which has your Writer's Cafe new writing entry, and press CTRL-V.

You can check it by hovering your mouse over the image and can indeed see you have created a custom pop-up window that appears when the mouse tracks over the element.

* * *

The next lesson covers the little known HEADER elements that you can have in Writer's Cafe. First off you should be aware that a header on one website will not neccessarily appear as the same header for another. Especially if they are using CSS to modify the appearance of them.

In this case, Writer's Cafe has most definitely changed the Headers to a custom appearance, and you can use this to your advantage.

Here are the headers we'll cover:

Header One

Header Two

Header Three

Header Four

Header Five

As you can see, Header One and Header Two are treated quite uniquely. To create these directly in Writer's Cafe editor, you need only type, <h1> and the text you want followed by </h1> to end it.
Change for h2, h3, h4, and h5, as you like to get the other header appearances.

Remember as you are entering raw HTML in your message, you need to SAVE your message, and immediately re-edit it again to have it appear.

* * *

This last lesson is a useful and fun one. There are many occasions when you just can't find a wide image for your writing to fill the page across (and remember, you only have 688 pixels across for a WC writing)

So you find a long one, and because it is so narrow, wouldn't it be neat to have text to the side of it ?

Here is an example:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

To type this you will need:

<table style="border-color: #ff00ff; border-width: 4px;" cellpadding="4" cellspacing="2" border="4"><tbody><tr><td valign="center">{{TEXT TO TYPE}}</td><td valign="center"><img src="{{IMAGE}}"></td></tr></tbody></table>

Typed all as one line. And as you remember from previous lessons, {{IMAGE}} is the url image you want to have appear on the right-hand side and the {{TEXT TO TYPE}} is the information you want to have appear on the left.

The border-color and shading of the edges can be changed as well from the #ff00ff above. And as you remember from our previous lesson, this is a hexadecimal color entry.

Don't forget to SAVE and RE-EDIT it to have it all appear correctly !

That concludes today's lessons.

* * *

In the next lesson we'll learn how to add your own animated .GIFs (which you cannot upload directly in Writer's Cafe), a bit more information and definition about the HR command, and some sneaky techniques to recover your writing in case Writer's Cafe crashes or does not save it properly.

See you next week !