Layout bei Indieblocks-Plugin anpassen
Wie in einem anderen Artikel schon erwähnt, bin ich gerade am experimentieren, dass ich diesen WordPress-Blog mittels dem ActivityPub-Plugin „Fediverse-tauglich“ mache. Das ist eine recht interessante Reise, bei der es immer wieder Hürden zu nehmen gibt. Aktuell verwende ich das WordPress-Plugin „Indieblocks„, um „Kurzmitteilungen“ (aka „Notes“ für kurze Texte wie bei Twitter) und „Likes“ (für URLs zum Merken) zu veröffentlichen. Diese unterscheiden sich von „normalen WordPress-Posts“ hauptsächlich durch ihre Länge bzw. den Umfang. Das funktioniert für mich schon soweit ganz gut und ich nutze diese „Kurzmitteilungen“ auch oft, um für mich selbst Seiten, Themen oder URLs zu merken. Praktisch ist hierbei auch, das ich direkt über meine Webseite mir auch wieder eine Übersicht der Notes und Links anzeigen lassen kann.
Jetzt kommen wir zu meinem Erste-Welt-Problem: Wir hat die Ansicht, wie die Einträge angezeigt werden, nicht gefallen. Zum einen brauche ich bei dieser Art von Mitteilungen keine Überschrift und dann war mir die Trennung zwischen den einzelnen Posts nicht offensichtlich genug.
Daher habe ich etwas mittels eigenem CSS-Code rumprobiert und habe die Ansicht für mein Empfinden etwas optimiert.
Den zusätzlichen CSS-Code habe ich im WordPress-Backend unter Design → Customizer → zusätzliches CSS eingefügt.
Ich füge euch im Anschluss den Code hier ein, welchen ich verwendet habe. Evtl. müsst ihr diesen noch für euch anpassen. Ich verwende das Neve-Theme hier auf meinen Blog und ich kann nicht sagen, ob dieser Code auch mit anderen WordPress-Themes 100%ig funktioniert. Da ich mit CSS auch nicht so richtig fit bin, habe ich mir bei der Erstellung von Gemini helfen lassen.
/* Rahmen und Abstände für die einzelnen Notizen auf der Übersichtsseite */
.post-type-archive-note .nv-index-posts .content-wrap,
.post-type-archive-indieblocks_note .nv-index-posts .content-wrap,
.post-type-archive-note article,
.post-type-archive-indieblocks_note article {
border: 1px solid #e1e8ed !important;
border-radius: 12px !important;
padding: 15px !important;
margin-bottom: 20px !important;
background-color: #ffffff !important;
box-shadow: 0 5px 8px rgba(0,0,0,0.1) !important;
}
/* Entfernt den Standard-Abstand des Themes, damit der Rahmen bündig sitzt */
.post-type-archive-note .nv-index-posts article,
.post-type-archive-indieblocks_note .nv-index-posts article {
border: none !important;
background: transparent !important;
}
/* --- 1. Auf der Übersichtsseite (Archiv) der Notes --- */
/* Wir sprechen den Body der Note-Archive an */
body.post-type-archive-note .blog-entry-title.entry-title,
body.post-type-archive-indieblocks_note .blog-entry-title.entry-title {
display: none !important;
}
/* --- 2. In der Einzelansicht einer Note --- */
/* Falls du den Titel auch öffnen der einzelnen Notiz ausblenden willst */
body.single-note .entry-title,
body.single-indieblocks_note .entry-title {
display: none !important;
}
/* 1. TITEL AUSBLENDEN auf Notes und Likes */
.post-type-archive-note .entry-title,
.post-type-archive-like .entry-title,
.post-type-archive-indieblocks_like .entry-title,
.post-type-archive-indieblocks_note .entry-title {
display: none !important;
}
/* Rahmen für Notes und Likes Archiv-Seiten */
.post-type-archive-note .nv-index-posts article,
.post-type-archive-like .nv-index-posts article,
.post-type-archive-indieblocks_note .nv-index-posts article,
.post-type-archive-indieblocks_like .nv-index-posts article {
border: 1px solid #e1e8ed !important;
border-radius: 12px !important;
padding: 20px !important;
margin-bottom: 25px !important;
background-color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
display: block !important;
overflow: hidden !important;
}
/* Verhindert, dass das Theme innere Abstände erzwingt, die den Rahmen sprengen */
.post-type-archive-note .content-wrap,
.post-type-archive-like .content-wrap {
padding: 0 !important;
margin: 0 !important;
}
