Archived topic

Change CSS based on custom field

2 replies · Started by Annia on October 8, 2018

Viewing posts 1–3 of 3

October 8, 2018 at 5:51 am #696060

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?

October 8, 2018 at 7:05 am #696108

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

October 8, 2018 at 9:26 am #696315

Hi there,

Glad you found a solution!

I'm not seeing anything bad about the code :)

This archived topic is closed to new replies.

Start building better websites today.