Beiträge von fernreise

Hallo, bin jetzt nicht sicher, ob hier oder besser in Plugins?

Schreibe Blogbeiträge, benutze Elementor und Advanced Editor Tools.

Habe mit KI versucht herauszufinden, wie ich die Abstände
- nach H2 Überschriften
- nach Tabellen
- vor Aufzählungslisten
im Blobbeitrag verkleinern kann ( die Abstände waren mir deutlich zu groß).

Haben in WP, Elementor und Advanced Editor Tools keine Einstellmöglichkeiten gefunden, außer CSS.
KI hat gut geholfen, auch wenn nicht jeder Code auf Anhieb funktionierte.

jedoch habe ich jetzt wieder ziemlich viel CSS Codes drin, und mir wurde schon mehrfach gesagt, dass man das nur im Notfall nutzen sollte.

Kennt jemand eine Alternative zu CSS Codes für meine Abstandswünsche?

.entry-content table p:last-child {
margin-bottom: 0;
}
/* entfernt leerezeile in tabellen */
body #mobile-fullscreen { width: 100vw;height: 100vh }
/* menü mittig in mobile ansicht */

/* H2, die innerhalb eines Texteditor-Widgets stehen, enger machen */
.elementor .elementor-widget-text-editor h2 {
margin-bottom: 6px !important;
}
/* Falls der große Abstand vom NACHFOLGENDEN Element kommt, dessen margin-top direkt nach H2 verkleinern */
.elementor h2 + p,
.elementor h2 + ul,
.elementor h2 + ol,
.elementor h2 + div {
margin-top: 6px !important;
}
/* Abstand UNTER Tabellen verkleinern */
.elementor .elementor-widget-text-editor table {
margin-bottom: 20px !important;
}
/* Nur in Blogbeiträgen */
.single-post .elementor .elementor-widget-text-editor p:has(+ ul),
.single-post .elementor .elementor-widget-text-editor p:has(+ ol) {
margin-bottom: 6px !important; /* Absatz unten kleiner, wenn direkt Liste folgt */
}
.single-post .elementor .elementor-widget-text-editor p + ul,
.single-post .elementor .elementor-widget-text-editor p + ol {
margin-top: 6px !important; /* Liste oben kleiner */
}

problem hat sich erledigt. den artikel geschlossen und neu zum bearbeiten geöffnet. da waren die Abstände sichtbar. Nach Korrektur und Speicherung, war alles richtig. Liegt wohl am Plugin.

Hallo, habe eine Frage zu Abständen bei Blog-Beiträgen. Schreibe diese in Elementor, mit dem Plugin Advanced Editor Tools.

Habe manchmal vor Titeln grössere Abstände. Bsp. https://stepplan.de/proteine-bausteine-des-lebens

Siehe Abschnitt: "Aminosäurengehalt in Lebensmitteln", direkt drunter "Resorption (Aufnahme)"
Bei beiden Titeln ist jeweis vorher eine Aufzählungsliste.
Warum ist vor "Resorption (Aufnahme)" ein grösserer Abstand?

Habe es mehrmals bei beiden Titeln gleich versucht, das Ergebnis ist beim unteren Titel immer ein grösserer Abstand.
Das Problem mit dem grösseren Abstand habe ich auch an anderen Stellen und in anderen Beiträgen!

ja hab ich gesehen und habs auf 3 spalten eingestellt :)

also ja das macht sinn, wenn ich bei jedem Update von Elementor oder Theme dann prüfen muss, ob mein manuell eingefügtes CSS noch funktioniert und/oder Auswirkungen auf andere Dinge hat usw.

Gebe mich Einsichtig bei deiner Erfahrung und hab auf Raster umgestellt und somit ein fast leeres CSS mit nur noch:

.entry-content table p:last-child {
margin-bottom: 0;
} /* entfernt leerezeile in tabellen */
body #mobile-fullscreen { width: 100vw;height: 100vh }
/* menü mittig in mobile ansicht */

Interessanterweise passt beim Raster-Stil auch alles in der mobilen Ansicht, Grösse der Thumbnails auf ganzer breite, wie auch Titel und Schrift. Das war im Thumbnail-Stil nicht so.

Gelöscht habe meine in stundenlangen Sitzungen hart erarbeiteten Codes:

.blog-entry.thumbnail-entry .thumbnail {
width: 40%;}
/* neue breite deines titelbildes */

.blog-entry.thumbnail-entry .blog-entry-content {
width: 80%;
} /* neue breite deines teaser textes */

/* Kommentare, Icon und Datum auf Blog-, Kategorie- und Archivseiten ausblenden */
body.blog .comments-link,
body.blog .comment-count,
body.blog .comment-meta,
body.blog .icon-bubble,
body.blog .blog-entry-date,
body.blog a[rel="category"],
body.blog a[rel="category tag"],
body.archive .comments-link,
body.archive .comment-count,
body.archive .comment-meta,
body.archive .icon-bubble,
body.archive .blog-entry-date,
body.archive a[rel="category"],
body.archive a[rel="category tag"] {
display: none !important;}

