Notorious Notorious - 2 months ago 18
Javascript Question

Dynamic CSS with PHP - Wordpress & Visual Composer Buttons

I am creating a custom Visual Composer (WordPress plugin) element for buttons within my WordPress theme.

I have created colorpicker fields so that a user can change the background color / text color / background hover color / text hover color, etc.

Now the problem I am facing, is how on earth do I get a user's selection for say "a button's hover color" to update the CSS.

I understand that if I have a color in a variable I can do this:

<div style="background: <?php echo $users_bg_color ?>">


But how would I achieve this for :hover & :active fields. I obviously can't do this with inline styles, so do I need to update a CSS field dynamically? How should I do this? Or is there another, better alternative?

Teach me how to be a "big-boy" WordPress developer - please ._.

If someone can point me in the right direction, because I am baffled, I will be eternally grateful.

Thank-you

Answer

I might be thinking incorrectly here, but are you wondering how, once a user selects hover, active, etc, how to actually make that change appear on the site? If you mean instead that you'd like those changes to appear INSTANTLY as you select the color, then the commentors above are right -- that'd be some javascript. Otherwise, you could do something like this.. This is the method a lot of themes use, for better or worse:

In your theme's header.php, create a block of code like this:

<style>
  .button{background-color: <?php echo get_field('button_bg_color'); }
  .button:hover{background-color: <?php echo get_field('button_bg_hover_color'); 
  .button:active{background-color: <?php echo get_field('button_bg_active_color'); }
</style>

And so on.. And the actual function "get_field" is probably wrong, as that's what ACF uses, but you could plop in whatever function you've written that gets the values from your page builder.