Zu viele Leerräume auf meinem Blog

Hallo,

auf meinem gerade erstellten (ersten) Blog auf https://blog-roland-m-horn.de/ sind mir immer noch zu viele Leerräume. Schon über dem Blogtitel sowie unter dem Header ist mir zu viel Platz, ebenso wie zwischen meinem letzten Footer-Eintrag und dem offiziellen Wordpress-Footer. Aber auch zwischen dem Begrüßungstext und den "teilen-" usw. Buttons ist mir zu viel Platz. Und so ein ganz kleines bisschen stört mich auch, das die Abstände unter den Widgets in der Seitenleiste relativ zum Begrenzungsstreifen jeweils kleiner sind als oben.

Nun habe ich zwar einigermaßen solide Grundkenntnisse in HTML, aber in Sachen CSS kann ich gerade mal auf "klassischen Homepages" Dateien inkludieren. Und da muss ich manchmal noch spicken. Langer Rede kurzer Sinn: Ich traue mich an die CSS-Dateien nicht ohne genaue Anweisung 'ran. Vielleicht ist hier jemand, der mir welche geben kann?

Gruß
Roland

Oh, CSS mit PHP verwechselt. Peinlich.

Zitat von Roland.M.Horn

(...)

Nun habe ich zwar einigermaßen solide Grundkenntnisse in HTML, aber in Sachen CSS kann ich gerade mal auf "klassischen Homepages" Dateien inkludieren. (...)

Hallo SEpp55 (und andere),

Ich bin jetzt nach Deiner Anweisung vorgegangen, und die Hauptprobleme waren auch recht schnell erledigt. Den Abstand zwischen den Widgets und und der horizontalen Linie darunter konnte ich jedoch nicht ändern.Vielleicht ist auch schon ein Mindestabstand fest implemtiert ? Probleme bereitet mir noch der Abstand zwischen den Shariff-Buttons und der horizontalen Linie darunter. Der ist mir immer noch zu groß. Vielleicht liegt das aber auch an Shariff 4.6.1? Dafür spräche auch, dass diese Buttons im Impressum und der Datenschutzvereinbarung doppelt, bzw. über der Buttonreihe unbeschriftet in unbeschrifteter Form angezeigt werden. Vielleicht kennst Du oder jemand anders hier ja ein besseres Plugin mit den gleichen Funktionen? Ansonsten fällt mir nur noch auf, dass das Wordpress-Copyright eine Zeile früher beginnt als im Widget darüber. Da habe ich leider auch keine Lösung gefunden. Meine zusätzliche CSS-Datei sieht jetzt so aus:

/* Füge hier Dein eigenes CSS ein */

/*Abstand im Header verringern*/
.site-header {
padding: 1.25em 4.5455%;
}

/* Abstand im Footer verringern */
.content-bottom-widgets{
margin:0 0.6923%;
}
.comments-area, .sidebar, .content-bottom-widgets .widget-area, .widecolumn{
margin-bottom:1.0em;
}

/*Abstand auf der Hauptseite verringern*/

.site-main{
margin-bottom:2.0em;
}

Gruß
Roland

Zitat von SEpp55

Grundsätzlich gebe ich @SuMu recht mit dem Child-Theme! Im3.Link wird ein Plugin (Simple Custom CSS) empfohlen, das seit 3 oder gar schon 4 Jahren nicht mehr wirklich gebraucht wird. Damals wurde in den Customizer der Menüpunkt "Zusätzliche CSS" aufgenommen ;)
@roland - die wenigen Anpassungen, meist margin oder padding, sollten ohne Child, in wenigen Anweisungen in die Zusätzlichen CSS leicht Platz finden.
Also beim Header Maus oben in den blauen Teil, rechte Maustaste drücken und Element untersuchen auswählen, dann sollte beim Firefox ein ähnliches Bild erscheinen wie das unten

