Octopress/Lists: Difference between revisions
From charlesreid1
(Created page with "To style lists, you'll just need to add a little bit of CSS. The following CSS code is from http://codeitdown.com/ordered-list-css-styles/: <source lang="css"> ol { list-sty...") |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
To style lists, you'll just need to add a little bit of CSS. The following CSS code is from http://codeitdown.com/ordered-list-css-styles/ | To style lists, you'll just need to add a little bit of CSS. The following CSS code makes ordered lists look nice and is from http://codeitdown.com/ordered-list-css-styles/. | ||
<source | You can add the following style code to <code>source/_includes/custom/head.html</code> by surrounding it in <code><style type="text/css"></style></code> tags. | ||
<pre> | |||
ol { | ol { | ||
list-style-type: none; | list-style-type: none; | ||
| Line 36: | Line 38: | ||
counter-increment: li-counter; | counter-increment: li-counter; | ||
} | } | ||
</pre> | |||
Finished product: | |||
[[Image:OctopressList.png|600px]] | |||
[[Category:Octopress]] | |||
Latest revision as of 20:09, 21 September 2017
To style lists, you'll just need to add a little bit of CSS. The following CSS code makes ordered lists look nice and is from http://codeitdown.com/ordered-list-css-styles/.
You can add the following style code to source/_includes/custom/head.html by surrounding it in <style type="text/css"></style> tags.
ol {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 4em;
padding: 0;
counter-reset: li-counter;
}
ol > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
}
ol > li:before {
position: absolute;
top: 0;
left: -1.33em;
width: 1.2em;
height: 1.2em;
font-size: 2.5em;
line-height: 1.2;
text-align: center;
color: #f5f5f5;
border: 3px solid #c5c5c5;
border-radius: 50%;
background-color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}
Finished product:
