css für Terminliste (eventview) auf Homepage - Links farbig



  • auf unserer Homepage (christustreff.net/Aktuell.html) zeigen wir Termine aus Churchtools an.
    Zur Formatierung habe ich unter "Einstellungen für Kalender" folgendes CSS hinterlegt:

    li.event-author {
    display:none
    }
    #calendar .event-title {
    color: #000000;
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    }
    #calendar .event-location, #calendar .event-date {
    color: #000000;
    font-size:1.6rem;
    font-family: 'Roboto', sans-serif;
    }

    Frage:
    wie muss ich das CSS erweitern, damit event-title, für die im Kalender ein Link hinterlegt ist, farbig dargestellt werden (z.B. der title Bausteinewelt in unseren besonderen Veranstaltungen ist ein link)?



  • lass einfach die Zeile mit color: weg (= blau) oder trage da die gewünschte Farbe ein.
    Alternativ #calendar .event-name benutzen, dass ist der Link, in dem sich event-title befindet (überschreibt die Linkfarbe).

    #calendar .event-name:visited
    #calendar .event-name:hover
    #calendar .event-name:focus
    #calendar .event-name:activ
    (die Reihenfolge ist wichtig, damit das eine Format nicht das andere überschreibt)
    siehe z.B. https://die-netzialisten.de/css/pseudo-klassen-avisited-ahover-afocus-und-aactive/



  • herzlichen Dank für die Unterstützung!
    Hier zur Info für alle Mitleser das aktualisierte CSS:

    li.event-author {
    display:none /* Anzeige Author unterdrücken /
    }
    #calendar .event-name {
    color: #000000; /
    schwarz statt default grau /
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    }
    #calendar .event-name:visited,
    /
    #calendar .event-name:hover, /
    #calendar .event-name:focus,
    #calendar .event-name:active
    {
    color: #013ADF; /
    Links blau anzeigen */
    }

    #calendar .event-location, #calendar .event-date {
    color: #000000; /* schwarz statt default grau /
    font-size:1.6rem;
    font-family: 'Roboto', sans-serif;
    }
    #calendar .event-resources {
    display:none /
    Resource, z.B. Raum nicht anzeigen */
    }