headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Template fhs-basic-all Version 2.4 eu > stylesheet.css
Saarland English
A

stylesheet.css

In der stylsheet.css wurden folgende Änderungen / Ergänzungen vorgenommen:

Die Voreinstellung des Templates auf die Schriftfamilie wurde umgestellt: Helvetica, sans-serif
Die Schrift Open-sans wurde ersatzlos entfernt.

Die Formatierungen, die im Editor (tinymce) unter 'Formate' als Dropdown-Auswahl erscheinen, wurden zusammengefasst, neu sortiert und innerhalb der stylesheet.css nach oben verlagert (ca. ab Zeile 10 - 245). Nachstehend sind nur die wichtigsten Formatierungsneuerungen aufgeführt.

Silbentrennung

/* Silbentrennung */
/* wikipedia: Hyphen (englisch) steht für: Bindestrich (im Englischen auch Trennstrich), siehe Viertelgeviertstrich#Bindestrich */
div.Silbentrennung, p.Silbentrennung, span.Silbentrennung {
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}

Demotext

span.Silbentrennung: Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! (span-ende) Und ab hier keine Silbentrennung mehr: Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

p.Silbentrennung / div.Silbentrennung + Blocksatz: Hier kommt der gleiche Testsatz zum Einsatz. Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

Wer möchte, dass auf der gesamten Website die automatische Silbentrennung aktiv ist, schreibt in den CMS-Einstellungen in der Sprach-Datei das Wort 'Silbentrennung' in das Feld Text3.


Fußnoten

/* Fußnoten */
body {
counter-reset: fussnote;
}
.autoFussn_Verweis { /* Durchnummerierung der Verweise im Text auf die Fußnoten unter den Text */
counter-increment: fuss;
vertical-align: super;
font-weight: bolder;
font-size: 75%;
}
.autoFussn_Verweis::after {
content: ']';
}
.autoFussn_Verweis::before {
content: '[';
}
span.autoFussn_Verweis {}

div.Headline_Fussnote {
margin: 1em .5em .3em .5em;
border-bottom: 1px solid gray;
padding: 0em .5em 0em .3em;
color: #444;
font-size: .95em;
line-height: normal;
}
div.Headline_Fussnote::before {
content: 'Fussnote(n) ';
}
p.auto_Fussnote { /* automatisch Durchnummerierung der Fußnoten unter dem Text */
counter-increment: fussnote;
color: #444;
margin: 0em 0.5em 0em 1.5em;
font-size: 0.95em;
}
p.auto_Fussnote::before {
content: counter(fussnote);
margin-right: .5em;
margin-left: -1em;
vertical-align: super;
font-weight: bold;
font-size: 75%;
}

span.foot_Verweis {
}
span.foot_Verweis::before {
content: '[*]';
vertical-align: super;
font-weight: normal;
font-size: 70%;
color: #040;
}
span.footnote {
padding: .5em .5em .5em 1.0em;
position: relative;
color: #333;
border-top: #333 solid 1px;
margin: 1em 0 .75em;
font-size: 90%;
line-height: normal;
}
span.footnote::before {
color: #040;
content: "*" !important;
display: block;
font-size: 90%;
position: absolute;
left: .25em;
top: .4em;
}

In die Template - Hauptfarben - Anpassung habe ich das Fußnoten-Format eingefügt.
Beim Fußnoten-Format ist nun die Farbe der horizontalen Linie gleich mit der <hr> - Farbe (Template-Hauptfarbe):

Nicht nummerierte Fußnotenverweise werden mit dem span.foot_Verweis formatiert: Text mit Verweis  auf eine Fußnote.
Dazu schreibt man hinter des Wort, das einen Verweis erhalten soll ein Blank, markiert es und formatiert es dann mit span.foot_Verweis. Wird die Formatierung ausgewählt ohne dass ein Zeichen markiert wurde, wird zwar zunächst das Fußnotenzeichen angezeigt, beim nächsten Speichern wird die 'vermeintlich leere' Formatierung vom Editor gelöscht bevor der Inhalt des Fensters gespeichert wird.
Deren Fußnote muss dann mit dem span.footnote Format formatiert werden, wobei der span-Bereich natürlich den Fußnotentext enthalten muss.

Diese Fußnote steht in einem <span> . . </span> - Bereich.

Für nummerierte Fußnotenverweise muss wie folgt vorgegangen werden:
Hinter dem Wort1, dass einen Fußnotenverweis erhalten soll2, wird die fortlaufende Zahl des Fußnotenverweises eingetragen3 und diese Zahl wird dann markiert und mit den Format span.autoFussn_Verweis formatiert. Der zugehörige Fußnotentext muss mit den Format div.Headline_Fussnote für die horizontale Trennlinie begonnen werden. Der eigentliche Text wird mit p.auto_Fussnote formatiert. Dadurch wird vor jedem <p>-Element die fortlaufende Fußnoten-Nummer ausgegeben. D.h. um die nächste Fußnote zu beginnen betätigt man einfach die RETURN-Taste. Innerhalb einer Fußnote darf andererseits kein harter Zeilenumbruch enthalten sein.

 

