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

Header auf bestimmten Seiten verkleinern

Dieses Thema im Forum "Design" wurde erstellt von juuhuu, 12. Dezember 2016.

  1. juuhuu

    juuhuu New Member

    Registriert seit:
    12. Dezember 2016
    Beiträge:
    4
    Zustimmungen:
    0
    Hallo :)

    Ich bin Schülerin und mache als Diplomarbeitsthema mit zwei Kollegen eine Website.

    Wir haben grundlegende Sachen in der Schule gelernt, aber mittlerweile hab ich einige Probleme beim Design die mich aufhalten...

    Die Seite: http://www1.slowfoodwaldviertel.at/ (wie gesagt - ist noch im Gestaltungsrozess, also bitte seid nachsichtig bei etwaigen Fehlern und dem noch nicht fertigen Inhalt :oops:)

    Mein Theme heißt Zerogravity - habe natürlich ein Childtheme erstellt und schon einige Änderungen vorgenommen.

    Hier mein Anliegen:
    1. ich möchte den Header nur auf der Seite "Home" so groß haben - wenn man dann auf weitere Menüpunkte kommt soll er sich verkleinern ... (kenn mich mit php leider wenig aus und habe keine Ahnung wie das funktionieren soll :()
    2. toll wäre es, wenn ich beim Auswählen eines Menüpunkts, nicht direkt am Anfang der Website, sondern beim Inhalt landen würde - ansonsten wird das zu einem regelrechten "Scrolldebakel")


    Vielen Dank schonmal im Voraus - falls ihr weitere Infos oder Codes braucht ist das natürlich kein Problem :D

    LG Julia
     
  2. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Kein PHP - CSS. Durch die Funktion https://developer.wordpress.org/reference/functions/body_class/ werden dem body Klassen verpasst, über die man sowas lösen kann. Die Startseite hat z.B. immer "home", eine normale Seite "page", ein einzelner Beitrag "post", eine Übersicht "archive". Damit kommen wir beispielsweise zu:
    .archive .nivoSlider, .page .nivoSlider, .single .nivoSlider {height:200px;} - womit dem Slider auf archive, page und single eine Höhe von 200 Pixeln zugewiesen wird (diesen Wert ggf. anpassen).
    Sieht so aber noch nicht schön aus, weil damit nur der oberste Teil des Bildes noch zu sehen ist... also erweitern um z.B.:
    .archive .nivoSlider img, .page .nivoSlider img, .single .nivoSlider img {top: 50%; transform: translateY(-50%);}
    - um das Bild vertikal zu zentrieren.

    Edit: die Auswahl gänge natürlich noch etwas eleganter mit "body:not(.home) .nivoSlider {height:200px;}".

    Ich verstehe den Gedanken dahinter, aber das wäre ein sehr ungewohntes Seitenverhalten - würde ich nicht machen. Wenn der Slider nicht mehr so hoch ist, ists ja auch mit dem Scrollen nicht mehr so schlimm.
     
    #2 Nevery, 12. Dezember 2016
    Zuletzt bearbeitet: 12. Dezember 2016
  3. juuhuu

    juuhuu New Member

    Registriert seit:
    12. Dezember 2016
    Beiträge:
    4
    Zustimmungen:
    0
    Vielen, vielen Dank für deine schnelle und hilfreiche Antwort :)

    Hat funktioniert und sieht super aus - und ja es passt so perfekt mit dem angepassten Slider (mich hat es nur extrem gestört wenn man bei jedem neuen Menüpunkt wieder komplett "oben" landet - erübrigt sich allerdings jetzt).

    LG Julia


    Allerdings ein kleines Problem: In der mobilen Ansicht bleibt der Slider zwar klein, allerdings rutscht der Inhalt nicht hoch - wie kann ich das vernünftig lösen? LG Julia
     
    #3 juuhuu, 12. Dezember 2016
    Zuletzt bearbeitet: 12. Dezember 2016
  4. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    Der Inhalt kann nicht "hochrutschen", weil der Slider nun eine feste Höhe hat - auch wenn man die so nicht sieht, da die Bilder immer kleiner werden und somit Leerraum entsteht, aber er hat nunmal die feste Anzahl Pixel Höhe.

    Man könnte versuchen mit Prozentwerten zu frickeln, davon bin ich allerdings kein Fan, weil die gerne mal von Browsern unterschiedlich interpretiert werden.

    Sicherer wäre es, Mediaquerys zu verwenden - als kurzes Beispiel, anstatt dem festen Pixelwert an Höhe:

    body:not(.home) .nivoSlider {height:50px;}
    @media only screen and (min-width : 320px)
    {body:not(.home) .nivoSlider {height:90px;}}
    @media only screen and (min-width : 480px)
    {body:not(.home) .nivoSlider {height:120px;}}
    @media only screen and (min-width : 768px)
    {body:not(.home) .nivoSlider {height:160px;}}
    @media only screen and (min-width : 992px)
    {body:not(.home) .nivoSlider {height:220px;}}
    @media only screen and (min-width : 1200px)
    {body:not(.home) .nivoSlider {height:263px;}}

    Typische Breakpoints, allerdings von den Zahlen her nicht feinjustiert, das würde ich dann doch Dir überlassen ;)
     
  5. juuhuu

    juuhuu New Member

    Registriert seit:
    12. Dezember 2016
    Beiträge:
    4
    Zustimmungen:
    0
    Nochmals danke für die tolle Hilfe :)
    LG Julia
     
  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