HeroPress Blog anpassen (CSS)

Gelöst mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat
Hallo!

Über den Customizer, CSS und das stylesheet habe ich ein paar Anpassungen am Theme HeroPress vorgenommen (sehr rudimentäre Kenntnisse :).

Folgendes Problem kann ich nicht lösen:

Die Vorschau im Blog erscheint in drei Spalten, aber nicht mit einem Teaser, sondern mit dem kompletten Text. Dadurch wird es sehr unharmonisch.

Verwendet habe ich
```
.single-featured.wp-post-image {
	/* Für die Größe kannst du eigene Werte einsetzen: 
   "50px", "50em", "50%",
   je nach persönlicher Vorliebe */

    width: 100px;
    height: 50px;
}
.post img {
    width: auto;
    max
-width: 100%;
}
```
Fragen

1) kann ich die Boxen für die Vorschau auf dem Blog vorgeben? Als Orientierung hätte ich die Box gern in der max Höhe wie beim jüngsten Beitrag, das hieße also, dass die Höhe der Bilder flexibel bleibt, aber die Menge des gezeigten Teaser variabel ist.

2) Soll ich besser stattdessen eine fixe Vorgabe für die Beitragsbilder angeben? Wie sähe das CSS dann aus?

3) -Bonusfrage- … den grauen Balken mit den Kategorien/Schlagworten hätte ich gern unterhalb des Teasers, nicht unter dem Beitragsbild. Wie wäre das CSS?

Danke euch!

VG
Kathrin

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)

1 2 →

Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat

Hallo,
hast Du mal versucht, die o.g. Dinge über die Einstellungen des themes zu ändern? – Stichwort „Customizer“
Ich könnte mir vorstellen, dass einige Einstellungen dort vorgenommen werden – betrifft 1 und 3
Übrigens hast Du auf Deiner Seite „mixed content“. Die Ursachen kannst Du über die folgende Seite rausfinden

Viele Grüße
Hans-Gerd

Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

Hallo HaGe,

danke für Deine Antwort! …den mixed content hab ich mir angeschaut, kann aber ehrlich gesagt nichts damit anfangen. Teils sind es Medien, die ich hochgeladen und u. a. in pop-ups verwendet habe, aber auch content des aktuellen themes….. Wie kann ich mich da kümmern?

Das mit dem Customizer: hab ich auch vermutet, aber selbst nach genauem Durchgehen und Websuche auf den (knappen) Hilfeseiten zum Childtheme HeroPress habe ich nicht gefunden WO. Die Möglichkeiten bei der free version scheinen begrenzt:

Customizer gesamt
Blog-Abschnitt Einstellungen
Blog-Abschnitt Inhalt

VG
Kathrin

Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat

Hallo Kathrin,
bezüglich mixed content könntest Du versuchen (nach einer guten Datensicherung) das Problem mit Hilfe des plugins better search and replace zu beheben.
Dazu müsstest Du http://www.systemisch-gesund.de/wp-content/ durch https://www.systemisch-gesund.de/wp-content/ ersetzen.
Dann sollte das Problem behoben sein.

Zurück zu dem Ausgangsthema: Vielleicht hilft Dir bezüglich des Auszugs (Excerpt) das plugin „advanced excerpt“ – siehe folgender Beitrag

Viele Grüße
Hans-Gerd

Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

Hallo HaGe,

das mit dem Plug-in hat schon mal ein Problem gelöst 🙂
die Webseite läuft sowohl unter http, als auch unter https…. sollt ich ersteres wohl löschen? Ist die alte Version.

Restproblem: das mit den definierten Boxen. Macht es wohl mehr Sinn, korrekt geschnittene Beitragsbilder zu verwenden? Hoffte halt, dass es dafür ein CSS gibt.

Vielen Dank!
Kathrin
Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat
Hallo Kathrin,
versuche mal bitte das hier im Indiv. CSS (Customizer):
```
body img {
    /* display: block; */
    /* max-width: 100%; */
    /* height: auto; */
    max-height: 150px !important;
    /* clip-path: inset(2% 2% 2% 2% round 2% 2%); */
    object-fit: cover;
    object-position: top center;
    width: 400px !important;
}
```
die Webseite läuft sowohl unter http, als auch unter https…. sollt ich ersteres wohl löschen? Ist die alte Version.

… ich habe nicht verstanden, was Du meinst. Was soll die „alte Version“ sein?

Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 5 Jahren, 1 Monat von Hans-Gerd Gerhards.
- Diese Antwort wurde geändert vor 5 Jahren, 1 Monat von Hans-Gerd Gerhards.
Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

Hallo HaGe

