Support » Allgemeine Fragen » Umrandungen mit gepunkteter Linie im Header

  • Gelöst cocosgalant

    (@cocosgalant)


    Hallo liebe Community,

    ich komme hier nicht weiter, ich habe immer nach dem Klick auf ein Menü-Item eine gepunktete Linie (beim Klick aufs Logo ist es rot und beim Menü ist es dunkelblau) und möchte die aus Designgründen gerne weg haben. Leider finde ich den passenden Selektor nicht. Die Seite nutzt das Meraki-Theme.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Anonymous User 20597857

    (@anonymized-20597857)

    Wie das CSS (anhand der Angabe „var“) besagt, sollte es im Theme (oder doch nicht? *) einstellbar sein:

    a:where(:not(.wp-element-button)) {
        color: var(--wp--preset--color--custom-rot);
        text-decoration: underline;
    }

    Als Color wird auch ein Rotton angezeigt, konkret #da0303.

    Wenn das nicht per Option geht, könnte man den Code ja ins benutzerdefinierte CSS tun und hier statt der Farbe ein „transparent“ setzen und wenn nötig, ein „!Important“ dazu.

    *) Nachtrag
    Wie es scheint, könnte das (auch oder nur) mit einem Gutenberg Button Stil zusammenhängen (ich habe alles auf Classic, kenne den daher nicht)
    Aber Funde wie https://stackoverflow.com/questions/75978701/remove-wordpress-gutenberg-button-default-styles oder https://wordpress.org/support/topic/wordpress-6-1-update-forces-underline-on-links/ weisen auf das hin.
    Ich suchte da weiter, weil im Code wp--preset stand. Was eben auf eine WP Sache schließen lässt.

    Doch wie auch beim Astra Theme könnte ein CSS, ähnlich wie dort beschrieben helfen.

    • Diese Antwort wurde geändert vor 6 Monaten, 1 Woche von Anonymous User 20597857. Grund: Nachtrag

    Hallo,
    du hast das Plugin „Gutenberg“ installiert.
    Das Plugin „Gutenberg“ solltest du nicht installieren. Leider gibt es allgemein ein wenig Verwirrung: In der Regel wird der Block-Editor auch als Gutenberg bezeichnet. Das ist so nicht korrekt, weil es zusätzlich ein Gutenberg-Plugin gibt. Dieses Plugin bietet bestimmte Funktionen an, die man als experimentell betrachten kann. Daher sollte man das Plugin nicht auf Produktivseiten einsetzen. Der Block-Editor ist dagegen der Standard-Editor von WordPress und steht ab der Version 5.0 automatisch als Editor zur Verfügung. Das war nicht immer klar und (nicht nur) deswegen gibt es so viele negative Bewertungen für das Gutenberg-Plugin.
    Deaktiviere doch bitte das Plugin „Gutenberg“ und teste dann, ob das Problem erledigt ist.

    Viele Grüße
    Hans-Gerd

    Thread-Starter cocosgalant

    (@cocosgalant)

    Danke für euren Input, ich habe das Gutenberg Plugin deaktiviert, Cache im Browser geleert und es versucht, allerdings keine Besserung.

    Wenn ich den Code von kurapika anwende, ändert er mir alle Links auf der Seite in transparent und überschreibt die globalen Styles.

    Habt ihr andere Alternativen?

    Um Webseiten barrierefrei zu machen, gibt es eine „Web Accessibility Initiative“, die Web Content Accessibility Guidelines (WCAG) herausgegeben hat. Diese Richtlinien haben einen Punkt „Focus Visible: Jede über die Tastatur bedienbare Benutzeroberfläche verfügt über einen Betriebsmodus, in dem die Tastaturfokusanzeige sichtbar ist.“ Für die Navigation bedeutet dies, das bei Aktivieren des Links eine gestrichelte Umrandung angezeigt wird. Das Theme folgt also den Vorgaben zur Barrierefreiheit.

    Wenn dir egal ist, ob deine Website barrierefrei ist, kannst du mit einer eigenen CSS-Regel die Markierung dauerhaft entfernen:

    a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
      outline: none;
    }
    

    Die CSS-Regel trägst du im Customizer unter „Zusätzliches CSS“ ein.

    Übrigens: Ab Mitte 2025 gilt für Websites und Apps eine gesetzliche Pflicht zur Barrierefreiheit. Diese regelt das Barrierefreiheitsstärkungsgesetz (BFSG).

    Anonymous User 20597857

    (@anonymized-20597857)

    Ab Mitte 2025 gilt für Websites und Apps eine gesetzliche Pflicht zur Barrierefreiheit.

    Echt jetzt?

    Ich dachte natürlich daran, wolle aber keinen mit diesen Richtlinien verunsichern.
    Habe deswegen auch keinen vollständigen Code erstellt, sondern nur den Hinweis, eine Spur gelegt, warum sich das so verhält.

    Thread-Starter cocosgalant

    (@cocosgalant)

    Danke für eure Hilfe, mir ist WCG bekannt, doch 2025 ist a) noch ein bisschen hin und b) möchte ich es gern verstehen, wieso ich es nicht hinbekomme. Mit deinem Code klappt’s auch nicht.

    a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus { outline: none; }

    • Diese Antwort wurde geändert vor 6 Monaten von cocosgalant.
    Anonymous User 20597857

    (@anonymized-20597857)

    Wie gesagt, wenn nötig, ein „!Important“ dazu.

    Also
    a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus { outline: none !important; }

    Hab den Code nicht gecheckt, keine Ahnung, ob der überhaupt genau das tut, was du willst.
    Aber wenn ein ansonsten passender CSS Code nicht funkt, kann man sich eben mit dem Zusatz helfen.
    Wenn es damit geht, kann man immer noch tiefer graben und versuchen, das Ziel-Element noch genauer zu spezifizieren, um ohne das wenig elegante „!important“ auszukommen.

    Thread-Starter cocosgalant

    (@cocosgalant)

    Danke, das hatte ich auch davor, allerdings vergessen, den Cache zu leeren. Jetzt hat es funktioniert. Merci!

    Moderator Bego Mario Garde

    (@pixolin)

    … mir ist WCG bekannt, doch 2025 ist noch ein bisschen hin …

    Man muss nicht erst auf die Einführung eines Gesetztes warten, um Webseiten barrierefrei zu machen.

    Mit deinem Code klappt’s auch nicht.

    An der richtigen Stelle eingefügt sollte das so wie angegeben klappen – ohne das unschöne !important. Natürlich musst du dann erst noch den Cache leeren.

    Anonymous User 20597857

    (@anonymized-20597857)

    @cocosgalant super!
    Aber behalte die Hinweise bez. Barrierefreiheit irgendwo.
    Denn eines Tages wird darum auch so ein Wahn herrschen, wie anno domini wegen Impressumspflicht, TKG, dann Cookiebanner, Datenschutzerklärung, Google Fonts usw.

    Man muss nicht erst auf die Einführung eines Gesetztes warten, um Webseiten barrierefrei zu machen.

    An der Stelle fällt mir immer eine lange zurückliegende Geschichte ein: Von gesetzlich vorgeschriebener Barrierefreiheit in den beginnenden 2000er Jahren in AT und wie man die wieder abschaffte, bevor sich auch ein zweiter Mensch (außer mir) darum kümmerte …

    Aber das ist hier OT und ich erzähle die nur, wenn ihr mich dazu aufmuntert 😉
    Nur danach wird jedem klar sein, warum ich Schnappatmung kriege, wenn ich vom neuen Gesetz für alle lese.

    Moderator Angelika Reisiger

    (@la-geek)

    Um einmal die hier aufkommende Panik zu eliminieren:

    Nicht jede Website muss aufgrund des Barrierefreiheitsstärkungsgesetzes ab Juni 2025 barrierefrei gestaltet sein.

    Einfach einmal lesen:

    https://www.ihk-muenchen.de/de/Service/Recht-und-Steuern/Werbung-Fairer-Wettbewerb/barrierefreiheitsstaerkungsgesetz/

    https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/gesetze-und-richtlinien/barrierefreiheitsstaerkungsgesetz/barrierefreiheitsstaerkungsgesetz-node.html

    Im Zweifelsfall rechtzeitig bei z. B. der IHK nachfragen oder einen sachkundigen Rechtsberater konsultieren.

    Anonymous User 20597857

    (@anonymized-20597857)

    1000 THX, @la-geek !
    Dann werde ich mal unsere WKO dahingehende konsultieren, ob es bei uns in Absurdistan *.AT auch so Ausnahmen gibt!

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „Umrandungen mit gepunkteter Linie im Header“ ist für neue Antworten geschlossen.