/* Linien, die als Border am Artikel/Container gesetzt sind */
body.blog article,
body.blog .blog-entry,
body.blog .blog-entry-inner,
body.blog .site-main article,
body.blog .content-area article,
body.archive article,
body.archive .blog-entry,
body.archive .blog-entry-inner,
body.archive .site-main article,
body.archive .content-area article {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background-image: none !important;}

/* Abstand etwas verkleinern */
body.blog .blog-entry,
body.blog .blog-entry-inner,
body.blog article,
body.archive .blog-entry,
body.archive .blog-entry-inner,
body.archive article {
margin-bottom: 5px !important;
padding-bottom: 5px !important;}

/* Linie unter der Textvorschau entfernen */
body.blog .blog-entry-bottom,
body.archive .blog-entry-bottom {
display: none !important;}

/* Titelgröße verkleinern */
body.blog .entry-title,
body.blog .blog-entry-title,
body.archive .entry-title,
body.archive .blog-entry-title {
font-size: 1.6em !important;}

/* NUR MOBIL (bis 768px): Thumbnails vollbreit */
@Media (max-width: 768px) {
body.blog .blog-entry .thumbnail,
body.archive .blog-entry .thumbnail,
body.blog .post-thumbnail,
body.archive .post-thumbnail,
body.blog .blog-entry-thumbnail,
body.archive .blog-entry-thumbnail {
width: 100% !important;
max-width: 100% !important;
}
body.blog .blog-entry .thumbnail img,
body.archive .blog-entry .thumbnail img,
body.blog .post-thumbnail img,
body.archive .post-thumbnail img,
body.blog .blog-entry-thumbnail img,
body.archive .blog-entry-thumbnail img,
body.blog .wp-post-image,
body.archive .wp-post-image {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
display: block !important; }}

/* NUR MOBIL (bis 768px): Titel und Textvorschau vollbreit */
@Media (max-width: 768px) {
/* Titel vollbreit */
body.blog .entry-title,
body.archive .entry-title,
body.blog .blog-entry-title,
body.archive .blog-entry-title {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important; }

/* Textauszug (Excerpt) vollbreit */
body.blog .entry-summary,
body.archive .entry-summary,
body.blog .blog-entry-summary,
body.archive .blog-entry-summary {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important; }}

/* NUR MOBIL (bis 768px): Titel + Textauszug vollbreit */
@Media (max-width: 768px) {
/* Der Content-Bereich rechts vom Bild */
body.blog .blog-entry .blog-entry-content,
body.archive .blog-entry .blog-entry-content,
body.blog .blog-entry .entry-content,
body.archive .blog-entry .entry-content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important; }

/* Der eigentliche Auszug/Teasertext */
body.blog .blog-entry .entry-summary,
body.archive .blog-entry .entry-summary,
body.blog .blog-entry .blog-entry-summary,
body.archive .blog-entry .blog-entry-summary,
body.blog .blog-entry .excerpt,
body.archive .blog-entry .excerpt {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
display: block !important; }

/* Titel */
body.blog .blog-entry .entry-title,
body.archive .blog-entry .entry-title,
body.blog .blog-entry .blog-entry-title,
body.archive .blog-entry .blog-entry-title {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important; }

/* Falls das Layout per Grid/Flex nebeneinander erzwingt */
body.blog .blog-entry .blog-entry-inner,
body.archive .blog-entry .blog-entry-inner {
display: block !important; /* bricht Grid/Flex auf */
grid-template-columns: none !important; }}

Danke für den Tipp, aber wie vermutet: Der Content Builder ist für den Blog-Stil Large Image und Grid verfügbar. Nicht für Thumbnail-Stil.
Also bleibt nur CSS.

Blog-Archive wurde mir auch schon mehrfach genannt, aber das habe ich nicht. Nur Blog-Einträge und Einzelbeitrag.
Und in keinem kann ich Felder wie Datum, Kommentare usw. ausblenden.

hab die seite jetzt kommplett umgebaut: https://stepplan.de/blog
Danke für den Tipp!
viele korrekturen wie Trennlinie entfernen, Abstand, Titelgrösse, Datum ausblenden, etc. musste ich dennoch vie CSS erledigen.

weitere Variante ausprobiert - OHNE ERFOLG

css codes:

/* Elementor → WordPress-Widget „Neueste Beiträge“ (OceanWP) – größere Thumbnails */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* Größere Thumbnails nur im Elementor-Widget "Neueste Beiträge" */
.elementor-widget-wp-widget-recent-posts li,
.elementor-widget-wp-widget-recent-posts .recent-posts-li {
display: grid;
grid-template-columns: 240px 1fr; /* ← gewünschte Bildbreite */
gap: 14px;
align-items: start;
}
/* Container links wirklich breiter machen */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail {
width: 240px !important; /* gleiche Breite wie oben */
max-width: none !important;
display: block;
overflow: hidden;
border-radius: 8px;
}
/* Bild skalieren + evtl. zuschneiden */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img.size-thumbnail {
width: 100% !important;
height: 100% !important;
max-width: none !important; /* überschreibt 150px-Grenze */
object-fit: cover; /* einheitlicher Zuschnitt */
aspect-ratio: 1 / 1; /* quadratisch; entferne, wenn Originalverhältnis gewünscht */
}

