Schaltflächen und Überschriften in Protostar: Totes CSS?

  • Hallo zusammen,


    Es scheint, als wäre ich in Protostar bei den klassischen Schaltflächen (.btn) auf ein Problem gestoßen. Hier mal der Code-Block aus dem aktuellen Original-Stylesheet:



    Was mich etwas stutzig macht, sind diese vier Zeilen, die mit dem Rahmen der Schaltfläche zu tun haben:


    Code
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border: 1px solid #bbb;
    *border: 0;
    border-bottom-color: #a2a2a2;


    Jetzt ignoriert Firefox (laut "Inspektor") offenbar border-color: #e6e6e6 #e6e6e6 #bfbfbf;, weil border: 1px solid #bbb; und border-bottom-color: #a2a2a2; gesetzt sind. Das sieht bei mir derzeit so aus (ohne text-decoration: underline;) :



    Schalte ich nun border: 1px solid #bbb; aus und setze border-style: solid; und border-width: 1px;, wird border-color: #e6e6e6 #e6e6e6 #bfbfbf; im Firefox brav verarbeitet:



    Auch die Regeln für Überschriften sind seltsam. Zuvor definierte Schriftgrößen für h1 bis h6 werden weiter unten wieder überschrieben. Da läuft doch viel redundant ab, oder macht das tatsächlich Sinn? (Ich bin jetzt nicht so der tolle CSS-Experte...)


    Liebe Grüße, Gerry77

  • Sicherlich ist nicht jedes Template perfekt. Aber es hat seine Aufgaben vollumfänglich erfüllt und ist kostenlos. Bei der Entwicklung geht es mit dessen Nachfolger "Cassiopeia" weiter, wenn man es als Nachfolger bezeichnen darf. Da wird vieles anders sein, z.B. Bootstrap 4, Sass usw.


    Ich wolte eigentlich nur sagen, dass ich in das Auslaufmodell keine Energie mehr "reinstecken" würde.


    EDIT: Ich spreche natürlich von Joomla 4. ;)

  • Hallo JoomlaWunder,


    Vielen Dank für Deine Antwort. Protostar ist durchaus OK, daran gibt es bestimmt sehr wenig zu meckern. Ich dachte mir nur, falls es Fehler sind, die man selbst leicht korrigieren kann, aber von den Entwicklern wegen fehlender Ressourcen in Version 3.x nicht mehr behoben werden, mache ich das einfach auf unsere Seite, ist ja schließlich kein Beinbruch. ;)


    Fragt sich nur, wie die Schaltflächen wirklich aussehen sollen. :/ Die kommen ja von Bootstrap. In der Dokumentation für Version 2.3.2 sind die einzelnen Schaltflächen enthalten, die etwas anders aussehen als die in Protostar. Bei genauerer Betrachtung ist mir eine zusätzliche Eigenschaft aufgefallen, die im Protostar-CSS nicht enthalten ist:


    Code
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);


    Und siehe da, jetzt sehen die Ränder der Schaltfläche wie die in der Bootstrap-Dokumentation aus:



    Ich gehe mal davon aus, dass das CSS in Protostar von einer älteren Ausgabe von Bootstrap stammt und seitdem nicht nachgezogen wurde.


    Aber in Zeiten wie diesen sind das wirklich Luxusprobleme!


    Liebe Grüße, Gerald

  • Ja, Protostar hat nicht Bootstrap 2.3.2 verbaut sondern eine frühere Version.

    Keine Ahnung, ob Bootstrap im Lauf der Joomla-Version 3 mal aktualisiert wurde. Bei mir läuft folgende Version:


    Daran habe ich auch nicht rumgebastelt.

  • Protostar bindet diverse .less-Dateien aus media/jui/less ein: https://github.com/joomla/joom…tostar/less/template.less Wenn man sich diese anguckt, findet man z.B. hier den Verweis auf Version 2.3.2. Aber wie jedes Template ist Protostar nicht einfach Bootstrap wie ab Werk, sondern macht natürlich seine eigenen Änderungen, um einen eigenen Style, basierend auf Bootstrap zu bekommen. Dazu zählt dann eben auch das Überschreiben mancher Styles. Wenn du genau wissen willst, was warum wie gemacht wurde, musst du dir die git-Versionsgeschichte der Ordner templates/protostar/less und media/jui/less anschauen.

  • Vielen Dank für die Info, Harmageddon . Ich habe mir die Datei "media/jui/css/bootstrap.css" angesehen, darin finden sich die zwei Zeilen:


    https://github.com/joomla/joom…bootstrap.css#L3215-L3216


    In der Datei "templates/protostar/css/template.css" von Protostar stehen nur die Hex-Werte:


    https://github.com/joomla/joom…ar/css/template.css#L2267


    Die kollidieren zwangsläufig mit border: 1px solid #bbb;.


    Den ältesten Blob im Bootstrap-Repository, den ich dazu finden konnte, ist dieser:


    https://github.com/twbs/bootst…bootstrap.css#L2752-L2753


    Wenn ihr mich fragt, hat man diese Zeile in Protostar vergessen, denn in Isis ist sie enthalten. Und weil border-color: #e6e6e6 #e6e6e6 #bfbfbf; nicht wirkt, ist es eigentlich ein Fehler im Template. Entweder diese Eigenschaft fliegt raus oder border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); kommt rein. Ich sehe eigentlich keinen Grund, warum Isis damit ausgestattet ist und Protostar nicht.


    Aber, wie gesagt, es gibt Wichtigeres...


    Liebe Grüße, Gerald