Site logo

Archived topic

Link Unterstreichung und Effekte mit CSS

7 replies · Started by Oliver on June 29, 2021

Viewing posts 1–8 of 8

Hallo zusammen,

ich habe mit dem Code

a:hover {text-decoration:underline}

den Effekt eingefügt, dass Links beim Mauskontakt unterstrichen werden.
Können sie einen gesamten Code nennen, den ich mit dem Plugin Code Snippet verwenden kann?

Derzeit funktioniert es nur, wenn ich es bei "Zusaätzliches CSS" einfüge. Ich möchte gerne alle Änderungen an einem zentralen Ort verwalten.

Gibt es eine Empfehlung, wie es für Barrierefreiheit optimal gestaltet wird? Das Ziel ist maximale Barrierefreiheit und möglichst leichtgewichtig aber auch gerne mit anderem Effekt oder Farbe.

Hi Oliver,

Code snippet plugin is for adding PHP code, it only reads PHP.

The code you are using is CSS code, and you are right, it should be added in customizer > additional CSS.

You can't avoid using both if you are using both codes.

Hi Ying,

aber warum gibt es bei dem Plugin dann CSS Beispiele, HTML Beispiele und noch weitere?
Ich denke schon, dass das Plugin verschiedene Codes verarbeiten kann.
Falls es einen angepassten CSS Baustein für das Plugin gibt, bin ich dir dankbar.
Ich kann aber auch mit der jetzigen Lösung leben.

Cheers

Hi Oliver,

You can place CSS on code snippets plugin IF you're hooking it using PHP AND IF you wrap it in <style> </style> and is outside of <?php ?> delimiter OR if you echo it as a string.

Example #1: echo style tag on <head>

add_action('wp_head',function(){
echo '<style>h1 { font-weight: 600; }</style>';
});

Example #2: wrapping in style tag outside of <?php ?> delimiter.

add_action( 'wp_head', function () { ?>
<style>
	h1 { font-weight: 600; }
</style>
<?php } );

Note: Both of these are unnecessary if you simply want to insert CSS w/o conditions. But if you want do play around w/ specific conditions, this will be real helpful. :)

Ich habe diesen Code als Snippet getestet und nicht die gewünschte Funktion erreicht.

`<?php

add_action( 'wp_head', function () { ?>
<style>

/a:hover {text-decoration:underline}
/

</style>
<?php } );

Ich werde den Code einfach bei "zusätzliches CSS" einfügen und fertig!

Hi Oliver,

Mind the stray /

This should work:

add_action( 'wp_head', function() {
echo = '<style> a:hover { text-decoration: underline; } </style>';
});

Note: The CSS may not apply if it's losing in precedence. Make sure to check if there's any use of !important or a styling with more specific selector. :D

Hi Elvin,

nein, es funktioniert nicht.
Wie schon gesagt, der code

a:hover {text-decoration:underline}

unter "zusätzliches CSS" scheint robust zu funktionieren.
Darauf kommt es an!

Danke für deinen unermüdlichen Einsatz.

No problem. :D

This archived topic is closed to new replies.