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

WP <5.0 Twentyseventeen footer rotation

Dieses Thema im Forum "Design" wurde erstellt von fhwebdesign, 25. September 2018.

  1. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Hallo zusammen,
    wenn ich beim twentyseventeen-Theme den footer (#colophon) mit
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    versehe, entsteht unten am Ende der Seite so eine Art "Keil". Ich hoffe ich drücke mich verständlich aus. Wie "verkürze" ich die Website jetzt so, dass dieser Keil nicht mehr sichtbar ist?
    Alle meine Versuche sind gescheitert, diese gingen von
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    über alles erdenkliche.
    Hat da jedmand zufällig einen Hotfix für mich?
    Danke schonmal!
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
    Ich verstehe nicht was du willst. Du drehst den Footer extra und willst das dann ausblenden? Gibt es einen Link um sich das anschauen zu können?
     
  3. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Habe mal eben eine Dummy-Seite aufgesetzt (Kommt per PN). Ich will nicht den ganzen Footer ausblenden, sondern nur dieses "Dreieck", das dann unterhalb entsteht. Möglicherweise hast du eine Idee, wie man das ganze anders lösen könnte?

    Edit SirEctor: Vollzitat in direkter Antwort entfernt.
     
    #3 fhwebdesign, 25. September 2018
    Zuletzt von einem Moderator bearbeitet: 25. September 2018
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
    Bitte keine Links per PN. Das ist ein öffentliches Forum. Wie sollen sonst andere helfen?
     
  5. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.571
    Zustimmungen:
    406
    Versuch das im Dashboard unter Design - Customizer - Zusätzliche CSS einzufügen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  6. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Dadurch geht leider nur der Teil des Bildes innerhalb des "Dreiecks" weg, dafür bleibt das "Dreieck" weiß bestehen.

    Edit SirEctor: bitte keine Vollzitate als direkte Antwort
     
    #6 fhwebdesign, 25. September 2018
    Zuletzt von einem Moderator bearbeitet: 26. September 2018
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.571
    Zustimmungen:
    406
    durch die Drehung vom Container ist der "Keil" aber auch links und rechts - das macht nichts¿ In der Demo ist dann alles weiß ;)
     
  8. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Ich meinte den Keil unten und nicht links oder rechts. Oder verstehe ich dich falsch? Es sieht dann jedenfalls so aus:
    Vorher: [​IMG]
    Nachher: [​IMG]
    So soll es aussehen: [​IMG]
     
    #8 fhwebdesign, 25. September 2018
    Zuletzt von einem Moderator bearbeitet: 26. September 2018
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.571
    Zustimmungen:
    406
    Ich habe für dich im Internet gesucht und etwas gefunden!
    CSS transform
    Demnach versuche mal den transform so zu ergänzen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    oder eben bottom left - je nachdem, in welche richtung du rotate gesetzt hast.
     
  10. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Danke dafür! Jedoch ändert sich dadurch rein gar nichts, es springt zwar kurz aber der Keil bleibt da.

    Edit SirEctor: Bitte keine Vollzitate in einer direkten Antwort!
     
    #10 fhwebdesign, 26. September 2018
    Zuletzt von einem Moderator bearbeitet: 26. September 2018
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.571
    Zustimmungen:
    406
    Für mich ist damit das Ratespiel beendet!!
    Ich suche auf einer Demoseite und du gibst keinen Link zu deiner Seite bekannt. Da wundere ich mich nicht, dass es irgendwo spießt.
     
  12. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Ich hatte gestern einen Moderator gebeten, in das Thema den Link noch einzufügen, da ich dieses nicht mehr bearbeiten kann. Entschuldige daher bitte, dass ich das nicht erneut gemacht hatte. Aber gerne, der Link ist hier. Entschuldige die Umstände.
     
    #12 fhwebdesign, 26. September 2018
    Zuletzt bearbeitet: 26. September 2018
  13. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    102
    Bitte mal testen...
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  14. fhwebdesign

    fhwebdesign Well-Known Member

    Registriert seit:
    2. Januar 2018
    Beiträge:
    126
    Zustimmungen:
    7
    Danke. Leider funktioniert das ebenfalls nicht, das "Dreieck" ist nach wie vor da, aber dann in weiß anstatt des Bildes.
     
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.571
    Zustimmungen:
    406
    Grundsätzliches zur "Schägstellung" des Colophon-Footers!
    Verwende bei der Eigenschaft transform anstatt von rotation(2deg) den Wert skewY(2deg).
    Das hat den Vorteil, dass die seitlichen "Keile" die durch die Drehung des Div entstehen bei skewY nicht entstehen.
    Weiters ersparst du die die 105% width.
    Das behebt aber nicht den Keil "Dreieck" - kann auch nicht, denn das unterste Element auf der Seite ist nun die rechte Ecke vom Footer.
    Eine asymetrische Ausrichtung eines Containers kenne ich (noch)nicht - habe auch keine gefunden. Mit transform kann man das in alle Richtungen drehen uns schwenken aber dass es unten gerade abschließt ist mir nicht untergekommen. Heißt aber nicht, dass es so etwas nicht gibt....
    Mein Lösungsansatz: (alles in den letzten Tagen im Internet zusammengesucht - kein Wissen. Wie oft - learning by doing!)
    Mit dem skewY(2deg) wird links der footer hochgezogen und die dahinter liegenden Container werden sichtbar.
    in weiß - site-content-contain
    und das wp-custom-header Image.
    Da der Drehpunkt horizontal und vertikal mittig von colophon ist.
    Mit transform-origin: bottom left; wird der Drehpunkt nach unten, links gelegt und rutscht ans Ende des Elterncontainers Dadurch ist nur mehr das Image zu sehen.
    Da das unterste Element kein margin-bottom nimmt habe ich mit padding-bottom: 45px; das Bild nach oben geschoben und background-color: #3A3A3A; gesetzt. Soweit so gut ;)
    Jedoch sieht man in deinem Beispiel, dass das Headerimage im Header (oben) auch den dunklen unteren Randbalken hat.
    Auf dieser Demo-Testseite sieht man diese Nebenwirkung nicht - da der Header weniger Höhe hat ;)
    Ein noch nicht versuchter Ansatz - unter dem site-content-contain einen weiteren Container mit 50px höhe und der entsprechenden Hintergrundfarbe zu plazieren.
    Was mir an der ganzen Sach optisch nicht gefällt sind die diversen schrägen Linien die nicht wirklich schön aussehen.
    upload_2018-9-27_14-28-7.png
    Ende der Fahnenstange!
     
  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