Ask your WordPress questions! Pay money and get answers fast! (more info)

Style Ordered List Numbering In A Post WordPress

Hi,

I'm trying to style the numbers in an ordered of a post.
I want big numbers put in boxes to match this theme
http://demo.studiopress.com/metro/


Okey, I'm sorry about that. But I Want to achieve something like the styling of the numbering on [[LINK href="http://listverse.com/2013/07/31/10-dramatic-and-disturbing-videos-of-insanity/"]]Listverse[[/LINK]]
On my site [[LINK href="http://hiphopspot.nl/2013/07/31/list-page/"]]HHS[[/LINK]]

Here is the css I found for lists in my theme..

06 Lists

---------------------------------------------------------------------------------------------------- */



.entry-content ol,

.entry-content ul {

margin-bottom: 26px;

margin-bottom: 1.625rem;

}



.entry-content ol li,

.entry-content ul li {

line-height: 1.625;

}



.entry-content ol li,

.entry-content ul li {

margin-left: 40px;

margin-left: 2.5rem;

}



.entry-content ol li {

list-style-type: decimal;

}



.entry-content ul li {

list-style-type: disc;

}



.entry-content ol ol,

.entry-content ul ul {

margin-bottom: 0;

}



Answers (6)

2013-07-31

Francisco Javier Carazo Gil answers:

Which numbers exactly? In which site? We need to have a CSS available.


Francisco Javier Carazo Gil comments:

To see what changes we should do.


Rednasil comments:

Okey, I'm sorry about that. But I Want to achieve something like the numbering [[LINK href="http://listverse.com/2013/07/31/10-dramatic-and-disturbing-videos-of-insanity/"]]Listverse[[/LINK]]
On my site [[LINK href="http://hiphopspot.nl/2013/07/31/list-page/"]]HHS[[/LINK]]

Here is the css I found for lists in my theme..

06 Lists
---------------------------------------------------------------------------------------------------- */

.entry-content ol,
.entry-content ul {
margin-bottom: 26px;
margin-bottom: 1.625rem;
}

.entry-content ol li,
.entry-content ul li {
line-height: 1.625;
}

.entry-content ol li,
.entry-content ul li {
margin-left: 40px;
margin-left: 2.5rem;
}

.entry-content ol li {
list-style-type: decimal;
}

.entry-content ul li {
list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
margin-bottom: 0;
}


2013-07-31

Arnav Joy answers:

please explain what you want to have clearly

2013-07-31

Abdelhadi Touil answers:

Hi.
Your question isn't clear, but I think you want to style your ordered list bu making number bigger and so on. These are very helpful tutorials about styling ordered list hope they help:

[[LINK href="http://www.red-team-design.com/css3-ordered-list-styles"]]http://www.red-team-design.com/css3-ordered-list-styles[[/LINK]]

[[LINK href="http://css-tricks.com/numbering-in-style/"]]http://css-tricks.com/numbering-in-style/[[/LINK]]

[[LINK href="http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2012/4/Styling-ordered-lists-in-the-xhtml-editor-using-only-CSS/"]]http://world.episerver.com/Blogs/Eric-Pettersson/Dates/2012/4/Styling-ordered-lists-in-the-xhtml-editor-using-only-CSS/[[/LINK]]

Good luck.


Rednasil comments:

Thanks for the links, I have tried these already but I don't know what I'm doing wrong cause I can't get them to work.

2013-07-31

Hariprasad Vijayan answers:

Need bit more description.


Hariprasad Vijayan comments:

Did you get solution for this problem?

2013-07-31

MDan answers:

Hello,

You can use the following numbering style:

<strong>Example 1</strong>
<strong>The HTML</strong>
<div>
<ol>
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
</ol>
</div>


<strong>The CSS</strong>

div {
width: 500px;
margin: 10px
}

ol {
color: #ccc;
list-style-type: none;
}

ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}

li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #555;
}

span {
position: absolute;
}


You can see a live demo here: http://codepen.io/secondfret/pen/oexuc

<strong>Example 2</strong>
The HTML:
<ol class="rectangle-list">
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
<li><a href="">List item</a>
<ol>
<li><a href="">List sub item</a></li>
<li><a href="">List sub item</a></li>

<li><a href="">List sub item</a></li>
</ol>
</li>
<li><a href="">List item</a></li>
<li><a href="">List item</a></li>
</ol>


<strong>The CSS</strong>
.rectangle-list a{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}

.rectangle-list a:hover{
background: #eee;
}

.rectangle-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}

.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}

.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}


Rednasil comments:

Hi Daniel, thanks for the code.. This is not quite what I was looking to achieve, but still a step in the good direction.
But the first one pushes all my content to the right..
And in the second one the counting stays at 1.

2013-08-01

Giri answers:

.entry-content ol {
display: block;
padding: 0 0 0 26px;
list-style: none;
overflow: hidden;
counter-reset: numList;
}
.entry-content ol li {
margin-right: 44px;
float: left;
position: relative;
margin-left: 20px;
list-style-type: none;
}
.entry-content ol li:before {
counter-increment: numList;
content: counter(numList);
float: left;
position: absolute;
left: -26px;
top:18px;
font: bold 12px sans-serif;
text-align: center;
color: #fff;
line-height: 18px;
width: 18px; height: 18px;
background: #d24d33;
}



Here is the [[LINK href="http://jsfiddle.net/Viruthagiri/Pe7Na/"]]demo[[/LINK]]