Kommentiertes Stylesheet des Standardthemes
Dieses ist eine umstrukturierte und kommentierte Version des Standardthemes für die Blogsoftware serendipity. Die Styles wurden in folgenden Gruppen neu zusammengefasst: Generell, Kopfbereich, Fußbereich, Eintrag, Kommentare, Kommentarformular, Seitenleiste, Kalender, Bilder/Medien.
Fügt bitte zu dieser Seite keine neuen Styles hinzu oder verändert den Code des Original-Stylesheets. Wenn jemand der Meinung ist, etwas sei nicht hinreichend beschrieben, ändert lediglich den Bereich 'Beschreibung:'. Somit ist sichergestellt, dass neue Theme-Gestalter immer das Standardtheme als Basis für neue Themes benutzen.
Generelle Styles
h4,h3 {
margin: 0; }
Beschreibung: wird im Titel von Einträgen und Elementen der Seitenleiste benutzt
input, textarea {
font-size: 10pt;
font-family: verdana, arial, helvetica, sans-serif; }
Beschreibung: Eingabefelder, die in Formularen benutzt werden
th, td {
font-size: 10pt; }
Beschreibung: Kopfzeilen und Zeilen in Tabellen
p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif; }
Beschreibung: Der Zeichensatz des Themes
a:link, a:visited, a:active {
color: #003366;
text-decoration: underline; }
Beschreibung: Alle Links sind blau und werden unterstrichen
a:hover {
color: #000000;
text-decoration: underline; }
Beschreibung: Wenn der Mauszeiger über einem Link steht, wechselt dessen Farbe zu schwarz
.serendipity_center {
margin-left: auto;
margin-right: auto;
text-align: center; }
Beschreibung: Ein zentriertes Element
.serendipity_msg_important {
color: red; }
Beschreibung: Warnmeldungen von s9y
.serendipity_msg_notice {
color: green; }
Beschreibung: Hinweise von s9y (z.B. wenn ein Kommentar gespeichert wurde)
Strukturelle Styles
body {
font-size: 10pt;
margin: 0;
background-color: #D2DFF2;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;}
Beschreibung: Vorgabe für das gesamte Blog, so lange diese nicht an anderer Stelle überschrieben werden; dazu gehört auch der Seitenfuß
#serendipity_banner {
margin: auto;
width: 100%;
height: 72px;
background-image: url({TEMPLATE_PATH}img/background.png);}
Beschreibung: Behälter für das Banner (Seitenkopf)
#mainpane {
border-bottom: 1px solid #000000;
margin: auto;
width: 100%;
border-top: 0px;
background-color: #FFFFFF;
border-top: 1px solid #000000;}
Beschreibung: Behälter für Inhalt und Seitenleiste(n)
#content {
padding: 10px;
margin: 10px;
width: auto;}
Beschreibung: Behälter für die Spalte mit den Einträgen
#serendipityRightSideBar {
width: 170px;
border-left: 1px dashed #000000;
padding: 10px;
vertical-align: top;}
Beschreibung: Behälter für die rechte Seitenleiste
#serendipityLeftSideBar {
width: 170px;
border-right: 1px dashed #000000;
padding: 10px;
vertical-align: top;}
Beschreibung: Behälter für die linke Seitenleiste
Styles für Kopfzeile und Banner
a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
color: #FFFFFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size : 20px;
padding-left:15px;
padding-top: 10px;
margin: 0px;
text-decoration: none;}
Beschreibung: Der große Link im Banner (Blogname oder Titel eines Eintrages)
a.homelink2,
a.homelink2:hover,
a.homelink2:link,
a.homelink2:visited,
#serendipity_banner h2 {
color: #FFFFFF;
padding-left: 15px;
font-size: 14px;
margin: 0px;
text-decoration: none;}
Beschreibung: Der kleinere Link im Banner (Beschreibung des Blogs)
Styles für Einträge
.serendipity_entry_date {
margin: auto;}
Beschreibung: Behälter für Titel und Datum eines Eintrages
.serendipity_date {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: large;
color: #333333;
margin: 0;
margin-top: 20px;
text-align: right;}
Beschreibung: Die eigentliche Anzeige des Datums unter dem Titel eines Eintrages
.serendipity_title {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
margin-top: 10px;
color: #333333;
padding-left: 5px;
border-bottom: 2px solid #36558C;}
Beschreibung: Titel eines Eintrages
.serendipity_title a:link, .serendipity_title a:visited {
text-decoration: none;
border: 0;
color: #000000;}
Beschreibung: Link im Titel eines Eintrages, normalerweise schwarz
.serendipity_title a:hover {
color: #FF0000;}
Beschreibung: Link im Titel eines Eintrage wird beim Überfahren mit dem Mauszeiger rot
.serendipity_entry {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #333333;
font-size: 9.5pt;
font-weight: normal;
padding-right: 10px;
width: 95%;
margin: auto;
margin-top: 10px;}
Beschreibung: Behälter für den Eintrag
.serendipity_entry p {
margin: 0px;
padding-bottom: 0px;}
Beschreibung: Zusätzliche Styles für den Text eines Eintrages
.serendipity_entry_body_folded,
.serendipity_entry_body_unfolded,
.serendipity_entry_extended {
}
Beschreibung: Diese Styles werden im Standardtheme nicht benutzt, können jedoch als zusätzliche Styles für den vollständigen Eintrag benutzt werden
div.serendipity_entryFooter {
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
padding-top: 10px;
padding-bottom: 4px;
clear: both;}
Beschreibung: Der kleingeschriebene Text am Ende eines Eintrages ('Geschrieben von' usw.)
img.serendipity_entryIcon {
float: right;
border: 0px;}
Beschreibung: Styles für das Kategorie-Icon (falls es benutzt wird)
.serendipity_entry_author_self {
}
Beschreibung: Wird standardmäßig nicht benutzt, kann aber verwendet werden, um zusätzlich die Einträge eines Autoren anzuzeigen, wenn dieser eingeloggt ist
Styles für Kommentare
.serendipity_comments {
}
Beschreibung: Behälter für alle Kommentare (wird im Standardtheme nicht benutzt)
.serendipity_commentsTitle {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
margin-top: 10px;
color: #333333;
padding-left: 5px;
border-bottom: 2px solid #36558C;}
Beschreibung: Titel in Kommentaren, Trackbacks und Kommentarformular
.serendipity_comment {
font-size: 13px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
color: #404040;
padding: 3px;
background-color: #FFFFFF;
overflow: auto;}
Beschreibung: Behälter für einzelne Kommentare
.serendipity_comment_source {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
padding-bottom: 3px;
border-bottom: 2px solid #36558C;}
Beschreibung: Ursprung eines Kommentars (Verfasser, Datum usw.)
.serendipity_comment_author_self .serendipity_comment_source {
background-color: #EEEEFF;}
Beschreibung: Darstellung eines Kommentars eines eingeloggten Autors
Formular für Kommentare
.serendipity_commentForm {
font-size: 13px;
color: #404040;
margin-bottom: 13px;
margin-right: 10px;
margin-left: 10px;
background-color: #FFFFFF;}
Beschreibung: Behälter für das gesamte Kommentar-Formular
td.serendipity_commentsLabel {
font-size: 12px;
font-weight: bold;
vertical-align: top;}
Beschreibung: Beschriftung der Formularfelder (Name, E-Mail usw.)
td.serendipity_commentsValue input,
td.serendipity_commentsValue select,
td.serendipity_commentsValue textarea {
font-size: 12px;
padding: 2px;
width: 400px;}
Beschreibung: Die Eingabefelder des Kommentarformulars
Styles für die Seitenleiste(n)
div.serendipitySideBarItem {
padding-bottom: 12px;
margin-bottom: 12px;
font-size: 12px;
font-weight:normal;
border-bottom: solid 2px #36558C;}
Beschreibung: Behälter für einzelne Blöcke/Elemente in der bzw. den Seitenleiste(n)
.serendipitySideBarTitle {
margin: 0;
font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
font-weight:bold;
padding-left:2px;
padding-bottom:2px;}
Beschreibung: Überschrift eines Seitenleisten-Elements
div.serendipityPlug {
padding-left: 10px;}
Beschreibung: Das Seitenleisten-Element 'Powered by'
div.serendipityPlug a {
text-decoration: none;
border: 0px;}
Beschreibung: Der Link zu 'Powered by'
.serendipityImageButton {
cursor: pointer;}
Beschreibung: Das Bild zu 'Powered by' (falls es angezeigt wird)
Kalender-Styles
table.serendipity_calendar td {
font-size:11px;
padding: 3px;}
Beschreibung: Behälter für Tabellenzeilen des Kalenders
table.serendipity_calendar a {
color: #FF0000;
font-weight: bold;
text-decoration:none;}
Beschreibung: Links in Daten im Kalender
table.serendipity_calendar a:hover {
text-decoration: none;}
Beschreibung: Links in Daten im Kalender, wenn der Mauszeiger über dem Link steht
td.serendipity_weekDayName {
font-size:11px;
font-weight:bold;}
Beschreibung: Namen der Wochentage im Kalender
td.serendipity_calendarHeader a:link,
td.serendipity_calendarHeader a:visited,
td.serendipity_calendarHeader a:hover {
border: 0;
text-decoration: none;}
Beschreibung: Monatsname und Pfeile im Kalender
Eingebettete Bilder aus der s9y-Mediendatenbank
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
border: 1px solid #DDDDDD;
background-color: #EFEFEF;
margin: 3px;
padding: 3px;
text-align: center;}
Beschreibung: Behälter für Bild und Beschriftung des Bildes
.serendipity_imageComment_center {
margin: auto;}
Beschreibung: Bild zentriert im Text
.serendipity_imageComment_left {
float: left;}
Beschreibung: Bild linksbündig im Text
.serendipity_imageComment_right {
float: right;}
Beschreibung: Bild rechtsbündig im Text
.serendipity_imageComment_img,
.serendipity_imageComment_img img {
margin: 0px;
padding: 0px;
text-align: center;}
Beschreibung: Styles für das eigentliche Bild selbst
.serendipity_imageComment_txt {
border-top: 1px solid #DDDDDD;
margin: 0px;
padding: 3px;
clear: both;
font-size: 8pt;
text-align: center;}
Beschreibung: Die Beschriftung unterhalb des Bildes (falls diese angezeigt wird)
