General Styling Page for End Users

Hey Jorge,

Thank you for the inquiry.

Would you mind providing a link to the page where you are currently testing this option? It sounds like you are trying to allow your users to customize the site in the frontend. Creating that option or feature will require significant amount of modification and is beyond the scope of support. You may need to contact or hire a third party developer to build the option.

Best regards,
Ismael

Hi,

If you are going to use jQuery, the following functions might help.

// https://api.jquery.com/click/
// https://api.jquery.com/is/

You can check if the clicked element contains a certain class name or ID using the is function above. Unfortunately, we are not sure what you are trying to do with the color section or what you actually mean by refreshing it.

Best regards,
Ismael

Hi,

Thank you for the update.

We adjusted the script in the functions.php file a bit. What we did is check for the text inside the clicked button and apply the corresponding color to the text within the target section. The modified script is below.

/****************************
* Apply Color Scheme
*****************************/

function apply_color_scheme() {

	?>
	<script>
	(function($) {	
		$( '#button-row a' ).on( "click", function(e) {
			e.preventDefault();
			
			var color = $(this).find(".avia_iconbox_title").text();
			var c = "white";

			switch (color) {
				case "Blanc":
					c = "white";
					break;

				case "Bleu":
					c = "blue";
					break;

				case "Rouge":
					c = "red";
					break;

				case "Vert":
					c = "green";
					break;			
				default:
					break;
			}

			$( '#my-selection' ).css( "color", c );
			$( '#my-color' ).css( "color", c );
		});
	})(jQuery);
	</script>
	<?php

}

add_action('wp_footer', 'apply_color_scheme');

Best regards,
Ismael

Hi,

Happy new year!

Did you adjust the selector here?

$( '#my-selection' ).css( "color", c );
$( '#my-color' ).css( "color", c );

You may need to target the heading tag directly.

#heading-color h4

If you want to apply the changes to multiple elements, make sure to use the class attribute or name and not the ID attribute. An ID should be unique and should be only applied to a single element.

Example:

$( '.change_this_element' ).css( "color", c );

Best regards,
Ismael

Hi,

Great, I’m glad that you got things working, and thanks for the update. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard