The Custom Content Editor has the ability to do a very limited amount of text formatting. If you wish to have a few more advanced layout features, you can choose to write the HTML formatting yourself. This topic should help you learn the supported HTML tags and CSS attributes that can be used as well as examples that you can copy and paste.
Supported HTML Tags
- Font, size, color
<font> - Bold, Italic, Underline
<strong>, <b>, <em>, <i>, <u> - Subscript, Superscript
<sub>, <sup> - Lists
<ol>, <ul>, <li> - Organize the text in paragraphs
<div>, <span>, <p>, <center> - Line Break (Hard Return)
<br>
All HTML tags (except for <br>) must have have a closing tag. For example, to make a sentence bold, you could type: <strong>This text is bold.</strong> where the “/” indicates the closing part of the tag.
Supported CSS Attributes
- background-color
- border, border-color, border-width, border-style
- text-align (center, left, right, justify), text-decoration (none, underline, line-through)
- text-indent (note: should be specified on a block item)
- font-family, font-size, font-weight
- padding, padding-bottom, padding-top, padding-right, padding-left
- color
How To Copy Custom HTML Code Into a Section
If custom HTML is used, it is recommended not to use the Custom Content Editor. Custom HTML should be created/edited outside of The Complete AAP 12 software and then pasted into the “Content” value for a section. A very short video below shows how this can be done easily.
- Start a text editing program like Notepad (without wordwrap). Microsoft Word is NOT recommended.
- Type in (or paste) your custom HTML code. Remember that only a limited subset of HTML is allowed.
- Copy the HTML code to your Windows clipboard (Ctrl, C).
- In The Complete AAP 12 software, click the gear icon next to the Section’s name.
- Paste the HTML code into the “Content” option.
- Close the options window.
- Publish/preview the section.
- If additional editing needs to be done, repeat these steps.
Example : Normal Paragraph
Paragraphs should start with a <p> tag and end with a </p> tag. In the example code below, the text will be in a Verdana font because no text styling is in the tag.
Example Code : (copy & paste)
<p>This is a simple paragraph.</p>Example Output :
 |
|---|
Example : Indented Paragraph (First Line Only)
Paragraphs can be indented by adding a style attribute to the <p> tag. This example will indent the first line of a paragraph. When the text extends to the end of the page, it will wrap and then next line will not be indented. This example uses an indentation of 40 pixels, but that number can be changed to a higher or lower integer value depending on your requirements.
Example Code : (copy & paste)
<p style="text-indent: 40px;">This is a sample indented paragraph.</p>Example Output :
 |
|---|
Example : Indented Paragraph (All Lines)
This example will indent all lines of a paragraph. When the text extends to the end of the page, it will wrap and then next line will also be indented. This example uses an indentation of 40 pixels, but that number can be changed to a higher or lower integer value depending on your requirements. The image below shows the middle paragraph with this “padding-left” attribute and the other paragraphs are normal.
Example Code : (copy & paste)
<p style="padding-left: 40px;">This is a sample indented paragraph.</p>Example Output :
 |
|---|
Example : Centered Paragraph
Centered paragraphs can be created by placing a text-align: center; style attribute in the <p> tag.
Example Code : (copy & paste)
<p style="text-align: center;">This is a centered paragraph.<br>And a second forced line because of a line break tag.</p>Example Output :
 |
|---|
Example : Justified Paragraph
Justified paragraphs can be created by setting the text-align: style attribute of the paragraph to justify.
Example Code : (copy & paste)
<p style="text-align: justify;">This is a justified paragraph. The second sentence should wrap around to the next line automatically because it is a very long run-on sentence.</p>Example Output :
 |
|---|
Example : Paragraph With A Defined Font
The text in a paragraph can use any Windows system font. With CSS style attributes, you can define a paragraph’s font, size and even the color.
Example Code : (copy & paste)
<p style="font-family: 'Times New Roman'; font-size: 18pt;">This paragraph uses the <b>Times New Roman</b> font at a size of 18pt.</p>Example Output :
 |
|---|
Example : Ordered List
Ordered lists can be created by using the <ol> tag. Each item in the list should use a <li> tag.
Example Code : (copy & paste)
<p>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
</p>Example Output :
 |
|---|
Example : Unordered List
Unordered lists (bulleted lists) can be created by using the <ul> tag. Each item in the list should use a <li> tag.
Example Code : (copy & paste)
<p>
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
<li>Unordered List Item 3</li>
</ul>
</p>Example Output :
 |
|---|
Example : Ordered List (With Padding)
Ordered lists with padding beneath each item to separate them a bit can be created by using the <ul> tag. Each item in the list should use a <li> tag with a CSS style attribute applied. This example puts 10 pixels of padding under each item and justifies the items.
Example Code : (copy & paste)
<p>This is an example of an ordered list with a bit of padding (10 pixels) under each item to separate them a little bit. The items are also justified.
<ol>
<li style="padding-bottom: 10px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor. Ornare suspendisse sed nisi lacus sed viverra tellus in hac.</li>
<li style="padding-bottom: 10px; text-align: justify;">Aliquam malesuada bibendum arcu vitae elementum. Risus commodo viverra maecenas accumsan lacus. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum.</li>
<li style="padding-bottom: 10px; text-align: justify;">Quam nulla porttitor massa id neque aliquam vestibulum. Arcu felis bibendum ut tristique et egestas quis. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Sed euismod nisi porta lorem mollis aliquam ut.</li>
</ol>
</p>Example Output :
 |
|---|
Dynamic Variables
There are many dynamic variables that can be placed in the text and The Complete AAP 12 will replace the variable with the appropriate value when the report is published.
Dynamic Variables : (These can be typed in or can be copied & pasted into your HTML.)
[Company Name]
[Company Identifier]
[Directory Stub]
[Location Code]
[Location Name]
[Address Line 1]
[Address Line 2]
[City]
[State]
[Zipcode]
[Zip]
[Plan Date (Beginning)]
[Plan Date (End)]
[Employee Count]
[Included Employee Count]
[Application Name]
[Application Version]
[Current Date]
[Current Year]
[EEO Coordinator Name]
[EEO Coord. Email]
[EEO Coord. Company]
[EEO Coord. Address Line 1]
[EEO Coord. City]
[EEO Coord. State]
[EEO Coord. Zipcode]
[Executive Officer Name]
[Executive Officer Title]
[Dun & Brad #]
[EIN]
[EEO-1 #]
[Parent Company]
[Parent Company Dun & Brad #]
[Parent Company EIN]
[Parent Company EEO-1 #]
Need more help with this?
The Complete AAP 12 Software Client Support Page
