Pagination sieht komisch aus - bekomme es nicht hin

phob · 25. Oktober 2016

Nächste Baustelle, nächste Frage. Ich habe jetzt bei einer Seite ein Problem mit der Pagination unten, die ziemlich bescheiden aussieht (achtung Baustelle): http://lvbs35.gartenfreunde-br…weig.de/service/aktuelles.

Ich möchte gerne die Pagination ähnlich wie auf der alten (noch aktuelle) Seite, http://www.gartenfreunde-braunschweig.de/service, haben, also horizontal. Nur auf der "Baustellen"-Seite bekomme ich keine richtige bzw. ansehnliche Ordnung hin. Die neue Seite basiert auf dem T3-Blank Template.

Könnt ihr mir da weiterhelfen?

UweS · 25. Oktober 2016

Für die Pagina gibt es keinen einzigen CSS Befehl. Einfach einmal die .pagination Anweisungen aus einem anderen Template (protostar) kopieren.

Spoiler anzeigen

Code

.pagination {
	margin: 18px 0;
}
.pagination ul {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin-left: 0;
	margin-bottom: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul > li {
	display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span {
	float: left;
	padding: 4px 12px;
	line-height: 18px;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #ddd;
	border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
	background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
	color: #999;
	cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
	color: #999;
	background-color: transparent;
	cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
	border-left-width: 1px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
}
.pagination-centered {
	text-align: center;
}
.pagination-right {
	text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span {
	padding: 11px 19px;
	font-size: 16.25px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > a,
.pagination-small ul > li:first-child > span {
	-webkit-border-top-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > a,
.pagination-small ul > li:last-child > span {
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
	padding: 2px 10px;
	font-size: 12px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
	padding: 0 6px;
	font-size: 9.75px;
}

Alles anzeigen

Loschdi · 25. Oktober 2016

Ein eigenes Override wenn nötig bekommst Du damit hin:

Pagination Override

phob · 31. Oktober 2016

Ups, sorry, ich war ne zeitlang etwas im Streß, da ich arbeitsmäßig gerade sehr viel anderes zu tun hatte und noch vor mir habe. Eure HIlfen sehen gut aus, mir fehlt gerade die Zeit diese in die Tat umzusetzen. Bitte nicht wundern wenn ich erst die nächsten Tage mich dazu äußere.

Vorweg trotzdem ein großes Dankeschön.

astrid · 31. Oktober 2016

Vielleicht ist dieses Override auch etwas für dich: https://www.j-over.de/de/templ…de/andere/pagination.html

phob · 4. November 2016

Astrids Linktipp habe ich mir als erstes durchgelesen. Die dortige Lösung (Erstellen einer pagination.php sowie CSS-Ergänzungen) war für mich die Lösung des Problems. Danke dir astrid!