Bei Bildern den weissen Rand entfernen

    Hallo zusammen,

    ich arbeite mit Stripe Responsive Version 14...


    Bei allen eingefügten Bildern erscheint ein weisser Rand. Das ist auch sehr gut.

    Ich möchte aber bei einem Bild den Rand entfernen damit es sich besser in die Hintergrundfarbe einfügt.


    Ist das möglich?


    Vielen Dank.

    Gruss Beat

  • Zum hilfreichsten Beitrag springen

    • Hilfreich

    Der weiße Rand ist nicht in den Bilddateien enthalten sondern wird über CSS als Rahmen um das Bild hinzugefügt. Das hängt davon ab, was Sie in den Layout-Einstelliungen unter "Inhaltsbereich > Bilder" alles eingestellt haben.


    Um den Rahmen für ein spezifisches Bild auszuschalten, können Sie versuchen dem Bild eine spezielle CSS-Klasse hinzuzufügen und dann entsprechendes CSS für diese Klasse im Projekt einzufügen.


    Als erstes fügen Sie das entsprechende CSS um die Klasse zu definieren dem Projekt hinzu:

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    <style>
.plain > img, 
img.plain,
.zpwBild.plain a{
    border: none !important;
    box-shadow: none !important;
}
</style>


    Nun markieren Sie das entsprechende Bild mit der CSS-Klasse:


    Wenn das Bild mittels des Bild-Widget eingefügt wurde (also nicht direkt in einem Text-Editor), geht das so:

    • Mit der Maus über das Bild fahren und das Bleistift-Icon anklicken
    • Unten links auf das Mischpult-Icon klicken
    • Unten rechts auf "Mehr" klicken
    • Im Feld CSS-Klasse folgendes eingeben: plain

    Falls das Bild in einem Text-Artikel mittels der Toolbar eingefügt wurde:

    • Schalten Sie im Texteditor auf die Quelltext-Ansicht um (mittels dem "<>"-Icon)
    • Quelltext für Bilder beginnt immer mit <imgfügen direkt nach dem "g" von "img" folgendes ein:  class="plain"  (das ist eine Leerstelle, dann "class="plain" und dann noch eine Leerstelle)
    • Danach sollte der Quelltext dann z.B. so aussehen: <img class="plain" title="…

    Ggf. die aktuelle Seite mit STRG-F6 neu erstellen, um die Änderung sehen zu können.

    Das sollte übrigens auch in anderen Layouts funktionieren, in denen in den Layout-Einstellungen Bild-Rahmen festgelegt werden.