Styling Bulleted Lists

Bulleted List Styling Can Be Created Using the Source Code in CampaignDrive

CampaignDrive has a bulleted list option as part of the text editor. However, the styling and spacing options for this option are limited. To achieve customized bullets and text spacing, advanced admin users can program styling directly into the source code. To preserve the source code correctly, a strict order of operations is advised.

Order of Operations for Creating Custom List Styling

1. Add the text for the list item into the text editor
2. Style the text for font, font size, and color
3. Add any custom text spacing - both for list content and spacing between each item in the list
4. Place the bullet at the start of each list item. Note that this "bullet" can be any character, a Unicode value, or a number and can consist of more than one character.
5. Style the bullet character(s) for font, font size, and color.
6. Add an opening indent tag AFTER the styling for the bullet
7. Add a closing indent tag just before the closing paragraph tag
8. Repeat these steps for each item in your list. 

Tip: Once the styling is set, the source code for the first list item may be copied and pasted to create the rest of the items in the list.  Replace the text content for each item by replacing the text string in the SOURCE CODE (not the WYSIWYG editor).

Note: The indent spacing itself is not reflected in the WYSIWYG editor, but you will see it reflected in the content on the page.

Adding Tags to List Content

Content within custom lists can be tagged just like any other text content.  Due to the specific nature of the code, it is HIGHLY recommended that the following steps be utilized for tagged text:

1. Create the list using the steps outlined above. No text is tagged at this step.
2. Open a separate text layer and create the tag you want - it can be any of the available text tag types.
3. Copy the entire text string - make sure that you are in the WYSIWYG editor view (NOT the source code view).
4. Open the text layer that contains the list and open the Source code view (make sure that you switch from the WYSIWYG view). Paste this content over the placeholder text that you are tagging.  Effectively, you are replacing the placeholder text in the list with the tagged text.
5. Close the Source Code view to make sure the tag has been applied.

Note: Bullets can be tagged just like the list content, you just have to replace the bullet character with the correct tagged content.

Styled List Example

Below is a screenshot of a styled list in the WYSIWYG editor and the source code that controls it:

Parts of the Source Code

• The <p> tag is used to enclose paragraphs, 

  • <p style="margin-bottom: 6pt;"><span style="color:#f05522;">&bull;</span><indent size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</indent></p>

  • Paragraph styling can be used to define space before or after list items.
• The span tag is used to define additional styling properties such as color, font, and size.
  • <p style="margin-bottom: 6pt;"><span style="color:#f05522;">&bull;</span><indent size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</indent></p>
  • In this example, bf4b27 is a color, which is defined by a HEX value.  Note that the color styling for the bullet is different from that of the text, so the span tag only encloses the bullet character itself.
• The indent tag is used to define the content that should be indented as part of the list item.
  • <p style="margin-bottom: 6pt;"><span style="color:#f05522;">&bull;</span><indent size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </indent></p>
  • The size is an optional parameter and can be used to control the space between the bullet and the indented content.
• The bullet character &bull; is what is being used in this example as a bullet. 

• • <p style="margin-bottom: 6pt;"><span style="color:#f05522;">&bull;</span><indent size="1">When using the pdf tags just use them with the carats on either side around whatever you want to apply it to.</indent></p
  • The bullet can be anything - it is just the content that is defined outside of the indented content to be used as the list item identifier.

Tagged List Example

Below is an example of a tagged list that has custom styling on the bullets, text, and leading, indented content that is both bulleted and plain, and content that is controlled by the database using content tags.

Text Layout:

 

WYSIWYG Editor:

Note that the indent does not show up in the editor.

 

Source Code:

Note that indents are applied whenever there is a new paragraph tag (the first set of content has a bullet, but the pricing does not - the indent tag ensures that the pricing lines up with the text that has the bullet applied).