Skip to main content

Rahmen auf allen Bildern (HTML)

Sie können CSS verwenden, um Rahmen um alle Bilder herum hinzuzufügen, je nach Bildtyp. So können Sie beispielsweise alle Blockbilder mit Rahmen versehen, Inline-Bilder jedoch ohne Rahmen lassen.

Bei Bildern, die sich innerhalb von Abbildungen und Infografiken befinden, haben Sie außerdem die Möglichkeit, einen Rahmen um den gesamten Abschnitt der Abbildung/Infografik hinzuzufügen. Sie könnten also einen Rahmen um den Abschnitt haben, aber nicht um das Bild. Oder Sie können beide mit unterschiedlichen Rändern versehen.

Image of a space shuttle. It has been added to a topic as a figure, as it has a title (we are looking at the output topic). There is a pink dotted border but it is around the entire area allocated to the figure, and not around the edge of the image.

Gehen Sie wie folgt vor, um CSS zur Gestaltung von Bildrahmen für HTML-Ausgaben zu verwenden. Beachten Sie, dass wir für die angegebenen Beispiele einen rosa gepunkteten Rand mit einer Breite von 3 px verwendet haben. Auf jedem Bild befindet sich ebenfalls ein 1-em-Padding (interner Rand). Sie können Größe, Stil und Padding nach Bedarf ändern.

Tipp

Für Informationen zur Verwendung von CSS für Rahmenstile empfehlen wir die Website von w3schools.

  1. Verwenden Sie einen Code- oder Texteditor, um eine CSS-Datei zu erstellen. Geben Sie ihr einen passenden Namen und speichern Sie sie mit der Erweiterung .css.

    Anmerkung

    Wenn Sie bereits ein benutzerdefiniertes CSS für Ihr Layout verwenden, sollten Sie stattdessen die betreffende CSS-Datei bearbeiten.

  2. Geben Sie das CSS für die gewünschten Rahmenstile ein.

    Um Blockbilder zu gestalten, fügen Sie Ihre Rahmengestaltung für die Klasse .mediaobject img hinzu. Beispiel:

    .mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

    Um Abbildungsabschnitte zu gestalten, fügen Sie Ihre Rahmengestaltung für die Klasse .figure hinzu. Beispiel:

    .figure {
    border: 3px dotted #FF1493; padding:1em;
}

    Um informalfigure-Abschnitte zu gestalten, fügen Sie Ihre Rahmengestaltung für die Klasse .informalfigure hinzu. Beispiel:

    .informalfigure {
  border: 3px dotted #FF1493; padding:1em;
}

    Um Inline-Bilder zu gestalten, fügen Sie Ihre Rahmengestaltung für die Klasse .inlinemediaobject hinzu. Beispiel:

    .inlinemediaobject {
  border: 3px dotted #FF1493; padding:1em;
}

    Anmerkung

    Die Klassen figure und informalfigure sind für die Gestaltung der Abbildungs- und informalfigure-Abschnitte gedacht, nicht für die Bilder darin. Die Bilder in den Abschnitten sind entweder Blockbilder, die Sie mit mediaobject img gestalten können, oder Inline-Bilder, die Sie mit inlinemediaobject gestalten können.

  3. Speichern Sie Ihre CSS-Datei.

  4. Wählen Sie im oberen Menü Layout aus.

    Paligo editor. The Layout option in the header menu is highlighted.

    Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

  5. Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

    Tipp

    Sie können die URL des Layout-Editors kopieren und in eine neue Registerkarte in Ihrem Browser einfügen. Dies kann nützlich sein, wenn Sie häufig zwischen Ihren Paligo-Inhalten und den Layout-Einstellungen wechseln.

  6. Wählen Sie CSS, JS, Logos und andere Assets in der Seitenleiste aus.

    CSS_JS_logos_and_other_assets.png

  7. Wählen Sie Upload im Abschnitt CSS.

    CSS settings box with a single field. The field has an Upload button.

    Wichtig

    Wenn Sie eine CSS-Datei hochladen, ersetzt diese alle CSS-Dateien, die derzeit mit dem Layout verknüpft sind.

    Anmerkung

    Wenn Sie ein HTML-Layout und kein HTML5-Layout verwenden, befindet sich die CSS-Upload-Funktion in der Kategorie Allgemein.

  8. Ziehen Sie Ihre benutzerdefinierte CSS-Datei aus dem Dateisystem Ihres Computers in das Dateiupload-Dialogfeld.

    File upload dialog. It shows an upload icon and instructs the user to drag and drop a file into the file upload area.

    Paligo lädt die CSS-Datei auf den Paligo-Server hoch.

    Anmerkung

    Sie sollten nur validierte CSS-Dateien mit der Dateierweiterung .CSS hochladen.

  9. Drücken Sie Speichern. Save icon.

Wenn Sie mit diesem Layout veröffentlichen, werden die CSS-Styles auf Ihre veröffentlichte Ausgabe angewendet.