Continuing a Numbered List in a Blog

SOLVE
njohnson7
Participant

In a blog post, I have a numbered list that is broken with paragraphs in between. How do I force the numbers to coninue rather than starting at 1 each time?

Example

1. List item A

2. List item B

For the next steps, there is a paragraph in between. I don't want to start at 1 again. I want to force it to start at 3.

3. List item C

4. List item D

 

I tried adding <ol start=”3″> in the HTML code and it does not solve the problem.

0 Upvotes
1 Accepted solution

Accepted Solutions
dennisedson
Solution
Community Manager

hi @njohnson7 , the link helped.  you have set the list-style-type for the ol to none so the start position you set will display...none

you are instead using

.hs-blog-post .post-body ol li::before {
    content: counter(step-counter);
    font-weight: bold;
}

for your counter. 

Remove that and set your OL to roman.

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content

View solution in original post

7 Replies 7
jennysowyrda
Community Manager

Hi @njohnson7,

 

Are you still looking for assistance with this matter? If so, can you please link to the page you are working on, provide screenshots and details? 

 

Questions that include screenshots, links and examples are able to be resolved quicker on the Community.

 

Thank you,
Jenny

0 Upvotes
njohnson7
Participant

You suggest that I include an example - I already did that in my original post.

 

My post was made almost 2 months ago. I find it strange that you reply now!? We never received any suggestions or help from the HubSpot team or the community.

 

The blog has been published weeks ago and we never could figure out a way to force the numbered list to coninue and not start over with paragraphs in between. So we have a blog that is called "20 Must-Have..." and the list is 4 sets of 1-5 instead of 1-20.  https://blog.soil3.com/trees-shrubs-for-fragrance

0 Upvotes
jennysowyrda
Community Manager

Hi @njohnson7,

 

Thank you for your response and I apologize for the lack of response to your original inquiry. Having links to the blog posts so that we can see the code and layout of your page is helpful for designers to troubleshoot. 

 

I appreciate you sharing a link to your page so we can investigate this matter specific to your website! 

 

I did want to share this resource which outlines a similar solution. 

 

I also wanted to tag in some of our subject matter experts @Kevin-C@dennisedson do you have any tips for @njohnson7?

 

Thank you,
Jenny

0 Upvotes
dennisedson
Solution
Community Manager

hi @njohnson7 , the link helped.  you have set the list-style-type for the ol to none so the start position you set will display...none

you are instead using

.hs-blog-post .post-body ol li::before {
    content: counter(step-counter);
    font-weight: bold;
}

for your counter. 

Remove that and set your OL to roman.

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content

View solution in original post

Walton24851
Member

I'm not ultra confident in modifying the CSS - is this the only way to format a numbered list in a blog? Additionally, I would like standard bullets instead of the green tickets that are appearing - would this be another CSS change? Thanks!

0 Upvotes
dennisedson
Community Manager

hey @Walton24851 , not clear on what you mean about bullets.  if you want that, you would want to use an unordered list rather than an ordered list.

Anything that involves "style" would be a css operation.

If you have an example page, maybe i could help you out!

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Walton2485
Participant

Hey dennis_e thanks for the response. I just want regular round black bullet points but all of the bullet point options within the blog show green ticks? This is the code from the style sheet

 

/* Lists */
ul, ol {
margin:0;
}
ul ul, ul ol, ol ol, ol ul {}
li {}

.body-container .hs_cos_wrapper_type_rich_text ul,
.widget-module ul,
.section.post-body ul{
list-style:none;
padding-left:48px;
}
.body-container .hs_cos_wrapper_type_rich_text ul li,
.widget-module ul li,
.section.post-body ul li{
position:relative;
}

.body-container .hs_cos_wrapper_type_rich_text ul li:before,
.widget-module ul li:before,
.section.post-body ul li:before{
content: "\e64c";
color: #46da60;
font-family: themify;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
position:absolute;
top: 10px;
left: -30px;

0 Upvotes