Diese Formate sind noch im Test-Stadium.
Mit Shift-Enter kann man innerhalb der Fußnote eine neue Zeile anfangen.

Ein Return / Enter führt zur nächsten Nummer und Fußnote.

Damit die Nummerierung der Fußnoten mit den Verweisen übereinstimmt, muss man evtl. die Nummern in den Verweisen anpassen oder die Texte in den Fußnoten verschieben.


TAB-Reiter - Simulation

/* Reiter eines TAB */
span.Tab {
border: 1px solid black;
border-bottom: 0px;
border-radius: 3px 3px 0px 0px;
background-color: #f0f0f0;
padding-left: 3px;
padding-right: 3px;
margin-left: .7em;
margin-right: .7em;
}
span.Tab::before {content: "_"; position: relative; left: -.7em; bottom: -.15em;}
span.Tab::after {content: "_"; position: relative; left: .7em; bottom: -.15em;}

span.Tab: Diese Formatierung simuliert das Aussehen eines TAB-Reiters.


Tasten - Darstellung

/* Tastertur-Tasten */
span.Taste {
padding: 0em 0.3em 0em 0.3em;
border: 1px solid gray;
border-radius: .4em;
box-shadow: #999 0.1em 0.2em 0.2em 0.2em;
}

span.Taste: Diese Formatierung soll f ü r einzelne oder mehrere Tastenanschläge stehen oder für benannte Tasten (Return, Entf, Ende ...).

 


Last Update Time-Stamp um das Wort 'Uhr' ergänzt

#pp_last_update time:after {
content: "Uhr";
padding-left: 3px;
}

Durch diese Formatierung wird die "last update" Anzeige mit dem Nachwort 'Uhr' ausgestattet.


Formate im Zusammenhang mit dem Plugin Privacy_XH

Falls das Plugin nicht installiert ist, erzeugen die Formate p.no_cookies_text und p.cookies_text zwei eigentlich nicht brauchbare Formatierungen. Ihre Verwendung macht also nur bei installiertem Plugin Sinn.

Hintergrund:

Durch das Plugin werden zwei Zustände unterschieden: a) Cookies sind noch nicht explizit erlaubt, b) Cookies wurden vom User erlaubt
Der Sinn des Plugins ist, bestimmte Plugins oder Scripte nur dann auszuführen (weil sie Cookies setzen, die benutzerspezifische Daten speichern), wenn der User seine Zustimmung gegeben hat.
Es wird jedoch keine Funktion bereitgestellt, die abhängig davon, ob diese Zustimmung erfolgte oder nicht, Text darstellt oder nicht.

Bei der Formatierung mit 'visibility: hidden;' oder 'visibility: visible;' wird zwar die Sichtbarkeit umgeschaltet, der Text belegt jedoch auch Platz, wenn er unsichtbar ist. Das führt zu unschönen leeren Räumen in der Ausgabe. Die Alternative 'display: none;' oder 'display: block;' stellt genau das Gesuchte zur Verfügung. Es gibt jedoch einen 'dummen' Nebeneffekt: Diese 'Unsichtbarkeit' funktioniert auch im Editorfenster!

Um den Text, der 'display: none; - formatiert' ist, zu bearbeiten, müsste man jedes Mal in den Quellcode-Modus umschalten. Das ist nicht sehr komfortabel. Deshalb habe ich in der stylesheet.css Pseudoformate definiert, die 'nur' für die Anzeige im Editorfenster vorhanden sind:

Durch entsprechende aktive Änderungen der Style-Formatierung wird im 'normalen' Browserfenster (also nach Verlassen des Editors) die '::before - Formatierung' und die Hintergrundfarbe entfernt und 'display: none;' oder 'display: block;' entsprechend der User-Zustimmung umgeschaltet. Dadurch erfolgt folgende Anzeige:

Noch keine User-Zustimmung: no_cookies_text ⇒ wird angezeigt | cookies_text ⇒ keine Anzeige
Mit User-Zustimmung: no_cookies_text ⇒ keine Anzeige | cookies_text ⇒ wird angezeigt

Eigene Formatierungen, die keine Modifikation der beiden vorgenannten Formate sind, werden nicht beeinflusst.


Bildquellen

Slideshowbilder von https://www.cmsimple-xh.org/
Logo: http://cmsimple.lembach-kr.de/?Template-fhs-basic-all2

Letzte Bearbeitung:

| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap