Farbe eines Objekts in einer Komponente ändern

McFly · 9. Januar 2023

Hallo zusammen,

ich bin eigentlich nicht neu hier im Forum. Aber nach ein paar Jahren Pause mit Joomla habe ich meinen Nutzernamen vergessen und habe mich nun neu angemeldet.

In Joomla 4.2.6 möchte ich gerne die Farbe eines Objekts in einer Komponenten ändern. Ich dachte zuerst, das müsste ich über Overreides machen aber das geht wohl über CSS? Ich habe eine Custom CSS angelegt, in der ich schon ein paar Dinge im Template angepasst habe. Hier komme ich jedoch leider nicht weiter und hoffe auf Hilfe aus dem Forum.

Es geht um diese hier: https://joomla.digital-peak.com/demo/dpc/en/timeline-view

In der timeline view sind die Datumsangaben in diesen grauen Quadraten (unter der Karte) und die würde ich gerne auf schwärz ändern. Ich habe mich bereits versucht im Untersuchen der Seite und habe herausgefunden, dass die Farbangabe in der Datei timline.min.css zu finden sind. Aber hier hört es auf mit meinen Kenntnissen. Wie kann ich denn in der Custom CSS diesen Teil ansteuern?

Ich habe es damit probiert aber das war nicht erfolgreich:

div.dp-event__dot {

color: #fff !important;

}

Ich hoffe auf eure Hilfe und freue mich, wieder hier zu sein.

McFly

Elwood · 9. Januar 2023

Ohne Link immer schwierig.

Versuche das mal in der user.css oder custom.css:

Code

.com-dpcalendar-timeline .dp-event__dot-date {
   color: #000;
}

Bei der Demo von DP hat es funktioniert.

Mit einem Link zur Seite könnten wir es genau analysieren.

WM-Loose · 9. Januar 2023

Hi McFly, nimm mal folgenden Code für die Custom.css:

Code

.com-dpcalendar-timeline .dp-event__dot {
  background: #000;
  color: #fff;
}

Bei Elwood fehlt noch die weiße Schrift sonst schwarz auf schwarz.

McFly · 9. Januar 2023

Aha okay, danke für eure Antworten. Also beim Code von Dir,Elwood, wird die Schrift schwarz. Mir geht es aber um das helle Quadrat auf dem die Schrift steht, die soll schwarz werden.

Ich habe den Code dann abgeändert in:

Code

.com-dpcalendar-timeline .dp-event__dot {
   background: #000;
}

Also ohne das -date dahinter. Wobei ich für "background" auch "background-color" probiert habe. Ging beides leider nicht. Aber die Spur ist ja schon mal nicht schlecht, immerhin die Farbe konnte ich ändern.

Beim Code von Dir, WM-Loose, ist leider gar nichts passiert.

Elwood · 9. Januar 2023

Zitat von McFly

Also beim Code von Dir,Elwood, wird die Schrift schwarz. Mir geht es aber um das helle Quadrat auf dem die Schrift steht, die soll schwarz werden.

Das hatte ich zuerst auch.

Dann habe ich das gelesen und verstanden:

Zitat von McFly

In der timeline view sind die Datumsangaben in diesen grauen Quadraten (unter der Karte) und die würde ich gerne auf schwärz ändern.

Also sollte die Schrift (Datumsangaben) schwarz werden ................

Vielleicht habe ich es auch nicht verstanden............

Für das Quadrat halt das:

Zitat

.com-dpcalendar-timeline .dp-event__dot {
background: #000;
}

Leider fehlt noch der Link!

CurlY BracketS · 9. Januar 2023

Code

.com-dpcalendar-timeline .dp-event__dot {
  background: red;
}

und schon ist der Hintergrund rot. Kannste in deine custom.css notieren.

WM-Loose · 9. Januar 2023

OK, klingt irgenwie seltsam aber jetzt hat er ja die Möglichkeiten es selbst zu gestalten.

Hier der komplette Code mit Schrift weiß auf schwarzem Hintergrund:

CSS

.com-dpcalendar-timeline .dp-event__dot {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 20px;
  overflow: hidden;
  margin-top: 0;
  margin-left: -24px;
  transition: all .3s ease;
  color: #fff !important;
}

Alles anzeigen

Denk dran: Joomla und Browsercache löschen damit die Anpassungen angezeigt werden.

Das Eingangs ist doch kein Link auf deine eigene Webseite sondern Demo von DP?

Was soll das denn? Bei Designfragen immer Link zur betroffenen Seite (Forenregeln beachten)!

Ich bin damit raus.

McFly · 13. Januar 2023

Danke für eure Antworten. Mit den Codeschnipseln kann ich die Schriftfarbe ändern, das funktioniert. Allerdings das Kästchen dahinter bleibt so hell und lässt sich irgendwie in der Farbe nicht ändern.

Elwood: Da habe ich mich wirklich nicht gut ausgedrückt, mein Geschreibe war entsprechend leicht falsch zu verstehen.

Die Seite liegt übrigens noch lokal auf meinem Rechner, deshalb kann ich keinen Link schicken, hätte das sonst gerne gemacht. Aber die Seite ist noch zu unfertig, um sie hochzuladen.

LukasHH · 14. Januar 2023

Dann schreibe mal !important dahinter, damit das nicht über eine andere Regel überschrieben wird.

CSS

.com-dpcalendar-timeline .dp-event__dot {
    background: red !important;
}

Die Entwickler-Konsole der Browsers (F12) kann Dir da viel weiterhelfen.

Elwood · 15. Januar 2023

Auf der Demoseite von DP hat es ja problemlos funktioniert.

Dann schiebe die Seite auf eine Subdomain.

Kann man dann genau sagen.

McFly · 5. Februar 2023

Zitat von LukasHH
Dann schreibe mal !important dahinter, damit das nicht über eine andere Regel überschrieben wird.
CSS
.com-dpcalendar-timeline .dp-event__dot {
    background: red !important;
}
Die Entwickler-Konsole der Browsers (F12) kann Dir da viel weiterhelfen.

Okay, DAS war der Gamechanger und hat funktioniert! Herzlichen Dank!