Volunteer Software

People Helping People

HTML Basic Coding for the Web Assistant Messages

The Web Assistant settings accept a little HTML v3.2. It’s not really designed for HTML customizing so it’s kinda funky. You paste in the encoded text and then the message field incorporates and hides the tags and displays the formatted results. When you do a send and receive your changes are uploaded to the Web. We can’t help you with actually implementing this, but with a little trial and error you will be able to get the effect you want. The messages field has a limit of 254 characters, requiring economy of words and code.

  • With HTML tags, notice that there is [almost] always a beginning and ending tag.
  • The ending tag has a forward slash in it.
  • These tags encompass the affected text.
  • Inside the tags, the attributes, e.g., the hexadecimal number that encodes the color, are enclosed by quotation marks.
  • You can try using the word ‘red’ [or blue, navy, green] instead of the hexidecimal number. That might save you a few characters.
  • Knowing that, you can build any variation you want.

To change the font color in Web Assistant Settings

<FONT COLOR=”#FF0000″>your text</FONT> [= red text]
<FONT COLOR=”#008080″>your text</FONT> [= teal text]
<FONT COLOR=”#000080″>your text</FONT> [= navy text]
<FONT COLOR=”#0000FF”>your text</FONT> [= blue text]

To bold an item <B>text to bold</B> = text to bold [surround the text by the B tag]

To italicize an item <I>text to italicize</I> = text to italicize [surround the text by the I tag]

To increase the font size, +1 and +2 make the font larger in relationship to the normal font on the page to make bigger text and much bigger text.

<FONT SIZE=”+1″>bigger text</FONT> <FONT SIZE=”+2″>biggest text</FONT>

To combine a colored font with larger text, combine both the color and size attributes inside the FONT tag, like this:

<font size=”+1″ color=”#FF0000″>Here are some current job opportunities that need volunteers. Here you can look at them. When you [1] apply to be a volunteer, or [2] login after you get your username and password, then you can Register for an Event.</font>

Here are some current job opportunities that need volunteers. Here you can look at them. When you [1] apply to be a volunteer, or [2] login after you get your username and password, then you can Register for an Event.

Here is an exception with does NOT require two tags:
The BR tag is not a container tag. The BR tag makes a break so that the text following the tag goes to the next line. This is the effect of using several break tags throughout the text.

<font size=”+1″ color=”#FF0000″>Here are some current job opportunities that need volunteers.<BR>Here you can look at them. When you<BR>[1] apply to be a volunteer,or<BR>[2] login after you get your username and password,<BR>then you can Register for an Event.</font>

Here are some current job opportunities that need volunteers.
Here you can look at them. When you
[1] apply to be a volunteer,
or [2] login after you get your username and password,
then you can Register for an Event.

We run out of space quickly in the Web Assistant messages settings. In the message field you use up less space if you just include the <BR> tag inline to make a line break without hitting enter to give a visual line break.

You should type your text and HTML tags into a text program like Notepad rather than typing straight into the Web Assistant settings fields. And then copying and pasting the text into the settings in the Web Assistant. In the Reporter you cannot right-click to paste, but you can do Ctrl-V on the keyboard to paste.

[To open Notepad: Start | All Programs | Accessories | Notepad]

You can get some unintended results by pasting the text and code in from an email or Word. Microsoft often copies underlying code that we do not see – and the Web Assistant may read that code. You should not work in Word or Outlook, only a plain text program like Notepad. Regardless of how careful you are, your results also may not be consistent across different computers. The bane of making websites is that different browsers [even the same browser of a different computer] display text differently. Often the best you can do is check your page on different computers and strike a compromise to get close to what you want.

Numbered and Bulleted Lists

You can add a numbered, bolded list for emphasis. The 254 characters limit is the challenge.

  1. Check that your email address is correct
  2. Tell us your cell phone number

When you first write the code in Notepad, put in line breaks [enter] so that you can see the code easily.

<ol>
<li><font color=”#FF0000″><b>Check that your email address is correct</b></font></li>
<li><font color=”#FF0000″><b>Tell us your cell phone number</b></font></li>
</ol>

Before pasting it into the Web Assistant custom message field, take out the breaks and spaces between the code to run it all together for efficiency in the limited character field.

<ol><li><font color=”#FF0000″><b>Check that your email address is correct</b></font></li><li><font color=”#FF0000″><b>Tell us your cell phone number</b></font></li></ol>

Another example, this time with a bulleted list, for the Extra Application Informationmessage.

  • Make sure to include your email address.
  • Tell us your skills and interests.
  • Have you ever volunteered for us before?

<ul>
<li><font color=”#FF0000″><b>Make sure to include your email address.</b></font></li>
<li><font color=”#FF0000″><b>Tell us your skills and interests.</b></font></li>
<li><font color=”#FF0000″><b>Have you ever volunteered for us before?</b></font></li>
</ul>

Take out all the spaces and these three lines will barely fit.

<ul><li><font color=”#FF0000″><b>Make sure to include your email address.</b></font></li><li><font color=”#FF0000″><b>Tell us your skills and interests.</b></font></li><li><font color=”#FF0000″><b>Have you ever volunteered for us before?</b></font></li></ul>

BACK TO TUTORIALS