Freitag, 11. April 2014

Schatten oder Rahmen um Bilder entfernen

Bei vielen Blogger-Themes werden die Bilder automatisch mit einem Schatten oder Rahmen versehen. Diesen müsst ihr im Theme manuell entfernen.

Dafür geht ihr im Blogger-Dashboard auf "Vorlage" und dann auf "HTML bearbeiten".


Dann klickt ihr ganz oben im Code auf das Dreieck bei <b:skin> um die CSS-Angaben zu öffnen.


Dort drückt ihr nun Strg+F und sucht nach ".post-body img". Dort im Code seht ihr die Angaben für die Bilder in Beiträgen. Angaben mit "border" sind Rahmen, Angaben mit "shadow" sind Schatten.


Alle diese Angaben könnt ihr nun auskommentieren (und somit deaktivieren), um zu Testen ob damit schon die gewünschte Änderung erreicht werden kann. Wie ihr CSS-Angaben auskommentieren könnt, habe ich in diesem Beitrag ganz unten erklärt. In meinem Codebeispiel habe ich alle border und shadow-Angaben auskommentiert.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
/*border: 1px solid $(image.border.color); */
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
/*-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);*/

}

Die Rahmen sind nun verschwunden.


Um sie wieder zu aktivieren, könnte ich nun einfach wieder die Klammern zum Auskommentieren im Code entfernen.

Kommentare :

  1. Hi Julia,

    erstmal danke für den tollen Post übers 'Entrahmen'. Ich habe es auch auf Anhieb hinbekommen. Leider hat sich dabei aber mein mobile-Design verändert: heißt meine social media icons werden nicht mehr auf der mobilen version angezeigt und meine farben für links und seitenleiste haben sich geändert. in der mobilen version werden die Bilder auch immernoch mit rahmen angezeigt. Hast du eine Idee wie man das ändern könnte? Hier mein blog: www.jennytautgesart.blogspot.de

    Danke schonmal für deine Hilfe!
    VG

    AntwortenLöschen
  2. Nur zur ergänzung, bei meinem gewählten Thema tauch keine "border" meldung auf, ich musste die "padding" angaben ausklammern.
    Aber danke für den Hinweis, hätte ich alleine nicht gefunden.

    AntwortenLöschen
    Antworten
    1. Du bist meine Rettung, ich dachte ich probier das mit dem Padding mal aus und es hat geklappt :D Danke dir!

      Löschen
  3. Hat eine Weile gedauert, aber jetzt hat es geklappt. Vielen Dank für das Turtorial, es hat mit sehr geholfen.
    Stefanie aus dem Kochgarten

    AntwortenLöschen
  4. Super Erklärung! Danke, echt hilfreich :-)
    Lg

    AntwortenLöschen
  5. Dankeeee! Das hat mir heute einen richtigen Erfolgskick gegeben...
    Herzlichst
    vonKarin

    AntwortenLöschen
  6. Hallo Julia,

    tausend Dank!!! Deine Beschreibung ist die einzige, die echt super und recht flott funktioniert.

    LG Tanja

    AntwortenLöschen
  7. Sher hilfreich, bei mir hat es auch auf Anhieb geklappt. Leider hat es mir mein Menü zerissen, daher werde ich die Rahmen wohl behalten müssen.
    Aber wer kein HTML Menü oder andere Sachen hat, die sich darauf stützen wird keine Probleme haben

    Vielen Dank, ein tolles Tutorial

    AntwortenLöschen