in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Bitte den ersten Anpas­sungshinweis beachten.
Ohne Anpassung an die Klassen- und Id-Namen des CSS des verwen­deten Weblica-Designs funktionieren die Code­schnipsel nicht.

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 15.04.12  /  update
 

Hinweise zur Anpassung von Codeschnipseln


Wird ein Codeschnipsel aus einer anderen Website übernommen, sei es aus dieser Website, sei es aus dem Weblica-Forum, oder z. B. aus Stackoverflow oder Alsacréations (siehe Codeschnipsel Informationsquellen), so kann es nötig sein, den Code dem gewünschten Geltungsbereich anzupassen.
Hier werden drei Anpassungsmöglichkeiten und -bedarfe vorgestellt.

Anpassung der Klassennamen und Element-Ids


Klassennamen und Element-Ids (z. B. #mainNavigation) in CSS-Codeschnipseln müssen beim Einbau an die Klassennamen und Element-Ids des jeweiligen Weblica-Design-Layouts (z. B. Argon, Lithium usw.) angepasst werden.
Unterlässt man die Anpassung, funktioniert der Codeschnipsel nicht.


zurück   |   nach oben


Anpassung der Resourcenfelder


Ressourcenfelder - das sind Referenzen auf Dateien in der Weblica-Dateiablage - müssen nach der Übernahme eines Codeschnipsels immer angepasst werden.

In den Codeschnipseln sind Ressourcenfelder immer farblich markiert.

Das Einfügen von Ressourcenfeldern wird hier in Einfügen von Datei-Referenzen in HTML-Code und in der Weblica Online-Hilfe erklärt.


zurück   |   nach oben


Anpassung eines Codeschnipsels beim Einbau


Die BaBox-Website ist zu grossen Teilen eine Experimentier-Website.
Viele Codeschnipsel haben z. B. einen Bezug zu einen bestimmten Absatz, der korrigiert werden muss, wenn der Codeschnipsel für mehr als einen Absatz gelten soll.

Zwei Bespiele:
  • einmal mit einem Bezug zu nur einem Absatz
  • einmal mit der Anpassung einer Weblica-CSS-Klasse (.textParagraph).

Beim Einbau in eine andere Website muss der Codeschnipsel an den gewünschten Geltungsbereich bzw. den passenden Einbauort mit korrespondierendem Wirkungsbereich angepasst werden.

Soll der 'Abstand oben vor einem Absatz' für die gesamte Website gelten, baut man folgenden Code ins globale CSS (Menüpunkt "Projekt") ein:
.textParagraph { margin-top: 16px; }

Soll der 'Abstand oben vor einem Absatz' für eine Seite und ihre untergeordneten Seiten gelten, baut man folgenden Code in die Seiteneigenschaften, Rubrik "HTML/CSS" ein:
<style type="text/css">
.textParagraph { margin-top: 16px; }
</style>


Soll der 'Abstand oben vor einem Absatz' für einen bestimmten Absatz gelten, baut man folgenden Code in den Seiteneigenschaften (Rubrik "HTML/CSS") der Seite ein, die den Absatz enthält:
<style type="text/css">
.pannn { margin-top: 16px; }
</style>

mit nnn = der Nummer (Id) des betreffenden Absatzes.
Alternativ kann der Code mit der angepassten Absatznummer auch in einen HTML-Absatz eingebaut werden (mehr dazu in Merkmale der Einbauorte, Abschnitt E3):.


Nun nehmen wir an, im zweiten Beispiel sollen nicht nur ein Bild, sondern drei von fünf Bildern auf einer Seite mit einem einseitigen Rahmen versehen werden.
Hier gibt es zwei Anpassungsalternativen:

1. Erweiterung um die Paragraphen-Ids der beiden anderen Bilder-Absätze, Einbau in den Seiteneigenschaften:
<style type="text/css">
#pa2590, #pa2593, #pa2598 { margin-left: 200px;
          width: 200px;
          border-bottom: 10px solid #ADBAC7;
          padding-bottom: 12px; }
</style>


2. Definition einer eigenen Klasse z. B. in den Seiteneigenschaften der Seite mit den Bildern, Rubrik "HTML/CSS":
<style type="text/css">
.bildRahmenUnten { margin-left: 200px;
          width: 200px;
          border-bottom: 10px solid #ADBAC7;
          padding-bottom: 12px; }
</style>

Dann wird jedem Absatz mit dem unten zu rahmenden Bild in den Absatzeigenschaften, Rubrik "CSS/HTML", die selbstdefinierte Klasse bildRahmenUnten (hier ohne Punkt) zugewiesen.

Solche Änderungen des Wirkungsbereichs von Codeschnipseln nehmen wir vergleichsweise häufig vor.

Die Möglichkeiten, die Weblica bietet, sind unbegrenzt.


zurück   |   nach oben


 

Weitere Überlegungen: CSS-Klassen versus allgemeines Blockelement div

Will man ein Seitenelement individuell gestalten, steht man vor der Wahl,
  • eine eigene CSS-Klasse, z. B. .infoBoxCs, zu definieren, und diese Klasse dem oder den Textabsätzen in den Absatzeigenschaften zuzuweisen, oder
  • den Absatz mit zwei HTML-Absätzen zu umschliessen, deren erster einen Bereich div (div = division = Bereich) mit style-Anweisungen enthält und deren zweiter den Bereich abschliesst.

Beispiel für die zweite Variante:

1. HTML-Absatz mit folgenden Inhalt:
<div style="color:red; font-size: 90%; text-align: center; padding: 20px; margin: 24px">

2. Textabsatz

3. HTML-Absatz, der den Bereich schliesst:
</div>

Welche Methode man anwendet, hängt davon ab, wie viele Elemente individuell gestaltet werden sollen.
Für das Beispiel der Infoboxen, die auf mehreren Seiten eingesetzt werden sollen, ist die erste Methode die beste.
Für die Formatierung von Elementen in HTML-Absätzen ist die zweite Methode die einzig mögliche, siehe z. B. Button / Bild / Grafik mit Link an fixer Position.
Weitere Anwendungsbeispiele für die zweite Methode: Schwebener Absatz, Zweispaltiger Absatz.

Mehr zu Klassen und IDs bei W3C Selectors (zu diesem Thema gibts auch hier später mehr).


zurück   |   nach oben


 

weiter zu den Beispielen weiter zu den Beispielen