Octopress/Lists - Revision history

Admin at 20:09, 21 September 2017

2017-09-21T20:09:35Z

← Older revision		Revision as of 20:09, 21 September 2017
Line 3:		Line 3:
	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.		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.

	<~~source lang="css"~~>		<pre>
	ol {		ol {
	list-style-type: none;		list-style-type: none;
Line 38:		Line 38:
	counter-increment: li-counter;		counter-increment: li-counter;
	}		}
	</~~source~~>		</pre>

	Finished product:		Finished product:

Admin at 06:23, 5 August 2014

2014-08-05T06:23:07Z

← Older revision		Revision as of 06:23, 5 August 2014
Line 1:		Line 1:
	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/.		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 ~~this~~ to source/_includes/custom/head.html by surrounding it in <code><style type="text/css"></style></code> tags.		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.

	<source lang="css">		<source lang="css">

Admin at 11:16, 14 April 2014

2014-04-14T11:16:23Z

← Older revision		Revision as of 11:16, 14 April 2014
Line 43:		Line 43:

	[[Image:OctopressList.png\|600px]]		[[Image:OctopressList.png\|600px]]


			[[Category:Octopress]]

Admin at 11:15, 14 April 2014

2014-04-14T11:15:58Z

← Older revision		Revision as of 11:15, 14 April 2014
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/.

			You can add this to source/_includes/custom/head.html by surrounding it in <code><style type="text/css"></style></code> tags.

	<source lang="css">		<source lang="css">

Admin at 11:14, 14 April 2014

2014-04-14T11:14:04Z

← Older revision		Revision as of 11:14, 14 April 2014
Line 36:		Line 36:
	counter-increment: li-counter;		counter-increment: li-counter;
	}		}
			</source>

	~~div#content {~~		Finished product:
	~~padding-left~~: ~~25px;~~
	~~padding-right: 25px;~~		[[Image:OctopressList.png\|600px]]
	~~padding-top~~: ~~32px;~~
	}
	~~</source>~~

Admin: 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/: ol { list-sty..."

2014-04-14T11:13:30Z

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..."

New page

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-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;
}

div#content {
padding-left: 25px;
padding-right: 25px;
padding-top: 32px;
}
</source>