1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Zu viele Leerräume auf meinem Blog

Dieses Thema im Forum "Design" wurde erstellt von Roland.M.Horn, 4. März 2019.

Schlagworte:
  1. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    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
     
    #1 Roland.M.Horn, 4. März 2019
    Zuletzt von einem Moderator bearbeitet: 4. März 2019
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    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
    upload_2019-3-4_17-10-57.png
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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!
     
  3. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    Oh, CSS mit PHP verwechselt. Peinlich.

     
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Wie ich sehe, hast du schon einiges geändert. Wars das, oder ist noch was offen?
     
  5. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    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


     
  6. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Versuche das mal -

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Deine Zusätzlichen CSS brauchst du nicht angeben, die sehe ich auch so ;)
    Dann solltest dur den "Gemischte (unsichere) Anzeige-Inhalte " finden. Gelber Hinweis beim https Schloß!
    Im Entwicklertool im Reiter Konsole sind Hinweise.
    Weiters für die Suche diverser CSS Einstellungen - im Entwicklertool oben ganz links ist ein Symbol mit Kontext "Ein Element der Seite auswählen" das ist auch sehr hilfreich!
     
  7. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    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
     
    #8 Roland.M.Horn, 6. März 2019
    Zuletzt von einem Moderator bearbeitet: 6. März 2019
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    der große Abstand unter den Shariff-Buttons kommt durch
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Überschreib den Wert einfach mittels "Zusätzliches CSS".
     
  9. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    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
     
    SirEctor gefällt das.
  10. Roland.M.Horn

    Roland.M.Horn Active Member

    Registriert seit:
    28. Februar 2019
    Beiträge:
    37
    Zustimmungen:
    1
    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
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden