Adding inline styles from a widget

by

I’m working on a theme that has an optional widget to allow users to put some site elements where they want. One of those is a list of social media icons. These are font icons, so they can be styled with css to fit in the theme’s palette. However, the widget also gives the user te possibility to choose a different color and hover:color. There may be more than one instance of the same widget with different color options on a page.

To get these styles where I want them, I have two options, as far as I can see:

  1. Put them inline. I can put the color on the item itself, but the hover state needs to be in style-tags. This works fine, but doesn’t validate. (I could also attach the styles to two overlapping icons with different classes and have the upper one fade out on hover or store them in an invisible div and extract them with jquery – this would validate, but otherwise isn’t very appealing).

  2. Get them global by adding the widget-id to make them target the right icon. Since the head has been constructed by the time WP gets to the widgets, there is no using wp_add_inline_styles anymore. I could store the subsequent styles in a global array and use add_action to deliver them to the footer. I could probably get this working and validating, but it’s, well, pretty ugly.

Anyone got a better idea?

1 Answer
1

Got it. So here’s how you insert a hover state halfway the processing of a page without violating the w3c rules. This is the code you don’t want your widget to produce:

<div class="mywidget">
<style>.mywidget a {color:red}, . mywidget a:hover {color:blue;}</style>
<a>Link</a>
</div>

The following validates and is fairly elegant. In your widget generate the following code:

<div class="mywidget">
<a style="color:blue;"><span style="color:red;">Link</span></a>
</div>

In your style.css you add this generic line with a transition effect as bonus:

.mywidget a span {transition:color 1s;}
.mywidget a:hover span {color:inherit !important;}

Tested in Firefox 38, Chrome 34 and IE 11

Leave a Comment