Docs

[lancesalyers]

What is the code needed to format either numbered or bulleted lists? Currently, my lists are displayed with a different font color and (even worse) a smaller text size. I want to keep the font the same in all respects, but would like the listed text to be double indented as the way to set it off from the rest of the text.

Example page: http://www.leadingwithideas.com/the-way-forward/

Thanks for your help!

[Lely]

Hi There,

You may add class on your list like this:

<ol class="custom-list">
<li>Forgive the past and let it go.</li>
<li>Focus on what winning is: a peaceful union.</li>
<li>Force yourself to take the other person’s words at face value.</li>
</ol>

Then add the following CSS via Appearance > Customize > Custom > Edit Global CSS:

ol.custom-list {
    list-style-type: disc;
}
ol.custom-list li {
    font-size: 20px;
    color: #c6c6c6;
    font-family: 'Century Gothic';
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-left: 32px; /* Adjust to your preferred indentation*/
}
}

For other list style type option, see this:http://www.w3schools.com/cssref/pr_list-style-type.asp

Hope this helps.

[lancesalyers]

Thanks Lely. Can I add that custom CSS so that it is applied globally, and doesn’t require me to remember to add the class identifier everytime I want to use a ol/li?

[Rue Nel]

Hello There,

Thanks for the updates. Yes of course you can use the class and apply it globally. Simply update the css code and use this instead:

.custom-list {
    list-style-type: disc;
}

.custom-list li {
    font-size: 20px;
    color: #c6c6c6;
    font-family: 'Century Gothic';
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-left: 32px; /* Adjust to your preferred indentation*/
}

Please let us know if this works out for you.

[lancesalyers]

Hmm … doesn’t appear to have changed anything. Did I need to something other than copy/paste the code from your last response into the custom css editor?

[Rue Nel]

Hello There,

I have checked your custom css and it seems everything is correct. I would recommend that you replace the code and use this instead:

ul, ol {
    list-style-type: disc;
}

ul li,
ol li {
    font-size: 20px;
    color: #c6c6c6;
    font-family: 'Century Gothic';
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.6;
    margin-left: 32px; /* Adjust to your preferred indentation*/
}

Now, with this change, the code will be applied to all numbered and bulleted lists.

Hope this would work out.

[lancesalyers]

That did it, exactly as hoped. Thanks!

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts