Textformatierungen im Html Klotz

[carpe]

Absolute bekackte Frage..ich weiß. Ich schaffe es mittlerweile css Formatierungen hinzubekommen, auch im html Dokument bekomme ich das halbwegs hin.
Wie aber muss ich Formatierungen für den Text in einem einzelnen html Klotz eingeben. Schriftfarbe, Hintergrundfarbe und Randabstand des Textes beispielsweise.

[yellowled]

Wie aber muss ich Formatierungen für den Text in einem einzelnen html Klotz eingeben. Schriftfarbe, Hintergrundfarbe und Randabstand des Textes beispielsweise.

Es gibt keine beknackten Fragen.

Zunächst mal: Bitte, bitte keine Styling-Anweisungen mehr ins HTML schreiben, weder über ganz veraltete HTML-Attribute noch über das style-Attribut. Das ist schon lange nicht mehr nötig und eher hinderlich. Wir haben hart dafür gearbeitet, die Trennung von Markup und Styling zu haben.

Grundsätzlich schreibst Du also in den Inhaltsbereich der Klotzes Dein Markup, was Du halt brauchst, und gestaltest es dann über CSS – entweder über die style.css Deines Themes oder (falls Du ein Theme verwendest, das Teil des Kerns ist oder von Spartacus kommt) über die user.css. Ich nehme an, was Du Dich eigentlich fragst ist: Wie zum Teufel kann ich im CSS die Bestandteile eines Klotzes gestalten? Du brauchst den richtigen Selektor.

CSS-Anweisungen sehen immer ungefähr so aus:

Code: Select all

h3 {
    font-size: 1em;
}

Allgemein ausgedrückt:

Code: Select all

selektor {
    eigenschaft: wert;
}

Selektoren kann man verknüpfen – Du kannst also z.B. allgemein (global) alle h3-Elemente ansprechen oder den Selektor verfeinern. Nehmen wir an, Du willst nur die h3-Elemente gestalten, die in einem HTML-Klotz sitzen. Wie macht man das in CSS?

HTML-Klötze bekommen (normalerweise, das kann vom Theme abhängen) eine Klasse zugewiesen, die sie als HTML-Klotz identifiziert. Diese Klasse stellst Du dem Selektor einfach voran. Normalerweise heißt diese Klasse "serendipity_plugin_html_nugget", sie wird üblicherweise nach einem Muster erzeugt und vom Plugin-Namen abgeleitet (sprich: andere Seitenleisten-Plugins haben auch so eine Klasse, sie heißt aber anders).

Willst Du also, dass alle h3 in HTML-Klötzen doppelt so große Schrift wie oben haben, schreibst Du:

Code: Select all

.serendipity_plugin_html_nugget h3 {
    font-size: 2em;
}

(Der Punkt am Anfang ist wichtig, so schreibt man Klassen in CSS.)

Es würde den Rahmen hier sprengen, alles zu erklären, was man zu CSS-Selektoren wissen können wollte, daher als „weiterführende Lektüre“ das entsprechende Kapitel der (sehr, sehr guten) Reihe „Little Boxes“: http://little-boxes.de/lb1/6-selektoren ... arben.html

Wichtige Sonderregel: Diese Klasse spricht alle HTML-Klötze an, und da man das HTML-Klotz-Plugin tatsächlich mehrfach installieren kann, kann das ein Problem werden, wenn man z.B. die Inhalte verschiedener Klötze anders gestalten will. Manche Themes weisen daher den HTML-Klötzen zusätzlich eine id (einen eindeutigen Identifier) zu. (Einen id-Selektor schreibt man in CSS mit einem # am Anfang, also z.B. #mein_toller_html_klotz – so als Beispiel.)

Und nun fragst Du Dich vermutlich, wie Du herausfindest, ob ein Seitenleistenplugin eine id hat und welche Klassen? Jeder Browser hat heutzutage etwas, das sich „Devtools“ oder „Entwicklerwerkzeuge“ nennt. Auch das würde (allein aufgrund der Fülle an Browsern) hier den Rahmen sprengen, aber stellvertretend eine Einführung, wie man die im Firefox nutzt: https://developer.mozilla.org/de/docs/T ... _Inspektor (Alternativ kannst Du in die entsprechenden Template-Dateien Deines Themes gucken, aber das braucht etwas mehr Wissen darüber, wie Templates zusammenhängen und funktionieren. Inspektor ist vermutlich einfacher und schneller.)

Bei Fragen: einfach fragen.

YL

[carpe]

Die Klotz- ID habe ich nicht gefunden...somit wirken sich die Stylings auf beide Klötze aus, was aber so in Ordnung ist.

Dem Kategorien-plugin musste ich dann auch noch einen Randabstand zuweissen damit es wieder gleich aussieht.

Somit komme ich erstmal hin wie gewünscht.
Top und Vielen Dank.

[yellowled]

Die Klotz- ID habe ich nicht gefunden...

Wie gesagt: Das ist sogar eher selten in Themes, weil es einfach selten gebraucht wird. Wenn es für Dich auch so passt, umso besser.

Theoretisch könntest Du Dir das in die sidebar.tpl „hacken“, aber dann ist es (sofern Du 2k11 nicht als Kopie betreibst) nicht updatesicher. Viel einfacher (und updatesicher) wäre es, einfach den gesamten Inhalt eines HTML-Klotzes in ein div zu wickeln – dem kannst Du dann ja beliebig ids oder Klassen zuweisen.

YL