HTML Cheat Sheet

Common html tips for the blue 'Additional Instructions' boxes in email templates and several parts of the registration/abstract forms.  As always, make sure to test any HTML code you create from the user-perspective.  Just copy the bit of code you want to use including the '<' and '>' symbols, and replace any links/labels/etc. before inserting or saving.


Links


Link: 

*‘Click here to go to Google’ is the clickable text ‘button’ people would click on

<a href="http://google.com">Click Here to go to Google</a>


Link that opens in new tab/window:

<a href="http://google.com" target="_blank">Click Here to go to Google</a>


Email link:

<a href="mailto:help@confmanager.com">Click here to email Help</a>


Images 


*In the code below, XXX is your community id # (the CID).  It’s assumed you’ve uploaded the image to the Hidden folder

** If you are linking an image in a blue box for an email template, the link must contain the full address - so instead of this:  /communities/cXXX/files/hidden/sunset_photo.jpg  

it should be this: http://www.confmanager.com/communities/cXXX/files/hidden/sunset_photo.jpg

*** See bottom for file upload instructions, and remember - no spaces in the image file name


Image:

<img src="/communities/cXXX/files/hidden/sunset_photo.jpg">

Aligned: (can replace left with ‘center’ or ‘right’)

<img src="/communities/cXXX/files/hidden/sunset_photo.jpg" align="left">


Bordered Image: 

*Using the thinnest border: 1

<img src="/communities/cXXX/files/hidden/sunset_photo.jpg" border="1">

Bordered & aligned:

<img src="/communities/cXXX/files/hidden/sunset_photo.jpg" align="left" border="1">


Documents 


*In the code below, XXX is your community id # (the CID).  It’s assumed you’ve uploaded the document to the Hidden folder

** If you are linking a document in a blue box for an email template, the link must contain the full address - so instead of this:  /communities/cXXX/files/hidden/Program_schedule.pdf

it should be this: http://www.confmanager.com/communities/cXXX/files/hidden/Program_schedule.pdf

*** See bottom for file upload instructions, and remember - no spaces in the file name


Link to a document: 

*PDF files will open in a new tab/window; Word documents open on their desktop, asking them to download.  Replace ‘Program_schedule.pdf’ with the actual file name; ‘Click here for the program schedule’ is the clickable area, or ‘button’

<a href="/communities/cXXX/files/hidden/Program_schedule.pdf">Click here for the Program Schedule</a>


Text


Bold text:

<b>This text is bold when read in HTML.</b>


Red text:

*‘red’ is interchangeable with most colour names, or 6-digit HEX codes, in the code below

<font color="red">This text is red.</font>

 

Bigger/smaller text: 

* Ranging from increasing sizes 1-7

<font size="5">This text is large.</font>

 

Large, bold & red text:

<b><font size="5" color="red">Please do not use this form to submit a credit card payment.  Only use online payment for credit cards.</font></b>


Paragraphs & Line Breaks


Paragraph separation:

*Adds full paragraph spacing between text or content. Insert the following to the end of a paragraph where a new one should start:

<p>


Line breaks:

*Adds a single line break between text or content. Insert the following where you want a new line to start:

<br>


Lists


Bulleted:

<ul>

<li>Bullet 1</li>

<li>Bullet 2</li>

<li>Bullet 3</li>

</ul>

Numbered:

<ol>

<li>Item 1</li>
<li>Item 2</li>

<li>Item 3</li>

</ol>


More Tips


Web Monkey Full HTML Cheat Sheet



***Uploading an image or document to your site: 

1) While logged in as an Admin go to any content page (e.g. Homepage) and click the folder icon at the top

2) Click the Hidden folder link - not the checkbox (public users cannot change/edit/move 'Hidden' folder files)

3) Click ‘Upload a new file’ in the Actions box

4) Find and select the file on your computer (before uploading, be sure any spaces in the file name are removed or replaced with underscores/dashes)

5) Click ‘Upload’