[Support request] Change CSS based on custom field

[Annia]

Hi

My website is using a specific color as base for several elements (header text etc).. The color is also used in opacity for text fields and for several graphical elements.

I would like my WP users to select a color code of their choice, store it in a custom field and use that color code as base.

In the site CSS today I have, as an example, this piece of CSS:

.xxx span {
	color: #827834 !important;
}

I would like it to be:

.xxx span {
	color: $user_color !important;
}

I know how to collect, store and retrieve the user selected color code.
Is there a way to use that color code so that the user gets an interface with the color of their choice?

[Annia]

I trialed-and-errored myself to this code that I added to my plugin:

add_action('wp_head','hook_css');
function hook_css()
{
?> <!-- Closing the PHP here -->
    <style>
        .xxx span {
     color:<?php echo types_render_usermeta( "main-color", array( "user_current" => true ) ); ?> !important;
}
    </style>
<?php //Opening the PHP tag again
}

It is currently working, but I am wondering 😉

Is this bad? Can it be done better or optimized?

Thanks

[Leo]

Hi there,

Glad you found a solution!

I’m not seeing anything bad about the code 🙂

[Author]

Posts