PLUS in Elementor einen HTML-Widget direkt unter den „Neueste Beiträge“-Block:

<script>
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.querySelectorAll('.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img.size-thumbnail');
imgs.forEach(function(img){
/* sag dem Browser, der Slot ist ~240px breit (wie im CSS oben) */
img.sizes = '240px';
});
});
</script>

BIN MIT MEINEM LATEIN AM ENDE :(

hab jetzt diverse CSS codes ausprobiert. nix klappt.
Auch über die internen Einstellungen habe ich absolut keine Möglichkeit gefunden, die Grösse zu ändern.

auch das plugin Recent Posts Widget With Thumbnails ausprobiert ... das verschlimmberst das ganz, die Thumbnails werden verzert, aber nie grösser. Wieder deinstalliert.

das hat super funktioniert, danke für den tool tipp !!

ok, nach einer Stunde rumprobieren hats geklappt:

/* "0 Comments" im Recent Posts Widget ausblenden */
.recent-posts-comments {
display: none !important;
}

Mein Englisch und meine Programmierkenntnisse sind gleich 0.
Ist keine Prio. Vielleicht kennt sich jemand damit aus und antwortet mit der Zeit.

Habe folgende CSS-Codes ohne Erfolg ausprobiert:

/* OceanWP Recent Posts – "0 Comments" + Trenner ausblenden */
.oceanwp-recent-posts .recent-posts-info .sep,
.oceanwp-recent-posts .recent-posts-comments,
.oceanwp-recent-posts .recent-posts-comments a {
display: none !important;
}

Da ich nicht weiss, ob die Recent Posts nicht über das OceanWP-Widget, sondern per Elementor oder Gutenberg kommt, auch folgendes ausprobiert, ohne Erfolg:

/* Elementor Posts-Widget: Kommentar-Meta ausblenden */
.elementor-post-meta__item--comments { display: none !important; }

/* Gutenberg „Aktuelle Beiträge“: Kommentarzahl ausblenden */
.wp-block-latest-posts__comment-count { display: none !important; }

[Blockierte Grafik: https://postimg.cc/fJdQWvPB]
https://postimg.cc/fJdQWvPB

Hab das gleiche Problme in Firefox und Opera. In FF auch Cache & Co. gelöscht, ohne Veränderung.

Recent Posts

Hallo,

in meinem WP Blog in Recent Posts wird unter dem Beitragstitel neben Datum auch 0 comments angzeigt.
In Diskussionen ist "Erlaube Besuchern, neue Beiträge zu kommentieren" deaktiviert.
Finde keine Möglichkeit den Hinweis auszublenden.

Habe es mit CSS-Code versucht, ohne Erfolg. Jemand eine Idee?

/* Kommentar-Anzeige in Recent Posts ausblenden */
.elementor-widget-container .comments-link,
.elementor-widget-container .elementor-post-meta .elementor-post-meta__item--comments {
display: none !important;
}

Hallo,

in meinem WP Blog (benutze Elementor) möchte ich die Thumbnails in Recent Posts breiter machen, damit sie nicht so abgeschnitten wirken.

Der CSS-Code funktioniert nicht. Jemand eine Idee, was im code falsch ist? Danke im voraus :)

/* Blog / Recent Posts in Elementor größer darstellen */
.elementor-widget-container .elementor-post__thumbnail img {
width: 100%;
height: auto;
object-fit: cover; /* Zuschnitt ohne Verzerrung */
}

Hallo,

in meinem WP Blog werden die Thumbnails in Recent Posts teilweise nicht angezeigt.
Finde keine Fehler, jemand eine Idee woran das liegen könnte?

ok, hab die Antwort selbst rausgefunden:

https://forum.wpde.org/threads/spam.201502/#post-842855

wusste nicht, dass es dem Forum so schlimm geht.

Fände es auch schade, wenn die vielen netten Helfer abwandern, weil es hier keine Ordnung gibt und auch keine Belohnung in welcher Form auch immer.

Mir wurde hier sehr viel geholfen, allen voran DummyGirl und ohne dieses Forum wäre ich echt verloren gewesen.

Wie ist der https://wpde.club ? DummyGirl?

Gibt es sonst Alternativen?

Hallo,

mein Account feuerland wurde gelöscht - ohne Warnung - und anscheinend meine IP geperrt.

Nur mit aktivem VPN konnte ich dieses neue Profil anlegen.

Habe mehrfach Olaf Schmitz vom Impressum direkt per Mail und über das Kontaktformular angefragt und nie eine Antwort erhalten.

Kann mir bitte jemand sagen, was ich schlimmes verbrochen habe, damit man mich ohne Vorwarnung löscht und meine IP sperrt?

Danke für Anworten :)