CSS for Fluid Pagination Widget in TYPO3 Flow

f-widget-paginate-style.md

CSS for Fluid Pagination Widget in TYPO3 Flow

CSS

<style type="text/css">
	.typo3-widget-paginator {
		display: inline-block;
		border-radius: 4px;
		margin: 20px 0px;
		padding-left: 0px;
	}

	.typo3-widget-paginator > li {
		display: inline;
	}

	.typo3-widget-paginator > li > a,
	.typo3-widget-paginator > li.current {
		position: relative;
		float: left;
		padding: 6px 12px;
		margin-left: -1px;
		text-decoration: none;
		border: 1px solid #DDD;
		background-color: #FFF;
		color: #FF8700;
	}

	.typo3-widget-paginator > li.current,
	.typo3-widget-paginator > li > a:hover,
	.typo3-widget-paginator > li > a:focus {
		text-decoration: underline;
		background-color: #EEE;
	}

	.typo3-widget-paginator > li:first-child > a,
	.typo3-widget-paginator > li.current:first-child {
		margin-left: 0px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.typo3-widget-paginator > li:last-child > a,
	.typo3-widget-paginator > li.current:last-child {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
</style>

HTML

<div class="page-navigation">
	<ul class="typo3-widget-paginator">
		<li class="previous">
			<a href="#">previous</a>
		</li>
		<li>
			<a href="#">1</a>
		</li>
		<li class="current">
			2
		</li>
		<li>
			<a href="#">3</a>
		</li>
		<li>
			<a href="#">4</a>
		</li>
		<li>
			<a href="#">5</a>
		</li>
		<li class="next">
			<a href="#">next</a>
		</li>
	</ul>
</div>

Fluid

<f:widget.paginate objects="{blogs}" as="paginatedBlogs" configuration="{itemsPerPage: 25}">
	// …
</f:widget.paginate>

Credits

Styles copied and adapted from Twitter Bootstrap (http://getbootstrap.com, licensed under MIT https://github.com/twbs/bootstrap/blob/master/LICENSE)