Skip to main content

Rahmen nur auf ausgewählten Bildern (HTML)

Wenn Sie Rahmen nur auf bestimmte Bilder anwenden möchten, gehen Sie wie folgt vor:

  1. Öffnen Sie ein Topic, das das Bild enthält, und wählen Sie das Bild aus.

  2. Wählen Sie das übergeordnete Element für den Inhalt aus, den Sie im Menü „Elementstruktur“ formatieren möchten.

    • Bei einem Blockbild ist das Element mediaobject

    • Bei einem Inline-Bild ist das Element inlinemediaobject

    • Bei einer Abbildung ist das Element figure

    • Bei einer informellen Abbildung ist das Element informalfigure

  3. Wählen Sie Zu Element wechseln aus.

    The mediaobject element is selected in the element context menu. It reveals a menu, and in that menu, the Go to element option is selected.

  4. Fügen Sie das Attribut role im Panel „Elementattribute“ hinzu und geben Sie dem Attribut einen Namen als Wert.

    Wir empfehlen Ihnen, einen gut erkennbaren Namen zu verwenden, z. B. specialborder.

    Element attributes section shows that the mediaobject element is selected. It has been given the role attribute with a value of specialborder

  5. Drücken Sie Speichern. Save icon.

  6. 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.

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

  7. Um Rahmen hinzuzufügen, die nur von Bildern mit der definierten Rolle verwendet werden, fügen Sie Ihrem CSS diesen Code hinzu:

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

    Wo:

    specialborder ist der Name des Werts, den Sie dem Rollenattribut in Schritt 4 gegeben haben.

    Anmerkung

    Sie können den Stil und die Farbe der Rahmen an Ihre eigenen Anforderungen anpassen. Die hier verwendeten Werte sind nur Beispiele.

  8. Speichern Sie Ihr CSS und Hochladen benutzerdefinierter CSS.

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