Da siehst du die ID und die Class. Die class ist im mittleren Teil mit einem padding versehen.
Wie das padding zu lesen ist verrät dir Go..le ;) Wenn du hier den ersten Wert änderst, siehst du sofort was passiert (vorausgesetzt die richtig class ist gefunden). Du kannst dabei grundsätzlich nichts zerstören. Aber die Änderungen wirken auch nur bis zu einem Neuaufbau der Seite.

Konkret geht es darum:

Code

.site-header {
    padding: 5.25em 4.5455%;
}

die 5.25em auf z.B. 1.25em ändern.
Das ist dannn der Code für die zusätzlichen CSS. Dort abgespeichert ist er dann überall wirksam. wo diese class="site-header" vorkommt.
Wenn du HTML lesen kannst, kannst du auch CSS lesen und verstehen. Es ist eben aufzupassen, das du nicht unerwartet wo anders den Abstand dann willst. Dann ist der Selektor zu verfeinern.
Du kannst oder sollst diese Änderungen mit einem kurzen Kommentar /*Abstand im Header verringern*/ versehen, dann brauchst du später nicht so viel suchen.
Und so findest du auch mit etwas Geduld und Willen die weitern Abstände. Es gibt auch jede Menge Videos.

....... und bitte nicht in der style.css herumprobieren. Das wird beim nächstem Themenupdate überschrieben!

Alles anzeigen

Hallo SEpp55,

Dein Code hat wunderbar gepasst! Überall in der Seitenleiste sind die Abstände der Widgets nach unten so, wie ich es haben will!

Ein Problem bleibt aber noch: Der große Leerraum zwischen den Shariff-Buttons und der horizontalen Linie darunter. Mittlerweile glaube ich nicht mehr, dass der Fehler bei Shariff zu suchen ist, denn auf der Musterseite von Wordpress wird der Abstand vollkommen korrekt angezeigt! Was mir dabei aber aufgefallen ist: Wenn ich mir den Leerraum dort in der Konsole anzeigen lasse, wird dort eine spezielle Footer-Class angezeigt, die als "entry-footer" angegeben ist. Gehe ich aber auf die Startseite, werde ich dort auf die gesamte "Site-class" verwiesen, und im Gegensatz zur Musterseite, wo nur der footer gehighlighed wird, wird hier tatsächlich der gesamte Hauptseitenbereich gehighligted. Die Class wird hier als "role=main" definiert. Kann es sein, dass hier gar kein Footerbereich definiert ist? Ich vermute, dass ich da anfangs einen Fehler gemacht habe, als ich die Startseite ursprünglich als "Beitrag" angelegt und später mittels eines Plugins in eine "Seite" umgewandelt habe, weil ich diese Seite vorläufig als statische Startseite haben will. Jetzt weiß ich aber nicht, wie ich das Korrigieren und einen Footerbereich auf diese Seite einbauen kann und hoffe da auf Deine Hilfe! Dieser Footerbereich wird übrigens im Impressum, in der Datenschutzvereinbarung und der Löschantrag-Seite korrekt angezeigt, nur das angesprochene Problem mit den doppelten Button-Reihen besteht dort immer noch, warum auch immer...

Ich hoffe Du kannst mir da nochmal weiterhelfen.

Herzliche Grüße
Roland

Vielen Dank, SirEctor,

tatsächlich hatte ich wohl den Fehler wohl schon gefunden, aber nicht korrekt korrigiert. Ich hatte in mein CSS-File:

.site-main{
margin-bottom:2.0em;
}

geschrieben. Den habe ich jetzt durch den von Dir erhaltenen Code ersetzt und siehe da: Es funzt!

Herzlichen Dank!
Roland

Hallo SirEctor,

jetzt habe ich gesehen, dass der Abstand zwischen "Kommentar" und der Seitenlinie wieder zu lang war, also habe ich den alten Befehl einfach zusätzlich wieder 'reingesetzt, und jetzt stimmen alle Abstände. Jetzt hab' ich nur noch das eine Problem, dass im Impressum und in der Datenschutzvereinbarung die Buttons doppelt angezeigt werden, auf einer der beiden Seiten zweimal beschriftet, auf der anderen nur einmal. Liegt das nun am Design oder am Shariff-Wrapper?

Gruß
Roland