Verlinkte CMS-Artikel optisch hervorheben

  • Affected Version
    WoltLab Suite 5.3

    Hallo zusammen,

    ich benutze in Seiten Links zu erstellten Artikeln.

    Diese Links benutzen, wenn ich den BB-Code [wsa='1'][/wsa] nehme, die Standardformatierung für <a>Link</a>.

    Leider finde ich im Codeinspector bei einem Artikel-Link keine eigene Klasse, die ich im CSS benutzen könnte.

    Gibt es eine Möglichkeit, [wsa='1'][/wsa] Links separat via CSS anzusprechen?

    LG und einen schönen Sonntag :)

  • Go to Best Answer
  • Moin,

    ich habe jetzt auch mal geschaut, ob ich bei der BB-Code Konfiguration eine eigene Klasse übergeben kann - geht nicht.

    Es muss doch eine Möglichkeit geben, WSA-Links (Artikel-Links) über CSS zu erreichen? :/

    LG

  • Ich komme einfach nicht direkt ran.

    Dann eben anders 8) ...

    Ich bitte um eine kleine Hilfe, denn die CSS Verkettungen sind mir nicht so geläufig.

    Wir haben also einen äußeren Container mit der id="content" und der Klasse="content".

    Darunter den Container mit der Klasse="section cmsContent htmlContent".

    Und darin dann der Link zum CMS-Artikel, den ich meine.

    Wie müsste die CSS-Verkettung aussehen, um gezielt die beschriebenen Container anzusprechen?

    Ich finde es sehr schade, dass die Arikel-Links keinen eigenen Klassennamen haben ;( .

    LG

  • Ich habe es jetzt so ...

    CSS
    /* WSA-Links */
    #content.content > .section.cmsContent.htmlContent a {
        color: #e65100;
    }

    ... und der Link wird angesprochen, theoretisch ist es jetzt so, wie ich mir das wünsche :thumbup:

    Ist denn die CSS-Syntax so richtig oder habe ich da etwas zusammengemurkst?

    LG

  • Wenn das überall so dargestellt werden soll, kannst du das auch konkretisieren:

    CSS
    a[href^="https://www.diylab.de/article/1-"] { color: #e65100 !important; }

    Ansonsten findest du den (vermutlich präzisesten) Selektor für genau diese eine Seite im Body.

  • Da hast du den Spatz aber mit einer fetten Kanone abgeschossen ;) . Im Prinzip reicht auch .content > .htmlContent a.

    Allerdings befürchte ich, dass mit dieser Methode auch andere Links selektiert werden.

    Der bessere Weg wäre, einen eigenen BBCode dafür zu erstellen oder natürlich das konkrete Ansprechen wie von SoftCreatR vorgeschlagen. Das bedeutet dann aber auch, für jeden Link so vorzugehen. Bei zunehmender Artikelanzahl sehr anstrengend.

    Edited once, last by WollZi (April 26, 2021 at 11:32 PM).

  • Im Prinzip reicht auch .content > .htmlContent a.

    Ich wollte gerade das hier posten:

    CSS
    #content.content > .cmsContent a {
        color: #e65100;
    }

    Weiß nicht wo der Unterschied zu .htmlContent und .cmsContent liegt - ich dachte, .cmsContent könnte wohl für CMS-Seiten sein, die ich ja benutze?

    Der bessere Weg wäre, einen eigenen BBCode dafür zu erstellen.

    Das finde ich spannend!

    Also quasi den WSA BB-Code kopieren und um eine Klasse erweitern?

    LG

    Edit: hab mir eben die BB-Codes angeschaut und dachte, ich könnte einfach eine eigene Klasse definieren, scheint nicht zu gehen. Wie könnte man den WSA BB-Code "modifizieren"?

  • CSS
    a[href^="https://www.diylab.de/article/1-"] { color: #e65100 !important; }

    Auch das ist spannend!

    Es sollen immer alle verlinkten Artikel auf allen CMS-Seiten erfasst werden.

    CSS
    a[href^="/article/"] { color: #e65100 !important; }

    Wäre das so möglich?

    Dann wäre es m.M. nach domainunabhängig und betrifft alle Artikel?

    Oder Denkfehler?

    LG

    Edit: letzteres war Quatsch, habs probiert. gehen tut:

    CSS
    a[href^="https://www.diylab.de/article/"] {
        color: #e65100 !important;
    }

    Die 1- hab ich weggelassen, da ich glaube (noch nicht getestet), dass die 1 für den ersten Artikel steht ?! Hab momentan nur Einen :S .

    Jetzt bräuchte man Wildcards, um das Ding an die Domain festzunageln.

    Edited once, last by bruno.bap (April 26, 2021 at 11:47 PM).

  • Dann musst du ^ durch * ersetzen.

    ^ = Beginnt mit

    $ = Endet auf

    * = Enthält

    Ich würde es dennoch auf Domains beschränken, also z.B.

    Sass (SCSS)
    a[href^="https://www.diylab.de"],
    a[href^="https://www.softcreatr.com"] {
        &[href*="/article/"] {
            color: #e65100 !important;
        }
    }

    Ist ungetestet, sollte aber gehen.

    EDIT: Sollte * und nicht ~ lauten.

  • Dann musst du ^ durch * ersetzen.

    Jo -tut!

    CSS
    a[href*="/article/"] {
        color: #e65100 !important;
    }

    Warum würdest Du es auf die Domain(s) beschränken?

    Falls es externe Links auf Artikel gibt? In diesem Fall würde dann die .externalURL Klasse greifen, die schon existiert. Oder gibt es andere Gründe?

    Und noch eine letzte Frage, bevor ich recht befriedigt schlafan kann:

    Ist diese nun gut greifende Lösung des Filters kompatibel mit den gängigen Browsern oder doch lieber die Container selektieren wie WollZi es vorschlug?

    LG

  • Ist diese nun gut greifende Lösung des Filters kompatibel mit den gängigen Browsern

    Ja: https://caniuse.com/css-sel2

    Falls es externe Links auf Artikel gibt? In diesem Fall würde dann die .externalURL Klasse greifen, die schon existiert. Oder gibt es andere Gründe?

    Die Frage wäre eher, welche Gründe du hast, alle URLs, die /article/ beinhalten, gesondert zu markieren. Von deiner Begründung hängt die meinige ab :D

  • Die Frage wäre eher, welche Gründe du hast, alle URLs, die /article/ beinhalten, gesondert zu markieren. Von deiner Begründung hängt die meinige ab :D

    Naja, sagen wir mal so, ich habe 3 Stile und bei zwei davon sind alle Links deutlich zu sehen.

    Nur bei einem Stil von Gino sind die "normalen" Links farblich nicht hervorgehoben (externe schon).

    Stelle ich die normalen Links so ein, dass sie sichbar sind, dann sind auch alle Links des Forums hervorgehoben, das nun wiederum wil ich nicht ;) .

    Also dachte ich mir, ok der Rest ist nach meinem Geschmack, nur die WSA-Links halt nicht, also ändern ...

  • Moin,

    getestet, nun hatten alle Links die Farbe, auch im Forum.

    Ist ja auch logisch, mit not werden ja alle Links erwischt, bis auf die Externen.

    Also alles kein Problem, die Antwort aus #9 bringt ja genau das Ergebnis, dass ich mir wünsche :thumbup: .

    Sogleich als hilfreichste Antwort getaggt.

    Herzlichen Dank an alle Helfer :!:

  • Wo genau sollen die Links anders dargestellt werden...

    Ok, ich versuche es mal zu erklären ...

    Im Forum, sowie bei allen Menüeinträgen vom System selbst sollen keine Links hervorgehoben werden, so hier:

    Bei dem Footer (simpleFooter von Gino), sollen keine Links hervorgehoben werden:

    Wenn ich über den WYSIWYG-Editor einen Link einfüge, soll er hervorgehoben werden und bei externen Links das entspechende Symbol erhalten, genau so hier:

    Wenn ich in einer Seite einen WSA-Link einfüge, soll er hervorgehoben werden, genau so:

    LG und einen sonnigen Tag :)

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!