Und wohin nur mit der Navigation?

  • Affected Version
    WoltLab Suite 3.0

    Hallo,


    am Stil der Suite bastle ich ja schon eine ganze Weile herum, aber womit ich einfach nicht weiterkomme, das ist jetzt im Header-Menü enthaltene Navigation. Die drei Elemente, Hauptmenü, Benutzermenü und Breadcrumbs sind leider in der Suite sehr unflexibel. Und selbst wenn man sich per CSS ein Bein ausreißt und die Elemente verschiebt, gelingt es nicht so recht eine sinnvolle Anordnung für sie zu finden, denn das Benutzermenü wirkt alleine bspw. recht verloren. Wie habt ihr das bei euch gelöst? Ich hätte die Navigation bspw. gerne unter dem Logo.


    Beste Grüße


    Gerhard

  • Die Umpositionierung mit CSS ist wirklich äußerst schlecht umsetzbar in Teilbereichen, da müsstest du evt. schon eher mit Templateanpassungen arbeiten.

    aber es kommt auch darauf an wie du deinen Stil gestalten möchtest um Positionen festzulegen, Das "Benutzermenü" sieht einzeln im Grunddesign verloren vor... hast du eine farbliche Abgrenzung zu anderen Elementen siehts schon besser aus - noch mehr kann man zur Füllung des Benutzermenüs auch die Schrift sichtbar machen anstatt nur die Symbole anzuzeigen:

    Code
    .userPanel > ul > li > a > span:not(.icon):not(.badge) {
        display: inline-block;
    }

    Das Menu ist im Standard fest am Rand oben positioniert, du kannst dieses aber auch flexibel darstellen (so dass dein Menu mitscrolled):

    Code
    .pageHeaderPanel {
        position: relative;
    }

    - Wenn bei Dummheit & Arroganz Federn wachsen sollten, so würden hier einige wie Vögel durch die Luft fliegen -

    - Powerstylez.de -

  • Hallo,


    so langsam wird mein Entwurf. Mich stört halt etwas, dass ich die Navigation absolut dorthin verschieben muss, wo ich sie haben möchte, und dadurch jede automatische Anpassung verhindere, bspw. wenn der Header höher wird. Gino ist ja ein wahrer Meister die raffiniertesten Sachen zu zaubern. Seine Designs haben mich motiviert mich auch nochmal dranzusetzen.


    Danke für den Tipp mit den Bezeichnungen für die Menüpunkte. So schaut das Benutzermenü schon mal nicht mehr so verloren aus. :)


    Beste Grüße


    Gerhard

  • Sodale. Ich denke der Zwischenstand kann sich schon mal sehen lassen. Mit dem Hauptmenü kämpfe ich derzeit noch. Und auch die Untermenüs im Benutzermenü klappen noch verkehrtherum aus. Aber das lässt sich sicher noch anpassen. Interessant wäre auch wie man die Tooltips im Benutzermenü entfernt. Die braucht man ja nicht mehr wenn man die Menüpunkte samt Beschriftung anzeigt.


  • Interessant wäre auch wie man die Tooltips im Benutzermenü entfernt. Die braucht man ja nicht mehr wenn man die Menüpunkte samt Beschriftung anzeigt.

    Ich glaube das wäre mit ein paar Template-Änderungen machbar. Im Template pageHeaderUser wird bei jedem Link ein "jsTooltip" mitgeliefert. Das müsste die Tooltips des Usermenus darstellen. Ich habe das selbst noch nicht ausprobiert, wollte sowas aber auch umsetzen.

  • Auf Template-Änderungen möchte ich möglichst verzichten. Die einzige Änderung die ich vorgenommen habe, war um die Favicons für verschiedene Systeme sauber einzubauen. Hat vielleicht ein CSS-Experte eine Idee, wie ich die Breadcrumbs („pageNavigation“) bündig unter die Navigation bekomme? Die hängen scharf links und bleiben auch hartnäckig dort.


  • Wenn man weiß was man machen muss kommt schon was gutes bei raus. Zumindest hab ich jetzt ein Darstellung gefunden die mir gefällt.




    Bei deinem Problem musst du ein paar Sachen ändern so wie ich das jetzt getestet habe bei dir am Stil.


    1. .pageNavigation - position: absolut & top: 255px entfernen

    2. .mainMenu - top: xx auf 200px ändern

    3. .main - padding anpassen wegen abstand nach oben

    4. div#pageHeaderFacade {padding-bottom: 50px;} einfügen


    Beim ändern von 2. musste auch 4 anpassen und umgekehrt.


    Alle Angaben ohne Gewähr!





  • Geronimo

    Hat vielleicht ein CSS-Experte eine Idee, wie ich die Breadcrumbs („pageNavigation“) bündig unter die Navigation bekomme? Die hängen scharf links und bleiben auch hartnäckig dort.

    Mit Gewähr;)

  • Funktioniert. Vielen Dank für deine Hilfe. Da habe ich wohl was die Formatierungen angeht etwas den Überblick verloren. Mit float komme ich klar aber mit den neuen Anordnungsmöglichkeiten muss ich mich erst noch anfreunden. Das Benutzermenü verwendet beispielsweise eine Eigenschaft bei der ich erst mal nachlesen musste, was das ist, display:flex, nur konnte ich noch nicht herausfinden, wie ich den letzten Menüpunkt, also die Suche, rechtsbündig anordne.


    Das Benutzermenü wie bei dir „freischwebend“ anzuordnen, finde ich auch eine schöne Idee, und erinnert ein wenig ans WBB 3.x. :thumbup:

  • Hitman, danke für deine Lösung, deine „bewaffnete“ Variante (mit Gewehr...) habe ich leider zu spät gesehen. Aber ich habe es auch schon mit der Anleitung von Mahiro hinbekommen. Was macht denn da das @includescreen-lg? Oh, die mobile Ansicht muss ich auch noch reparieren, aber das hat Zeit bis morgen. ;)

  • Geronimo

    warum hast du die Frage wieder gelöscht mit dem Suchpanel nach rechts verschieben:/

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Geronimo (Vor 2 Stunden)^^


    CSS
    .userPanel {
        flex: 1;
    }
    .userPanel > ul > li:not(:first-child) {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    ;)

  • :D

    So war das natürich nicht gedacht .

    Leider sehe nur das Suchfeld als Gast.

    Wenn du dich abmeldest müsste es passen ;)

    Evtl. kannst du mir über Konversation einen User-Account zuschicken, dann schaue ich noch mal nach;)

  • Muss ich mir bei Gelegenheit nochmal anschauen. Hab' allerdings schon wieder eine nervige Formatierung entdeckt: Irgendwie ist in der mobilen Ansicht der dreispaltige Bereich bereiter als der Inhaltsbereich. Das sorgt für Scrollbalken. Ich finde aber nicht wo die Breite des dreispaltigen Bereichs definiert wird... :/


Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!