<h1>How to style the TYPO3 Pagination Widget</h1>
<p class="lead">The widget <code><f:widget.paginate></code> in the templating framework Fluid can be easily styled with a little clever CSS. Even without changing the HTML output. Here is an example, which I use for numerous projects. Take a look at the code to learn from it, or apply it to your own projects. <strong><i>This code is also available on <a href="https://github.com/koehlersimon/typo3-pagination-styles">GitHub</a>!</i></strong></p>
<h2>Basic Example</h2>
<ul class="f3-widget-paginator">
<li class="previous">
<a rel="prev" 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>
<a href="#">6</a>
</li>
<li class="next">
<a rel="next" href="#">next</a>
</li>
</ul>
<p></p>
<h2>Align center</h2>
<div class="example-centered">
<ul class="f3-widget-paginator">
<li class="previous">
<a rel="prev" 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>
<a href="#">6</a>
</li>
<li class="next">
<a rel="next" href="#">next</a>
</li>
</ul>
</div>
<h2>Align right</h2>
<div class="example-right">
<ul class="f3-widget-paginator">
<li class="previous">
<a rel="prev" 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>
<a href="#">6</a>
</li>
<li class="next">
<a rel="next" href="#">next</a>
</li>
</ul>
</div>
<h2>More about TYPO3 the Pagination ViewHelper</h2>
<a href="https://docs.typo3.org/other/typo3/view-helper-reference/9.5/en-us/typo3/fluid/latest/Widget/Paginate.html" target="_blank">https://docs.typo3.org/other/typo3/view-helper-reference/9.5/en-us/typo3/fluid/latest/Widget/Paginate.html</a>
@import url('https://fonts.googleapis.com/css?family=Exo+2:700&display=swap');
.f3-widget-paginator {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: scroll;
}
.f3-widget-paginator li {
background-color: #333;
border-right: 1px solid #4d4d4d;
}
.f3-widget-paginator li.current {
background-color: #1a1a1a;
padding: 16px 24px;
color: white;
font-weight: bold;
font-size: 1.4rem;
}
.f3-widget-paginator li a {
display: block;
position: relative;
padding: 16px 24px;
text-decoration: none;
font-size: 1.4rem;
color: white;
}
.f3-widget-paginator li a:hover {
background-color: #1a1a1a;
}
.f3-widget-paginator li.previous, .f3-widget-paginator li.next {
position: relative;
min-width: 30px;
}
.f3-widget-paginator li.previous a, .f3-widget-paginator li.next a {
text-indent: -9999px;
position: relative;
}
.f3-widget-paginator li.previous a:hover, .f3-widget-paginator li.next a:hover {
background: none;
}
.f3-widget-paginator li.previous:before, .f3-widget-paginator li.next:before {
content: ">";
font-weight: bold;
color: white;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.f3-widget-paginator li.previous:hover, .f3-widget-paginator li.next:hover {
background-color: #1a1a1a;
}
.f3-widget-paginator li.previous:before {
content: "<";
}
.f3-widget-paginator li:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.f3-widget-paginator li:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-right: none;
}
@media (min-width: 768px) {
.f3-widget-paginator li.current, .f3-widget-paginator li a {
padding: 10px 15px;
font-size: 1.1rem;
}
}
@media (min-width: 1024px) {
.f3-widget-paginator li.current, .f3-widget-paginator li a {
padding: 8px 12px;
font-size: 1rem;
}
}
@media (min-width: 480px) {
.example-centered .f3-widget-paginator {
justify-content: center;
}
}
@media (min-width: 480px) {
.example-right .f3-widget-paginator {
justify-content: end;
}
}
html, body {
padding: 10px 20px;
min-height: 100vh;
}
body {
color: #fff;
background: #949c4e;
background: linear-gradient(115deg, #134f78, #0f4162 90%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
font-family: "Exo 2", Arial, sans-serif;
font-weight: 700;
}
body a {
color: #fff;
}
body .lead {
font-size: 18px;
line-height: 1.4;
}
body .lead code {
color: blue;
background: #eee;
padding: 2px;
}
body .f3-widget-paginator {
margin-bottom: 40px;
}