Kaffee mit festgepinnter oberer Leiste

  • Huhu!

    Könntet ihr vielleicht eine Version des Themes Kaffee bereitstellen (als Fork, als Ersatz für das Original, wie auch immer es für euch am sinnvollsten ist), die ähnlich wie in BlackOpsBlue die obere Leiste am Bildschirmrand festpinnt, wenn man herunterscrollt? Gerade, um schnell einen Überblick über Benachrichtigungen zu bekommen, finde ich diese Funktionalität extrem hilfreich.

    Jeder Mensch ein Magier!
    Avatar by Tacimur

  • Das Style habe ich mal dupliziert um an einer Kopie zu arbeiten. Die simplen CSS-Änderungen meinerseits haben leider noch nicht gefruchtet leider. Ich schaue mir das noch in Ruhe an. Wenn jemand anders direkt einen CSS-Code bereit hat, damit das Dingen direkt schwebt, gerne ;)

  • CSS
    1. #pageHeaderPanel {
    2. position: fixed;
    3. top: 0;
    4. }
    5. #pageHeaderFacade > .layoutBoundary {
    6. padding-bottom: 52px;
    7. }
    8. .pageHeaderContainer {
    9. background-position-y: 50px;
    10. }

    Das sollte die Navigationsleiste permanent oben fixieren. Ist allerdings nur im Firefox getestet, da ich meine Entwicklerwerkzeuge nur dort habe... Um sie erst beim Scrollen oben anzupinnen, wie es bei BlackOps geschieht, brauchst du jQuery. Falls du auch individuellen js-Code hinzufügen kannst, kann ich dir auch die nötige Funktion dafür schreiben.


    Weiterhin ist mir aufgefallen, dass die Axt eine leicht andere Hintergrundfarbe hat (im Bild eingebunden). Gibt es dafür einen Grund? Falls nicht, würde ich empfehlen, die Farbe anzupassen und dann die background-position-y eher so bei 60px anzusetzen, um einen etwas größeren Abstand zwischen Axt und Kontrollleiste zu erhalten.

    Einmal editiert, zuletzt von Sorcerer () aus folgendem Grund: Tippfehler im CSS-Code

  • Danke. Die CSS-Anpassungen hatte ich auch soweit durch, aber die Specials mit dem Nachrücken bisher noch nicht. Da kann ich - ohne Anpassung des Ursprungs-Templates - auch keine eigenen Deklarationen vornehmen.


    Zur Axt: Es gibt keine besondere Farbe bei der Axt. Diese ist ganz regulär als transparentes Bild auf den pageheader gesetzt, der dann in einer zusammengeführten Grafik wiederum so aussieht und genutzt wird: https://www.orkenspalter.de/wcf/images/Coffee/pageheader.png


    Die Farbwerte um die Axt sind - ebenso wie beim restlichen Hintergrund #472519. Oder was genau meinst du?

  • Die Farbe hinter der Axt ist wie du sagst #472519. Die Farbe hinter allem anderen ist #48291f (siehe z. B. hinter dem Logo).


    Welche Möglichkeiten zur CSS-Anpassungen hast du denn? Ich war bei der Erstellung davon ausgegangen, dass du beliebigen CSS-Code einfügen kannst. Aber wenn das irgendwie beschränkt ist... vielleicht lässt sich da ja noch etwas machen?

  • Also. Ich habe mich bei der Axt auf die Axt rechts und nicht die Logoaxt beschränkt. Die linke übergebe ich als transparente PNG Grafik an das System. Bei mir sieht es auch gleich aus. Schiebst du ggf die Bilder durch einen Kompressionsfilter? Bin erst heute spätabends wieder am PC.


    CSS kann ich überschreibenderweise machen. Damit habe ich es auch schwebend hinbekommen, allerdings den erwähnten Scrolleffekt nicht. Ohne den hängt es initial ohne den 200px Verschub doof oben rum. Später sollte es natürlich oben hängen.

  • Wenn ich den CSS-Code (natürlich mit einem kleingeschriebenen e in der letzten Deklaration) nach der CSS-Datei ausführe (also überschreibend), funktioniert es bei mir.


    Bzgl. der Bilder: Ich nutze zumindest nicht bewusst einen CDN oder Kompressionsfilter. Wenn ich die beiden Bilder (der einfarbige Hintergrund ist tatsächlich ein Bild...) herunterlade, haben sie die selbe Farbe. Aber angezeigt im Browser (Firefox und Chrome) weisen sie zwei leicht verschiedene Farben auf. Für Firefox habe ich diverse AddOns laufen, aber theoretisch nichts, was das erklären könnte. Chrome ist einfach nur installiert ohne Anpassungen. Interessanterweise sehen die Bilder identisch aus im Edge - womit ich ein CDN seiten des Providers oder so ausschließen kann. Naja, mir letztlich egal, da ich nicht Kaffee nutze :D Aber wenn du CSS überschreibend einfügen kannst, könnte es eine Idee sein, überschreibend das einfarbige Bild (im body) zu entfernen und gegen eine statische Farbe auszutauschen.

  • Zu den Headern

    Den Fehler beim Logo kann ich nicht nachvollziehen, tippe jedoch auf ein Plugin oder eine Erweiterung, die Bilder unsauber komprimiert.


    Chrome 61.0.3163.100 (64-bit)

    Keine merkwürdigen anderen Farben hinterm Logo.



    Edge 40.15063.674.0

    Keine merkwürdigen anderen Farben hinterm Logo.



    Firefox 56.0.1 (64-bit)

    Keine merkwürdigen anderen Farben hinterm Logo.



    Zum CSS

    Mit dem obigen CSS-Code rutscht die Leiste zwar mit, aber hängt nicht oben am Rand, sondern mittig im Bild. Das User-Submenü öffnet sich dagegen noch weiterhin oben. In der Form ist's leider nicht verwendbar :-(.




    Wer's testen will: Kaffee - Testversion heißt das Style.