Source code for formatted list in Help Center

Hey Ntan - 

Where are you trying to create this list? Is this for a Help Center Article? Within a ticket? 

Hi Nicole, 

I am trying to create this for a Help Center Article. Thank you! 

Hi Ntan!

You can do this in the rich text editor, both the numbered list and the bulleted list. Is there a reason that's not working for you?

Hi Jessie,

I think maybe I don't know how to do it for the numbered list. Can you share the support documentation on how to do this? Otherwise, maybe there's a reason it's not working for me?

Hi Zendesk! I'm checking in about getting some help with this. Thank you very much!

Hi Ntan! I'm so sorry for the delayed response here.

The numbered list option is in the tool bar at the top of the article editor, next to the bulleted list option.

It occurs to me that sub-points are added with another number, not with a letter, like this:

Do you specifically need the sub-points to appear with a letter in front? Or will this work for you?

Thanks Jessie. Yes, glad you see the issues I'm having! 

I specifically need the sub-points to appear with a letter in front. It should ideally mirror the the format in the screenshot/image I initially shared in this thread. 

Hey Ntan!

I see what you're saying here. Unfortunately there's nothing in the interface itself that will let you change the way that looks, but it might be possible to do something custom with the CSS or JS to make it appear the way you want to your users. My expertise doesn't extend that far, I'm afraid, but we have plenty of great coders here in the Community who might be able to help.

Thanks Jessie! Understood. 

Ntan, 

If you're still looking for a solution to this, I accomplished this with the following CSS. I don't know a lot about CSS, so maybe there's a better way to do this, but this is the solution I found anyway.

.article-body ol > li > ol {
padding-left: 0px;
list-style-type: lower-alpha;
list-style-position: outside;
margin: 0px 0 20px 20px;
}

I would like to be able to do this (alpha-numeric numbering) from the ticketing side. As an interim step until this is implemented, CSS would be fine, but where is the CSS or HTML editor so that I could add this to my response? 

Thanks,

Leslie

Hey there Leslie!

Thanks for leaving us with your question :)

My apologies for the inconvenience, but the text editor for your ticket comments does not render HTML or CSS code (for more information on this, please see this article)

The options we have currently are bulleted and numbered lists 

Image below:

While I completely understand your use case for this kind of workflow, it isn't part of the text editor's functionality at this time. The suggestion provided above was directed towards using the text editor provided for Guide. 

Hope that helps!

Hi Ntan, in case you are still looking for a solution:

1. Edit the source code of your article.
2. Add a type to your list items.

In your case, the type value is a.

<ol>
     <li>First section
          <ol>
               <li type="a">First subsection</li>
               <li type="a">Second subsection</li>
          </ol>
     </li>
     <li>Second section
          <ol>
               <li type="a">First subsection</li>
               <li type="a">Second subsection</li>
          </ol>
     </li>
</ol>

For other values, check out W3Schools. Hope it helps!

Hi, I'm trying to add bullet points to a Help Center article using the open source code. These bullet points need to be embedded within the "color text boxes" we have created within the article for our readers to see as a "call to action". I've played with the html code a bit (a newbie at this) and have been able to create and maintain the spacing, span, color text box but every time I try to add my unordered <li></li> or ordered list <ol> </ol> WITHIN the source code, something gets compromised.  

For example: The bullet points are there for my unordered items yet my color text box pushes out of bounds from the rest of the content.  Here is a sample image of my text, I just need to add the bullets preceding each of the 4 points.  And here is the code I've copied and pasted (hence the disordered, smashed up view) that matches the portion of the image.

<p>
<span class="wysiwyg-color-red80"><strong>IMPORTANT</strong>: <span class="wysiwyg-color-red80">Any changes made to these fields will change these values in all modules of the application. The following fields must be completed: </span></span><span class="wysiwyg-color-red80">Date of birth of each investor.</span><span class="wysiwyg-color-red80">Retirement age of each investor.</span><span class="wysiwyg-color-red80">Income before and after retirement, as the case may be.</span><span class="wysiwyg-color-red80">The start and end dates for each cash flow.</span>
</p>
<p>

Hi Lisa,

If I understand what you're looking for:

1. Add the tags <div> embracing the whole box.
2. Add the background color style with the relevant color.

<div style="background-color:#feb3b3">
<p>
<strong>IMPORTANT</strong>:
</p>
<p>
Any changes made to these fields will change these values in all modules
of the application. The following fields must be completed:
</p>
<ul>
<li>Date of birth of each investor.</li>
<li>Retirement age of each investor.</li>
<li>Income before and after retirement, as the case may be.</li>
<li>The start and end dates for each cash flow.</li>
</ul>
</div>

Hope it helps, you can get more info on https://www.w3schools.com/tags/tag_div.asp.

Thank you Angeline! This is really helpful. Now I see what I was missing.  The only tweak I now need help with is the color code. Can you help me find the right color code to match the second box in this image please? Thanks so much.  Btw, the person who usually did this has left the company and I'm taking initiative to learn a bit for our Help Center needs so this forum has been invaluable! I'm curious why our previous person used the <span> </span> tag instead of <div> now haha

Hey Lisa,

Can you try using #F7DAD8 as your Hex Code and see if that gets you the results you're looking for?

Hope this helps!

Thank you Brett, I played around with the html color picker (plus the naked eye ;) and still couldn't get it exact. 

#F7DAD8 is a lot closer but not quite there.  (see screenshot - Left image is the goal. Right image is the #F7DAD8)

Thanks for getting it closer tho! Much appreciated!