Überschriften in Weblication formatieren
Weblication bietet von Haus aus keine Möglichkeit, Überschriften ohne wysiwyg-Editor zu formatieren.
Mit einem kleinen javascript ist dies ohne weiteres möglich.
Das Problem
Überschriften sind im Weblication BASE Projekt nur dann im Textfeld formatierbar, wenn dieses Feld als wysiwyg-Feld definiert wurde. Das bringt aber meist an anderer Stelle Nachteile mit sich, beispielsweise wenn die Überschrift auch als meta-Title der Seite verwendet werden soll.
Auch die Definition neuer CSS-Only-Varianten ist häufig keine befriedigende Lösung, da sich für die Variante definierte Formatierungen immer gleich auf den ganzen Textinhalt des h* Texts auswirken.
Die Lösung - *per CSS-Only und javascript*
Als Ansatz verfolgen wir eine reine CSS-Only Version. Dies hat den Vorteil, dass außer der design.css keine weitere Datei angepasst werden muss.
Schritt 1: *Einbau jQuery Plugin*
Zuerst erweitern wir die design.js um folgenden Skript-Teil.
[design.js] jQuery Plugin für das Formatieren von Überschriften
(function( jQuery ){
jQuery.fn.colorHeadline = function() {
// Wenn sich die Datei im Editor befindet, wird die Aktion nicht ausgeführt
if(typeof wEditor == 'object'){
return false;
}
// Der Text der Überschrift
var text = this.get(0).innerHTML;
// Das Zeichen, welches ersetzt werden soll.
var substituteChar = '*';
// Das Tag, welches den zu formatierenden Text umschliesst. Sollte aus Gründen der Standardkonformitaet ein inline-Element sein.
var substituteTag = 'span';
// Die Klasse, welche dem umschliessenden span-Element zugewiesen wird
var substituteClass = 'headlineColorHighlight';
// Ersetzung
var colorText = text.replace(substituteChar,'<'+substituteTag+' class="'+substituteClass+'">').replace(substituteChar,'</'+substituteTag+'>');
// Neuen Text zuweisen
this.html(colorText);
};
})( jQuery );Schritt 2: *CSS-Only Variante definieren*
Nun wird in der design.css die CSS-Only Funktion mittels -w-jquery erweitert.
[design.css] jQuery Plugin für das Formatieren von Überschriften
.elementHeadline {margin:auto;}wird zu:
.elementHeadline {margin:auto;-w-jquery:jQuery(this).colorHeadline()}Schritt 3: *CSS Klasse für Formatierung definieren*
Im letzten Schritt wird nun noch die gewünschte Formatierung für die Klasse definiert:
[design.css] Formatierung der Klasse
.headlineColorHighlight {color:rgb(105,0,0)}