Support » Allgemeine Fragen » LINK nicht unterschreichen in Elementor
LINK nicht unterschreichen in Elementor
-
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
ThomasDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
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-
Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von
Bego Mario Garde.
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 Versiontheme.min.css
enthält die Regel gleich zum Anfang).WOW super es funktioniert!!! Einfach grossartig
Herzlichen DANK lieber Bego Mario Garde
-
Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von
- Das Thema „LINK nicht unterschreichen in Elementor“ ist für neue Antworten geschlossen.