Cassiopeia mit "original" Bootstrap 5 Farben

Ich bin zwar kein Profi aber bezüglich der Alerts eventuell nützlich in der user.css:

.alert-primary {
  --alert-color: #084298;
  --alert-bg: #cfe2ff;
  --alert-border-color: #b6d4fe;
}
.alert-primary .alert-link {
  color: #06357a;
}

.alert-secondary {
  --alert-color: #41464b;
  --alert-bg: #e2e3e5;
  --alert-border-color: #d3d6d8;
}
.alert-secondary .alert-link {
  color: #34383c;
}

.alert-success {
  --alert-color: #0f5132;
  --alert-bg: #d1e7dd;
  --alert-border-color: #badbcc;
}
.alert-success .alert-link {
  color: #0c4128;
}

.alert-info {
  --alert-color: #055160;
  --alert-bg: #cff4fc;
  --alert-border-color: #b6effb;
}
.alert-info .alert-link {
  color: #04414d;
}

.alert-warning {
  --alert-color: #664d03;
  --alert-bg: #fff3cd;
  --alert-border-color: #ffecb5;
}
.alert-warning .alert-link {
  color: #523e02;
}

.alert-danger {
  --alert-color: #842029;
  --alert-bg: #f8d7da;
  --alert-border-color: #f5c2c7;
}
.alert-danger .alert-link {
  color: #6a1a21;
}

.alert-light {
  --alert-color: #636464;
  --alert-bg: #fefefe;
  --alert-border-color: #fdfdfe;
}
.alert-light .alert-link {
  color: #4f5050;
}

.alert-dark {
  --alert-color: #141619;
  --alert-bg: #d3d3d4;
  --alert-border-color: #bcbebf;
}
.alert-dark .alert-link {
  color: #101214;
}

aus:

https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-dist.zip

Zeile 4694 bis 4764 und entsprechend für joomla angepasst.

Für die Buttons siehe übrigens z.B. Zeile 2844 bis 3174 in selbiger Datei bootstrap.css

Ich überschreibe die Variablen von Bootstap in der user.css.

Falls du gerade entwickelst, hast du vielleicht Interesse an Joomla 5. Das hat bootstrap 5 an Bord.

Du könntest bei der Entwicklung bereits mit der alpha Version arbeiten wir sind immer sehr begeistert wenn wir Tester gewinnen können.

Nightly Builds

developer.joomla.org

Hier kannst du diese Version herunterladen (5.0)

Zitat von firstlady

...

Falls du gerade entwickelst, hast du vielleicht Interesse an Joomla 5. Das hat bootstrap 5 an Bord.

...

Joomla 4 hat auch schon Bootstrap 5

ach stimmt Asche auf mein Haupt .

Ich habe gerade an fontawesome gedacht, das ist in Joomla 5 neu.

Gab es nicht auch schon Fontawesome in Joomla 4 welches irgendwie umgewandelt wird:
https://blog.astrid-guenther.de/joomla/0vorwort/#fontawesome-icons

In Cassiopeia wird es für die Searchtools genutzt (https://github.com/joomla/joomla-…asset.json#L105)?

In Joomla 4 ist Fontawesome 5 schon dabei.

Ich nehme an in Joomla 5 wird Fontawesome 6 dabei sein.

Zitat von Stef

Ich nehme an in Joomla 5 wird Fontawesome 6 dabei sein.

Hab mal nachgeschaut. In meiner Joomla 5.0.0-alpha4-dev sehe ich:

Liebe Grüße

Christine

Danke, .. also sorry, ich war gedanklich woanders. Die Frage war ja, wie wir bootstrap Farben ändern. Und hier bleibt die Aussage: Variablen in der user.css überschreiben, wie auch Sieger66 schon geschrieben hat.

Wenn du dann z.B. später abschließend die Veränderungen der user.css noch in die template.css eines Cassiopeia-Child-Templates wie ein "Profi" per SCSS integrieren bzw. kompilieren möchtest kannst du, nach einem Backup, auch noch folgendes Linkziel komplett lesen, verstehen, durchführen und anschließend die erstellte template.css in dein Child-Template kopieren.

Also z.B. in den Dateiordner:

‎/media/templates/site/cassiopeia_child/css/template.css

cassiopeia_child

muß natürlich durch des Namen deines Dateiordners des Childs ersetzt werden.

docs.joomla.org/J4.x:SCSS_and_Sass/de#Von_vorhandenem_CSS_zu_SCSS_.2F_CSS-Dateien_importieren

Ich habe dies bisher aber auch noch nicht gemacht.

Dann solltest du diese Datei aber wohl auch noch als template.min.css im selben Dateiordner speichern damit du keine unerwünschten Effekte erlebst und falls z.B. deratiges wie nachfolgender Code in den Dateien zurückbleibt auch zuvor löschen oder auskommentieren um andere unerwüschte Effekte zu vermeiden, wenn du diesbezüglich die "original-Bootstrap 5 Farben" verwenden möchtest:

.btn-primary {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
}

Letzteres könntest du z.B. auch machen wenn du die template.css für dein Cassiopeia-Child-Template nicht neu compilierst sondern einfach kopierst und wie gewünscht anpasst.

Ich würde in diesem Fall dann auch empfehlen im Kopfbereich der Datei die Zeilen zu vermerken die du gändert oder auskommentiert hast ansonsten könnte es eventuell später für dich schwer werden die Veränderungen zu lokalisieren.