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

Gerry77 · 9. April 2020

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:

Code

.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbb;
    *border: 0;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

Alles anzeigen

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

JoomlaWunder · 9. April 2020

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.

Gerry77 · 9. April 2020

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

Re:Later · 9. April 2020

Zitat von Gerry77

von einer älteren Ausgabe von Bootstrap stammt und seitdem nicht nachgezogen wurde.

Es gibt kein Bootstrap 2, das neuer ist als das in Joomla 3 und somit Protostar Älter geht gar nicht mehr und neuer auch nicht und nachziehen auch nicht.

Gerry77 · 9. April 2020

Zitat von Re:Later

Es gibt kein Bootstrap 2, das neuer ist als das in Joomla 3 und somit Protostar

Aber in Protostar fehlt dieser Eintrag offensichtlich. Woher kommt die in der Bootstrap-2-Dokumentation ersichtliche Ergänzung? Jetzt will ich es aber genau wissen!

Liebe Grüße, Gerald

addi · 9. April 2020

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

Gerry77 · 9. April 2020

addi Ich dachte es mir, vielen Dank für die Info!

Liebe Grüße, Gerald

JoomlaWunder · 10. April 2020

Zitat von addi

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:

Spoiler anzeigen

Daran habe ich auch nicht rumgebastelt.

Gerry77 · 10. April 2020

JoomlaWunder Interessant. Wo kann ich die Bootstrap-Version des Templates auslesen?

Liebe Grüße, Gerald

JoomlaWunder · 10. April 2020

.../media/jui/css/bootstrap.css

Es sei denn, du hast im Template andere Dateien installiert (z.B. Bootstrap 3 -Dateien). Dann würden diese greifen.

Harmageddon · 10. April 2020

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.

Gerry77 · 10. April 2020

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