Source code for formatted list in Help Center

Respondidas


Publicado 02 dic 2017

How do I create a formatted list like the following? Please provide the source code. 

 


0

19

19 comentarios

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!

0


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!

0


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

0


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.

0


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>

 

0


Thanks for sharing that solution, Angeline! Ntan, let us know if it works for you. :)

0


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!

 

0


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!

0


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

0


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;
}

0


La publicación no admite más comentarios.

¿No encontró lo que buscaba?

Nueva publicación