CSS verwenden
weblica bietet Ihnen vielfältige Möglichkeiten, das Aussehen über die Wahl eines Designs, die Farbgebung und die Auswahl der verwendeten Bilder, etc. zu bestimmen. Doch manchmal möchten Sie vielleicht das Aussehen oder die Anordnung eines Elements weiter anpassen, für das weblica über die Bedienoberfläche nicht direkt eine Möglichkeit bietet. Hier kommt CSS ins Spiel.
Projekt-weit gültiger CSS-Code
weblica ermöglicht es Ihnen, eigenen CSS-Code für den gesamten Web-Auftritt zentral zu hinterlegen. Dieser eigene CSS-Code wird hierbei den Style-Sheets von weblica für den Webauftritt hinzu gefügt. Das gibt Ihnen die Möglichkeit, bestende CSS-Regeln von weblica gezielt zu ersetzten oder anzupassen.
Sie erreichen den CSS-Dialog für das Projekt über das Hauptmenü Projekt->CSS.
Im CSS-Dialog können Sie CSS-Anweisungen für folgende Bereiche hinterlegen:
In der Regel hinterlegen Sie Ihren eigenen Code auf der Registerkarte Global. Für fortgeschrittene Anpassungen kann es in Ausnahmefällen nötig sein, dass Sie Code gezielt für eine Aubsaustufe hinterlegen wollen, und darum bietet Ihnen weblica diese Möglichkeit an. Aber keine Angst: In der Regel ist dies nicht nötig.
Sie erreichen den CSS-Dialog für das Projekt über das Hauptmenü Projekt->CSS.
Im CSS-Dialog können Sie CSS-Anweisungen für folgende Bereiche hinterlegen:
- Global (global.css): Dieser Code gilt für jede Seite, unabhängig von der sog. Ausbaustufe.
- Alle Spalten (full.css): Dieser Code gilt für Seiten, auf denen alle drei Spalten angezeigt werden.
- Ausbaustufe Links (lcenter.css): Dieser Code gilt für Seiten, auf denen nur die linke Spalte und der Hauptinhalt angezeigt werden.
- Ausbau Stufe Rechts (rcenter.css): Dieser Code gilt für Seiten, auf denen nur der Hauptinhalt und die rechte Spalte angezeigt werden.
- Minimale Ausbaustufe (center.css): Dieser Code gilt nur für Seiten, auf denen nur der Hauptinhalt angezeigt wird.
- Druck (print.css): Dieser Code gilt für den Ausdruck einer Webseite im Web-Browser.
In der Regel hinterlegen Sie Ihren eigenen Code auf der Registerkarte Global. Für fortgeschrittene Anpassungen kann es in Ausnahmefällen nötig sein, dass Sie Code gezielt für eine Aubsaustufe hinterlegen wollen, und darum bietet Ihnen weblica diese Möglichkeit an. Aber keine Angst: In der Regel ist dies nicht nötig.
Wenn eine Regel nicht zu funktionieren scheint
Manchmal kommt es vor, dass eine neu hinterlegte Regel im Projekt-weit gültigen CSS nicht auf Anhieb funktioniert. Generieren Sie in diesem Fall einmal für die externe Vorschau, damit das CSS für den Auftritt volllständig neu erstellt wird und der Browser die entsprechende Regel auch lädt. Greift die Regel dann noch immer nicht, können Sie daran gehen, den Fehler zu suchen.
Weitere Informationen zu den Ausbaustufen
Weitere Informationen zu den Ausbaustufen finden Sie im Abschnitt Seitenaufbau.
Ausdrucken von Webseiten: Das Print.css
Print-CSS des Designs
In der Regel gilt das Print-CSS eines Designs; und zwar solange Sie keinen eigenen Code für das Print-CSS im Projekt hinterlegen. Diese Print-CSS sind je nach Design sehr umfangreich und verändern das Ausshen für den Ausdruck unter Umständen erheblich. Das ist nicht immer erwünscht.
Eigenes Print-CSS verwenden
Wenn Sie das nicht möchten, haben Sie die Möglichkeit, auf der Basis des Design-Layouts die Seite für den Ausdruck punktuell anzupassen, indem Sie beispielsweise bestimmte Element für den Druck ausblenden.
Hierzu hinterlegen Sie den gewünschten Code für das Print-CSS. Dadurch wird das Print-CSS des Designs vollständig ignoriert. Der eigene Print-CSS Code gilt dabei ergänzend zum Haupt-CSS des Designs. Dadurch wird es einfach möglich, mit ein paar wenigen Zeilen CSS unerwünschte Elemente auszublenden oder das Styling von Text und Überschriften anzupassen und hierbei das grundsätzliche Aussehen aus dem Design beizubehalten.
Hierzu hinterlegen Sie den gewünschten Code für das Print-CSS. Dadurch wird das Print-CSS des Designs vollständig ignoriert. Der eigene Print-CSS Code gilt dabei ergänzend zum Haupt-CSS des Designs. Dadurch wird es einfach möglich, mit ein paar wenigen Zeilen CSS unerwünschte Elemente auszublenden oder das Styling von Text und Überschriften anzupassen und hierbei das grundsätzliche Aussehen aus dem Design beizubehalten.
Der Media-Type
Damit der eigene Print-CSS Code auf dem Haupt-CSS basiert, lautet der Media-Type des Haupt-CSS in diesem Fall „all“.
Im weblica Learning-Center finden Sie eine Reihe von Beispielen für Print-CSS-Anweisungen.
CSS-Code im HTML-Head einer Seite
In weblica können Sie eigene CSS-Anweisungen auch im HTML-Head einer Seite hinterlegen. Dieser Code gilt dann auf der jeweiligen Seite. Wenn Sie für eine Seite zusätzlich die Option "Inhalt" von übergeordneter Seite übernehmen" aktiviert haben, berücksichtigt weblica auch Anweisungen, die Sie im HTML-Head von übergeordneten Seiten hinterlegt haben. Weitere Informationen hierzu finden Sie im Abschnitt Seiten-Eigenschaften - HTML / CSS.
Style-Definitionen in einem HTML-Absatz
Style-Definitionen mittels <style type="txt/css"></style> gehören laut Web-Standard in den HTML-Head einer Seite. Findet weblica beim Generieren solche Style-Definitionen ausserhalb des HTML-Head, verschiebt es diese automatisch in den HTML-Head der Seite. Das gibt Ihnen die Möglichkeit, auf einer Seite Style-Definitionen auch in einem HTML-Absatz zu verwenden, wenn dies z.B. aus Gründen der Übersichtlichkeit für Sie praktischer ist.
Absatz-Eigenschaften: CSS/HTML
Absatz-Eigenschaften - CSS / HTML
Für alle Absätze, mit Ausnahme des Referenz-Absatzes, können Sie in den Absatz-Eigenschaften auf der Registerkarte HTML/CSS die Absatz-Id einsehen. Diese Id identifiziert einen Absatz innerhalb der jeweiligen Seite eindeutig. Über diese Id können Sie den gewünschten Absatz direkt per CSS-Regel oder per jQuery ansprechen.
Oft ist es jedoch praktischer, eine Reihe von Absätzen anzusprechen, die einer oder mehreren CSS-Klasse gehören. Daher können Sie einem Absatz eigene CSS-Klassen zuordnen. So können Sie beispielsweise bestimmte Text-Absätze als Info-Boxe auszeichnen und mit einer entsprechenden CSS-Regel optisch speziell herausstellen. Die Info-Boxen in der vorliegenden Hilfe sind ein Beispiel hierfür.
Optional können Sie weblica auch anweisen, für den gesamten Absatz mit Titel, Anker und dem eigentlichen Absatz-Inhalt (das ist der Teil des Absatzes, der über die oben genannte Absatz-Id referenziert ist) ein umgebendes Div-Element zu generieren, um diesen dann ebenfalls eigene Klassen für das Styling zuzuweisen. So ist es z.B. einfach möglich, den Absatz inklusive Titel als Info-Box herauszustellen.
Im weblica Learning-Center finden Sie hierzu zahlreiche Beispiele.
Oft ist es jedoch praktischer, eine Reihe von Absätzen anzusprechen, die einer oder mehreren CSS-Klasse gehören. Daher können Sie einem Absatz eigene CSS-Klassen zuordnen. So können Sie beispielsweise bestimmte Text-Absätze als Info-Boxe auszeichnen und mit einer entsprechenden CSS-Regel optisch speziell herausstellen. Die Info-Boxen in der vorliegenden Hilfe sind ein Beispiel hierfür.
Optional können Sie weblica auch anweisen, für den gesamten Absatz mit Titel, Anker und dem eigentlichen Absatz-Inhalt (das ist der Teil des Absatzes, der über die oben genannte Absatz-Id referenziert ist) ein umgebendes Div-Element zu generieren, um diesen dann ebenfalls eigene Klassen für das Styling zuzuweisen. So ist es z.B. einfach möglich, den Absatz inklusive Titel als Info-Box herauszustellen.
Im weblica Learning-Center finden Sie hierzu zahlreiche Beispiele.