Bilderrahmen in Fusszeile entfernen

  • Liebes Zeta Team

    Ich bin mir nicht sicher ob es bei Bilderrahmen nur eine 'alles oder nicht' Loesung gibt.
    Bin gerade dabei eine Seite fuer eine Community Organisation zu bauen. Im Layout sind alle Bilder mit einem schoenen Rahmen versehen und das ist auch gut so.

    In der Fusszeile muss ich Logos und social media icons einfuegen, aber die sollen keinen Rahmen haben.
    Wenn ich den Rahmen in der Einzelbildbearbeitung entferne, ist er in der Ansicht trotzdem da (ist im Layout als Konvention fuer images so gesetzt).

    Wie kann ich die Rahme nur in der Fusszeile entfernen?
    Hier die Seite: http://foodpioneers.org.uk/test

    Freue mich auf Antwort

  • Hallo,

    das ist in der tat nicht ganz einfach, lässt sich aber ohne weiteres erreichen.

    Zunächst müssen Sie Ihrem Projekt etwas angepasstes CSS hinzufügen:

    • 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>
    	.noborder img,
    	.noborder a.fancybox{
    		border: 0 !important;
    	}
    </style>

    Damit haben wir nun eine Regel definiert, welche verursacht, dass um Bildern keine "border" gezeichnet wird. Diese Regel müssen wir nun auf die entsprechenden Bilder anwenden.

    Ihre Socialmedia-Icons haben Sie ja anscheinend über den Editor in einem ganz normalen Textartikel platziert. Also öffnen Sie diesen Artikel zum bearbeiten und klicken Sie dann unten links im Artikel-Fenster auf das kleine Mischpult-Icon. Nun klicken Sie noch auf "Mehr" und dann werden Ihnen zwei CSS-Fender gezeigt. Schreiben Sie nun in das erste Feld "CSS-Klasse" folgenden Text: noborder (ohne den führenden Punkt aus der CSS-Regel). Klicken Sie auf "OK" und nochmals "OK" um die Artikelbearbeitung abzuschließen. Nun sollte keines der Bilder im betreffenden Artikel eine "border" mehr haben.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Vielen Dank

    Das hat geklappt. Ich scheine allerdings auch noch einen kleinen Schatten um die Bilder zu haben (hatte ich vorher bei den Rahmen nicht gesehen).
    Nur ein Hauch aber leider unten u rechts vom Bild sichtbar.
    Koenntest Du mir helfen, den auch noch weg zu operieren?
    Siehe: http://www.foodpioneers.org.uk/index.html

    Ganz lieben Dank schonaml im Voraus

  • CSS
    <style>
    	.noborder img,
    	.noborder a.fancybox{
    		border: 0 !important;
    		-webkit-box-shadow: none !important;
    		-moz-box-shadow: none !important;
    		box-shadow: none !important;
    	}
    </style>

    OK, dann ersetzen Sie den Code von vorhin durch diesen:

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo

    Ich brauch nochmal Hilfe. Musste im Textbereich ein paar Logos (als Bilder) einfuegen und da einige transparent waren, musste ich sie wieder ohne Rahmen einfuegen. Klappt mit CSS 'noborder' aber ich habe leider wieder einen Schatten unter jedem Logo. So sieht's aus: http://foodpioneers.org.uk/partners.html
    Wie kann ich den Schatten bzw die Linie unter jedem Logo/Bild entfernen?

    Im Voraus schonmal vielen Dank
    Susanne

  • Hallo Susanne,

    kontrollier mal was bei dir im Layoutdesigner unter Inhaltsbereich > Bilder > bei Rahmenstärke und Schatten/Rahmenfarbe drin ist.
    Evtl. könnte es was bringen, wenn du unter Rahmenstärke auf "0", bzw. bei Schatten/Rahmenfarbe auf "Transparent" umstellst.

    Gruß
    Jochen

  • Hallo Jochen

    Ich moechte weder Rahmen noch Schatten global aus dem Layout entfernen, weil es um tatsaechliche Bilder herum gut aussieht (vergleiche http://foodpioneers.org.uk/projects.html).

    Mein Problem ist die Ausnahme, wenn ich Logos asl Bilder einfuege und das wegen transparenz oder vorgeschriebenen Branding-Guidelines ohne rahmen machen muss. Daher hatte mir Dein Kollege den o.a. CSS Code geschickt, womit ich das Problem in der Fusszeile loesen konnte. Scheint aber im Textbereich nicht zu klappen.

    Help needed!
    Danke

  • Hallo,

    das greif nicht, weil die logos verlinkt sind (ohne "bei Klick vergrößern").

    Wenn Sie das bisherige CSS durch das folgende ersetzen, sollte es greifen:

    CSS
    <style>
    	.noborder img,
    	.noborder a{
    		border: 0 !important;
    		-webkit-box-shadow: none !important;
    		-moz-box-shadow: none !important;
    		box-shadow: none !important;
    	}
    </style>

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Ok, dann mach das doch bei diesen Bilder genau so, wie oben von Stefan beschrieben (2ter Code dazu nehmen).
    Das funktioniert (bei mir auch mit Verlinkung) dann so auch im normalen Inhaltsbereich.

    Gruß
    Jochen

  • Warum das bei dir mit dem Code nicht geht, kann ich gerade auf Anhieb nicht sagen (wie erwähnt, bei mir geht's).
    Aber..... stell doch bitte mal im Layoutdesigner unter Inhaltsbereich > Bilder die "Schattenfarbe" auf transparent um.
    Ich vermute, das dies evtl. die Lösung für dich sein könnte?
    Und so wie ich das sehe, sollte das deine andere Darstellung deiner Bilder nicht groß beeinflussen.
    Einfach mal versuchen ;)

    Ggf. muss aber dazu die CSS-Anweisung für die dementsprechenden Widgets dazu rausgenommen werden.

    Gruß
    Jochen

  • Hallo,

    sorry, da hatte das gesamte Bild-Widget irgendwie auch noch einen Box-Shadow. Dieser Code sollte jetzt aber greifen (ich hab es auf Ihrer Site getestet):

    CSS
    <style>
    	.zpwBild.noborder,
    	.noborder img,
    	.noborder a{
    		border: 0 !important;
    		-webkit-box-shadow: none !important;
    		-moz-box-shadow: none !important;
    		box-shadow: none !important;
    	}
    </style>

    Es haben aber noch nicht alle Logos die klasse "noborder" zugewiesen. Wenn ein paar noch den Box-Shadow haben, liegt es daran.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Guteen Morgen & danke!

    das war mir gestern abend dann auch aufgefallen. In dem Moment wo ich 'noborder' im CSS des widgets eingegeben habe, ist der eigentliche Bildrahmen verschwunden aber ploetzlich ein unterer Widget-Rahmen oder Schatten aufgetaucht. Dank Deines Codes ist das Problem nun aber erfolgrecih geloest.

    Ganz herzlichen Dank und einen schoenen Tag!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!