Support » Allgemeine Fragen » LINK nicht unterschreichen in Elementor

  • Gelöst thomaslauber

    (@thomaslauber)


    Hallo

    seit dem neusten WP update, 25. Jan. 2022 habe folgendes Problem.
    VORAG:ich arbeite mit dem Theme Elementor, und mit Elementor Website builder.

    Seit dem erwähnen WP update, werden die LINKS im Elementor Website builder unterstrichen? Das sieht schlecht aus.

    FRAGE, wie kann ich das Unterstreichen verhindern?

    Freue mich auf EURE Ratschläge. Voraus besten Dank für die Hilfe.

    Danke und sonnige Grüsss
    Thomas

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

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Vorab: Bitte wende dich bei Fragen zu Elementor Pro an die Entwickler. Bei gekauften Plugins können wir nicht weiterhelfen, weil sie uns für kostenlosen Support hier nicht zur Verfügung gestellt werden.

    Eine Unterstreichung von Links ist grundsätzlich richtig, weil sonst Menschen mit Farbenblindheit oder anderen Sehbeeinträchtigungen Links nicht von normalem Text unterscheiden können (vgl. https://www.w3.org/TR/WCAG20-TECHS/F73.html) In deiner Website wird das noch schwieriger, weil sich Links ohne Mauszeigerkontakt nicht einmal farblich vom Fließtext unterscheiden.

    Dein Theme Hello Elementor enthält (wohl deshalb) in der aktuellen Version eine CSS-Regel zur Unterstreichung von Links im Inhalt:

    .comments-area a, .page-content a {
      text-decoration: underline;
    }

    Möchtest du das so nicht, kannst du im Customizer unter Zusätzliches CSS folgendes eintragen:

    .comments-area a, .page-content a {
      text-decoration: none;
    }


    Nachtrag: wie vermutet ging es um die Frage der Barrierefreiheit: https://themes.trac.wordpress.org/ticket/109970#comment:2

    Thread-Starter thomaslauber

    (@thomaslauber)

    Vielen DANK Bego Mario Garde

    ich verstehe, dass Problem ist nicht von WP, SORRY.

    Nun habe ich verstanden das ich die Einstellung im Hello Elementor: Stylesheet vornehmen muss. Leider finde ich im Stylesheet folgendes nicht:
    .comments-area a, .page-content a {
    text-decoration: underline;
    }

    Ich bin DIR sehr DANKBAR, könntest Du mir -als Anfänger- bitte trotzdem sagen, wo im CSS ist dieses Kommando? Hierunter Kopie vom CSS:

    /*
    	Theme Name: Hello Elementor
    	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
    	Description: A plain-vanilla & lightweight theme for Elementor page builder
    	Author: Elementor Team
    	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
    	Version: 2.5.0
    	Stable tag: 2.5.0
    	Requires at least: 4.7
    	Tested up to: 5.9
    	Requires PHP: 5.6
    	License: GNU General Public License v3 or later.
    	License URI: https://www.gnu.org/licenses/gpl-3.0.html
    	Text Domain: hello-elementor
    	Tags: flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
    */
    /**
     * DO NOT CHANGE THIS FILE!
     * To override any of the settings in this section, add your styling code in the custom directory.
     * Loading first in the style.scss & classic-editor.scss
     */
    /*
     * Inspired by Normalize.css, HTML5 Boilerplate & Bootstrap Reboot Projects under MIT License
    */
    /**
     * Document basic styling
     * DO NOT CHANGE THIS FILE!
     * To override any of the settings in this section, add your styling code in the custom directory.
     */
    /**
     * 1. Correct the line height in all browsers.
     * 2. Prevent adjustments of font size after orientation changes in iOS.
     * 3. Change from <code>box-sizing: content-box</code> so that <code>width</code> is not affected by <code>padding</code> or <code>border</code>.
     */
    html {
      line-height: 1.15;
      /* 1 */
      -webkit-text-size-adjust: 100%;
      /* 2 */ }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      /* 3 */ }
    
    /* Sections
     */
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #333333;
      background-color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    
    /**
     * Correct the font size and margin on <code>h1</code> elements within <code>section</code> and
     * <code>article</code> contexts in Chrome, Firefox, and Safari.
     */
    h1, h2, h3, h4, h5, h6 {
      margin-top: .5rem;
      margin-bottom: 1rem;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.2;
      color: inherit; }
    
    h1 {
      font-size: 2.5rem; }
    
    h2 {
      font-size: 2rem; }
    
    h3 {
      font-size: 1.75rem; }
    
    h4 {
      font-size: 1.5rem; }
    
    h5 {
      font-size: 1.25rem; }
    
    h6 {
      font-size: 1rem; }
    
    p {
      margin-top: 0;
      margin-bottom: .9rem; }
    
    /* Grouping content
     */
    /**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */
    hr {
      box-sizing: content-box;
      /* 1 */
      height: 0;
      /* 1 */
      overflow: visible;
      /* 2 */ }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd <code>em</code> font sizing in all browsers.
     */
    pre {
      font-family: monospace, monospace;
      /* 1 */
      font-size: 1em;
      /* 2 */
      white-space: pre-wrap; }
    
    /* Text-level semantics
     */
    a {
      background-color: transparent;
      text-decoration: none;
      color: #CC3366; }
      a:hover, a:active {
        color: #333366; }
      a:not([href]):not([tabindex]) {
        color: inherit;
        text-decoration: none; }
      a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
        color: inherit;
        text-decoration: none; }
      a:not([href]):not([tabindex]):focus {
        outline: 0; }
    
    /**
     * 1. Remove the bottom border in Chrome 57-
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */
    abbr[title] {
      border-bottom: none;
      /* 1 */
      text-decoration: underline dotted;
      /* 2 */ }
    
    /**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */
    b,
    strong {
      font-weight: bolder; }
    
    /**
     * 1. Correct the inheritance and scaling of font size in all browsers.
     * 2. Correct the odd <code>em</code> font sizing in all browsers.
     */
    code,
    kbd,
    samp {
      font-family: monospace, monospace;
      /* 1 */
      font-size: 1em;
      /* 2 */ }
    
    /**
     * Add the correct font size in all browsers.
     */
    small {
      font-size: 80%; }
    
    /**
     * Prevent <code>sub</code> and <code>sup</code> elements from affecting the line height in
     * all browsers.
     */
    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline; }
    
    sub {
      bottom: -0.25em; }
    
    sup {
      top: -0.5em; }
    
    /* Embedded content
     */
    /**
     * Remove the border on images inside links in IE 10.
     */
    img {
      border-style: none;
      height: auto;
      max-width: 100%; }
    
    /* Interactive
     */
    /*
     * Add the correct display in Edge, IE 10+, and Firefox.
     */
    details {
      display: block; }
    
    /*
     * Add the correct display in all browsers.
     */
    summary {
      display: list-item; }
    
    figcaption {
      font-size: 16px;
      color: #333333;
      line-height: 1.4;
      font-style: italic;
      font-weight: 400; }
    
    /* Misc
     */
    /**
     * Add the correct display in IE 10+.
     */
    template {
      display: none; }
    
    /**
     * Add the correct display in IE 10.
     */
    [hidden] {
      display: none; }
    
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0; }
    
    /* Print
     */
    @media print {
      *,
      *:before,
      *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important; }
      a,
      a:visited {
        text-decoration: underline; }
      a[href]:after {
        content: " (" attr(href) ")"; }
      abbr[title]:after {
        content: " (" attr(title) ")"; }
      a[href^="#"]:after,
      a[href^="javascript:"]:after {
        content: ""; }
      pre {
        white-space: pre-wrap !important; }
      pre,
      blockquote {
        page-break-inside: avoid;
        border: 1px solid #cccccc; }
      thead {
        display: table-header-group; }
      tr,
      img {
        page-break-inside: avoid; }
      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3; }
      h2,
      h3 {
        page-break-after: avoid; } }
    
    /**
     * Form styling

    Wenn du eine Änderung im Theme vornimmst, wird das beim nächsten Update überschrieben und du fängst wieder von vorne an. Deshalb hatte ich vorgeschlagen, die CSS-Regel in Design > Customizer > Zusätzliches CSS einzutragen. Dort gibt es ein Eingabefeld und was du dort einträgst, bleibt trotz Update von Theme, Plugins und Core erhalten.

    Die CSS-Regel des Themes steht in der Datei theme.css in Zeile 11 (die minimierte Version theme.min.css enthält die Regel gleich zum Anfang).

    Thread-Starter thomaslauber

    (@thomaslauber)

    WOW super es funktioniert!!! Einfach grossartig

    Herzlichen DANK lieber Bego Mario Garde

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „LINK nicht unterschreichen in Elementor“ ist für neue Antworten geschlossen.