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:
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
divand extract them with jquery - this would validate, but otherwise isn't very appealing).
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_stylesanymore. I could store the subsequent styles in a global array and use
add_actionto deliver them to the footer. I could probably get this working and validating, but it's, well, pretty ugly.
Anyone got a better idea?