How To: Style Bullets

October 8, 2014 | Web Services

Bullets are not a default style in the CMS. To achieve the blue bullet on your webpage, the list must be styled appropriately. There are a couple of ways to do this:

  • HTML
  • Using the Styles menu within the TinyMCE editor

If you are comfortable with editing the HTML of your content, then that is the easiest most reliable method to use. If you aren’t, it’s still possible to get the style to attach properly, it’s just tricky.

HTML Method 

  1. Create your bulleted list as normal
  2. Click the HTML button (2nd row of icons, near Section Link)
  3. Locate your <ul> tag
  4. Add the class disc
    1. Your tag will look like this: <ul class=”disc”>
  5. Click Update

Styles Menu Method 

  1. Create your bulleted list
  2. Press Enter a few times after the list to fully end it and create a new paragraph
  3. Add a blank space to this new paragraph to officially establish it in the editor
  4. Highlight the complete list and extra space you just made
    1. This must be started from the top of the list down
  5. Click on the Styles menu at the top of the editor
  6. Choose disc

When using this method, you will want to preview this content to make sure the bullet applies properly as this will save you a lot of potential back and forth. If you are comfortable looking at your HTML rather than editing it, you can also click the HTML button after following the steps above and checking to see that only the <ul> tag has the class [see above], not anything else.

If your list looks like either of the following (or other variation) your bullets will NOT show properly:

<ul>
<li class=”disc”>Some content</li>
<li class=”disc”>Some more content</li>
</ul>

OR

<ul>
<li><span class=”disc”>Some Content</span></li>
<li><span class=”disc”>Some more content</span></li>
</ul>


Feedback
×
Fill out my online form.