| [Dieser Seite] |
Seiten-Nummerierung |
ImpressCMS verfügt über eine sogenannte Pagination die direkt integriert ist. Über die "Haupteinstellungen > Personalisierung" können aus einer Vorauswahl verschiedene Designs ausgewählt werden. Dieser Weg ist besonders für Einsteiger interessant, da eine Änderung am Code nicht notwendig ist.
Will man jedoch zu seiner Theme ein passendes Design für die Seiten-Nummerierung, dann sind HTML und CSS Kenntnisse gefragt. Das Erstellen ist denkbar einfach uns soll an einem Beispiel dargestellt werden.
Was ist zu tun?
Es ist empfehlenswert über die Einstellungen in der Administration unter "Pagination" den Voreingestellten Wert "default" auszuwählen, weil dieser anschliessend durch den Code der Theme überschrieben wird.
Wichtig ist auch, nach der Erstellung der neuen Pagination das Verzeichnis von "templates_c" zu leeren, damit die Templates neu generiert werden und das Ergebnis sichtbar wird. Alternative kann mittels den Einstellungen "Theme- und Templateänderungen sofort aktualisieren?" dies erledigt werden.
Der Code
Um starten zu können wird die "style.css" der aktiven Theme bearbeitet. Suchen Sie zur Sicherheit in dieser Datei nach dem Wort "pagination", denn es könnte sein das das Theme bereits über diese CSS Klassen verfügt.
Sollten bereits CSS Klassen vorhanden sein, können diese Überschrieben werden. Sind die Klassen mit "pagination" noch nicht in der "style.css" integriert, können diese nun eingebaut werden.
Der Standard Code der Klassen sieht so aus:
div.pagination.default{
margin-top: 20px;
margin-bottom: 10px;
}
div.pagination.personal a {
text-decoration: none;
}
div.pagination.personal a:hover, div.pagination.personal a:active {
/*CSS Style for the mouse hover of the links inside the pagination div*/
}
div.pagination.personal span.current {
/*CSS Style for the link of the current page*/
}
div.pagination.personal span.disabled {
display: none;
}
Diese Klassen können nun erweitert und nach belieben verändert werden. Anbei ein vollen Beipiel, welches unter allen Browsern funktioniert.
div.pagination.default {padding:6px 8px;text-align:center;}
div.pagination.default a { text-decoration: none;
color: #717171;
font: bold 11px Arial, sans-serif;
text-shadow: 0px 1px white;
padding: 6px 8px;margin-right:10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
div.pagination.default a:hover { -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
}
div.pagination.default a:active { -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}
div.pagination.default .current { text-decoration: none;
padding: 5px 8px;margin-right:10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #FFA149 0%, #FF842C 100%);
background: -moz-linear-gradient(top, #FFA149 0%, #FF842C 100%);
background: -o-linear-gradient(top, #FFA149 0%, #FF842C 100%);
background: -ms-linear-gradient(top, #FFA149 0%, #FF842C 100%);
background: linear-gradient(top, #FFA149 0%, #FF842C 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA149', endColorstr='#FF842C',GradientType=0 );
}
div.pagination.default .current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #FF842C 0%, #FFA149 100%);
background: -moz-linear-gradient(top, #FF842C 0%, #FFA149 100%);
background: -o-linear-gradient(top, #FF842C 0%, #FFA149 100%);
background: -ms-linear-gradient(top, #FF842C 0%, #FFA149 100%);
background: linear-gradient(top, #FF842C 0%, #FFA149 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF842C', endColorstr='#FFA149',GradientType=0 );
}
div.pagination.default .disabled {padding:5px 8px;border:1px solid #E6E6E6;color:#DDDDDD;}
Dieser Code wird einfach in die "style.css" eingefügt und gespeichert. Schaut man sich nun eine Inhaltsseite an, welche über eine Pagination verfügt, wird folgendes Ergebnis sichtbar.
Eine Online Demo dieser Pagination steht auch hier zur Verfügung, damit kann man gleich die "hover" Effekte testen.
TIP
Es ist nicht zwingenderweise notwendig die Pagination in die Theme zu integrieren, aber der Weg mit den meisten Vorteilen. Alternativ kann auch eine CSS Datei mit dem Namen erstellt werden und unter "root/libraries/paginationstyles/css" abgelegt werden. Außerdem muss noch in der libraries Datei "paginationstyles.php" der neue Style hinzugefügt werden und anschließend läßt sich dieser über die Administration auswählen.