ah toll, das funktioniert gut! Hatte zwar grad alle Beitragsbilder angepasst, aber mit dem CSS ist es dann in Zukunft leichter! Danke dir!

alt/neu…sorry, das ist sicher Nube-Sprech. Wenn ich über die Google Search Console meine Properties betrachte, dann ist da die „ältere“ http und die „https“ property. Wenn ichs ganz durchblicken würde, könnte ich es sicher klüger sagen 🙂

VG Kathrin

Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

und… Problem gelöst 🙂 Danke für die schnelle Hilfe!

Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat

Hallo,
gerne 🙂
allerdings füllt das Header – Bild wegen der fehlenden eigenen Klasse nicht mehr die ganze Breite aus.
Viele Grüße
Hans-Gerd
Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat
Hallo,
das Problem mit dem Header-Bild lässt sich übrigens wie folgt lösen:
```
body img:nth-child(1) {
	width: 2000px !important;
}
```
Das kommt dann auch wieder in Ind. CSS im Customizer
Viele Grüße
Hans-Gerd
Moderator Angelika Reisiger
(@la-geek)

vor 5 Jahren, 1 Monat

@hage

mit deinem Code body img {...} sprichst du jedes Bild auf jeder Seite an – schau dir einfach mal die Auswirkungen auf die Bilder der anderen Seiten an. Mit etwas Glück sind eventuell ein paar wenige Bilder davon nicht betroffen, wenn auf sie speziell vom Theme-CSS referenziert wurde.

Und mit body img:nth-child(1) {...} sprichst du jedes erste Bild auf jeder Seite an, was nicht tragisch ist, solange auf der Seite auch ein Header-Bild vorhanden ist.

Statt der beiden Codes solltest du lieber direkt nur auf die Blog-Bilder referenzieren.

Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

danke HaGe 🙂

Ja Angelika, ist mir grade aufgefallen (zwischenzeitlich musst ich mich mal um die Familie kümmern…)

Wie kann ich den Code denn schreiben, so dass nur die Blogbilder gemeint sind?

Viele Grüße
KAthrin

Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat

Hallo @la-geek,

Statt der beiden Codes solltest du lieber direkt nur auf die Blog-Bilder referenzieren.

… hätte ich auch gerne, aber das theme bietet keine eigene Klasse für die Bilder.
@mandragoraxy: Leider fällt mir zur Lösung des Problems ad hoc keine bessere Lösung mehr ein. Aber das ist natürlich auch erst mal kein WP-Problem, sondern ein CSS-Problem.
Viele Grüße
Hans-Gerd
Moderator Angelika Reisiger
(@la-geek)

vor 5 Jahren, 1 Monat
hätte ich auch gerne, aber das theme bietet keine eigene Klasse für die Bilder.

braucht es auch nicht.

@mandragoraxy

Lösche bitte erst einmal wieder
```
body img:nth-child(1) {
	width: 2000px !important;
}
```
und ändere diesen Code
```
body img {
    /* display: block; */
    /* max-width: 100%; */
    /* height: auto; */
    max-height: 150px !important;
    /* clip-path: inset(2% 2% 2% 2% round 2% 2%); */
    object-fit: cover;
    object-position: top center;
    width: 400px !important;
}
```
um in
```
body img {
    display: block;
    max-width: 100%;
    height: auto;
    /* clip-path: inset(2% 2% 2% 2% round 2% 2%); */
}
```
Und füge ganz unten innerhalb von „Zusätzliche CSS“ ein:
```
.masonry-column .has-post-thumbnail img {
    object-fit: cover;
    max-height: 210px;
    width: 100%;
    object-position: top center;
}
```
Moderator Hans-Gerd Gerhards
(@hage)

vor 5 Jahren, 1 Monat

Hallo @la-geek,
ah, ok – danke für Info

Thread-Starter mandragoraxy
(@mandragoraxy)

vor 5 Jahren, 1 Monat

Hallo ihr zwei,

danke für die Lösung!

Jetzt habe ich alles annähernd, wie ich es will! Bis auf die unregelmäßige Box-Höhe, die durch die Auswahlmöglichkeiten des Excerpt-Plug-in entstehen („100 characters exact“ ist das beste, das geht…. aber Punkte etc. führen halt zu zu kürzeren Boxen).
Mein innerer Monk hätte es so gerne sympathisch für´s Auge. Will meinen: jede Reihe hat die Bilder auf der gleichen Höhe. Vielleicht geht´s einfach nicht. Die free version ist da schmal aufgestellt.

Danke euch für die Lösungen, ich bin echt froh, dass das so unglaublich einfach geht hier!

Grüße!
Kathrin