Ruby theme doe not render ordered list

[oldgustav]

Hi There. Still using good ol’ Ruby theme for our monster website - until the day when I get around to re-building it in Foundry: www.greenercamping.org. Meantime, I need create a page with a numbered (ordered) list and no matter whether I use markup, text or html stacks, Ruby will not render the numbers. It will happily render bulleted lists. Is it me or is there an issue? TIA.

[joeworkman]

I just happen to be cruising around the communities today to see if there were any questions about my products. While this is not my product, I thought I could help. Here is a fix for your issue. Ruby is a nice theme. I used it a long time ago. Fun fact, that it uses an older version of the Foundation framework

The following CSS will also fix your bullet lists on the site and will make both styles of lists uniform to what the theme is trying to do.

ul, ol {
  list-style-position: inside;
  padding-left: 15px;
}
ul>li>*, ol>li>* {
  display: inline-block;
}

I notice in your content that all of your lists contain p tags for each bullet. This is what is making every line not be aligned with the bullets. The 2nd rule above fixes that. However, if you are intentionally adding the paragraphs, I would not do that (and the 2nd rule above is not required).

If the purpose of doing that was to add more spacing between the bullet items, the correct way to handle that would be to increase the line height of the li.

ul li, ol li {
  line-height: 2.5;
}

Hope that this helps!

[oldgustav]

Wow, thanks Joe! Here’s the page with the numbered list Win A Camping Holiday | The Greener Camping Club - but still struggling to get the individual items to align as they do in raw Markdown. But better that having bullets!

[joeworkman]

I don’t know what your markdown looks like to know what you are trying to achieve. My guess is that it’s not possible. Spacing things in markdown will have zero relation to how things will get displayed on the final webpage.

I still see that the bullets on the rest of your webpages still have issues.

[oldgustav]

Hi Joe, I don’t want to take up your time on this and I really appreciate your help. I haven’t applied your custom CSS to the other pages yet but the issue I’m having - small though it is, is that Markdown previews with the wrapped line tabbed in to align with the first line - as it should - but when previewed in RW, the wrapped line aligns with the number (or bullet point). I probably haven’t explained that very well but the screenshots may help. Basically, the alignments are not as they should be, including when we get into double digits.

[joeworkman]

Update the CSS to be this…

ul, ol {
  list-style-position: outside;
  padding-left: 3rem;
}

I prefer the outside style myself as well. However, I used inside since that is what the theme originally used, so I was trying to be true to the theme. You can adjust the padding setting to have the list indentation that you prefer.

[oldgustav]

Thanks very much! The lists look perfect now! I must be losing it because going through the pages with lists I found one page with some custom CSS already in

ol {
padding-left: 34px;
}

ul {
padding-left: 34px;
}

ul {
list-style-position: outside;
}

[joeworkman]

Haha. Instead of adding the CSS code to one page, you should add it to the site wide code CSS tab in the project. Then it will get used on all pages.

Glad that it’s all working for you now.