Basic HTML for Modules

Hyperlink
<a class="Hyperlink" title="Google Web site" target="_blank" href="http://google.com">Google Web site</a>

Here are the parts:
  • <a - opening tag 
  • class="Hyperlink" - This tells the system to use the default hyperlink style on the site styles for the link. 
  • title="Google Web site" - This is the alt tag for the hyperlink 
  • target="_blank" - This tells the hyperlink to open in a new window. Leave it out if you want it to open in the same window. 
  • href="http://www.google.com" - this is the address for the link. 
  • > - VERY IMPORTANT. Make sure you have this after the address, before the displayed text. 
  • Google Web site - This is the text that is displayed instead of the address. 
  • </a> - This part closes the hyperlink.

Email
<a class="Hyperlink" title="Email Homeland Security" href=mailto:abc@civicplus.com>Homeland Security</a>

Here are the parts you would use, similar to the hyperlink:
  • <a - opening tag 
  • class="Hyperlink" - This tells the system to use the default style from your site styles 
  • title="Email Homeland Security" - alt tag for the hyperlink 
  • href=mailto:abc.civicplus.com - email address you are wanting this to go to 
  • > - VERY IMPORTANT - Make sure you have this after the address, before the displayed text 
  • Homeland Security - Text you want to display 
  • </a> - This part closes the hyperlink

Bulleted Lists
If you want to do a bulleted list in any module follow the following steps and use this code around your list:

Text text text about whatever the module item is talking about
  • <ul> <-- this tag opens an unordered (bulleted) list. 
  • <li>First list item</li> <-- These two tags identify an item that needs a bullet 
  • <li>Second list item</li> 
  • <li>Etc.</li> 
  • </ul> <-- This tag closes the bulleted list

Staff Directory Biographies
When adding a photo AND a bio in the Staff Directory, use this procedure so the text will wrap around the picture.
  • Copy and paste <IMG style="MARGIN-BOTTOM: 8px; FLOAT: right; MARGIN-LEFT: 8px" class=simpleborder alt="alt" src="link"> in the bio box before any text.
  • Place the name of the person (or what you want as the alt text) in replacement of alt text 
  • Put a picture in the normal way (insert image button, etc.), select the image and hit 'insert selected image'. 
  • Copy the '/image' (image path) from the box below the buttons 'Insert Image' and 'Remove Image'. 
  • Paste the image path as a replacement for the link. 
  • Remove the image from the box by hitting the 'Remove Image' button. 
  • Add the biography after this skeleton code and the text will wrap around the image.