Farbe eines Objekts in einer Komponente ändern

  • Hallo zusammen,


    ich bin eigentlich nicht neu hier im Forum. Aber nach ein paar Jahren Pause mit Joomla habe ich meinen Nutzernamen vergessen pardon 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

  • 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.

  • 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.

  • 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. hmm

  • 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:



    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!

  • 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:


    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.

  • 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. hmm


    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.

  • 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.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.