After writing my blog post on 5 reasons to use lists in blogs, I had people email me asking how I made my lists look so good. I’ll admit, before that post my lists looked ugly. But I spent quite a bit of time playing around to get it to look that way.
What I ended up coming across was some css tricks that let you do numbering in different styles. I had to modify it to work with the lists I was making. First, I’ll give you the code to put into your theme’s custom.css file:
.fancy {
counter-reset: fancy-counter;
list-style: none;
}
.fancy li:before {
content: counter(fancy-counter);
counter-increment: fancy-counter;
left: -40px;
position: relative;
top: 25px;
font: bold 50px/1 Sans-Serif;
}
.fancy strong {
margin-left: -30px;
}
Once this is in your theme’s custom.css file, you can create a new numbered list with WordPress just like you always have, with two exceptions:
- You must use the bold tag at the begging of each section. As you can see in the css above, strong (which is what WordPress uses for bolding), has a margin that is being offset by 30 pixels. This is to counter the space the numbers take up.
- You must add the fancy class to the <ol> tag. This can be done by changing your WordPress Visual Editor from Visual to Text mode. Change the <ol> to <ol class=”fancy”>. This prevents lists outside of your content from getting changed, ensuring your blog doesn’t break.
That’s all there is to it. Seems complicated at first but once you get it figured out it really doesn’t add much to your flow when creating new posts. But it has an amazingly beautiful effect that’ll help your blog look that much better.
Great information, thanks! Hopefully I can apply myself easily in the near future.
Jack Godfrey is the most evil man in history. He used to work for YOU people
i do not know you, check with DR ELISA BONGARRS IN GLENDALE, AZ. I believe she will confirm my presence there
If anyone isn’t that experienced with HTML and CSS, then a simple way of applying this might be to install a custom CSS plugin (I use Custom CSS – Whole Site and Per Post on some sites and it works well) and then adding the code there. It saves modifying the WordPress theme.
Love this! Would you provide a screenshot of what this looks like in the text editor?
I cant get it to work. Nothing happens, i have the custom.css file updated in divi theme and the ol class referred to in the visual text editor, is there a step i am missing?
Love !!! Thanks For sharing, now i can use unique Number lish :)
This is such a great tutorial. Love it!
I could not get it to work on my Elegant Theme – but jiggled some and adapted the CSS code for the first part and added a color font option. I placed the code in the DIVI Additional CSS under Customize.
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
.fancy {
counter-reset:fancy-counter;
list-style-type:none
}
.fancy li:before {
content: counter(fancy-counter);
counter-increment: fancy-counter;
left: -50px;
position: relative;
top: 25px;
font: bold 60px/1 Sans-Serif;
color: #bdc3fb;
}
.fancy strong {
margin-left: -30px;
}
Bu the number and/or bullet point still appears from the existing list. So I get first the large number and then the same number in normal size from the existing CSS. How do I make this completely remove the double text please?
I also facing the same problem
I getting stuck to try numbering list on post or page on my wordpress. Every i hit enter they’re always continue or always be number 1. Hope this article help me, thanks!
Thanks for sharing, I really need this information
Nothing happens, i have the custom.css file updated in divi theme and the ol class referred to in the visual text editor, is there a step i am missing?
Thanks for the information. I will try this on my blog.
Very Informative. Thanks for sharing this idea with us.
I really thank you for the valuable info on this great subject and look forward to more great posts.
Terima kasih gan info nya… :)
Suhuun mang atas info yang sudah dibagikan, semoga bisa bermanfaat untuk teman teman lainnya.. Suhuun..