Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1332977

    Hi,

    I would like to give the ability to end user to customize his general styling (Enfold Child Theme Options/predefined color scheme)

    I created a page just like your “General Styling” page with two parts :
    – first part (top) with a “Button Row” element into a section element (predefined color scheme)
    – second part (button) with a “Preview screen” displayed into a specific section element with colors depending on the button clicked by user

    I have two questions :
    – how to know which button in row user has clicked ?
    – how to refresh “preview section” without reload current page ?

    Many thanks for your help.

    Kind regards

    Jorge

    #1333047

    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

    #1333140

    Hi Ismael,

    I’m afraid my request was not so clear. Sorry for that.
    I can provide to you a link to my page but I think it is not necessary. Please just focus on followings questions (no matter the usage) :
    – how to know which “button in row” user has clicked ?
    – how to refresh “specific section” (based on ID section) without reloading page ?

    Could you please just give me some tricks (or specific hooks/code examples). I will handle development.

    Thanks again for your help.

    Kind regards

    Jorge

    #1333488

    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

    #1333836

    Hi Ismael,
    I would like to thank you for your feedback. I tried to implement your examples with no success. I check click event triggered by user on button row element but I’m not able to check the color button element clicked by user. Moreover, I do not understand why page is reloaded when I click on button row element (?)…
    Could you please have a look on my function called ‘ApplyColorScheme’ (line 232) into functions.php and tell me what is wrong ? I think I’m very close to the target.
    Thanks a lot
    Best regards
    Jorge

    • This reply was modified 3 years ago by liliwow.
    #1333991

    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

    #1334046

    Hi Ismael,
    First, Happy new year and all the best for you and the team.
    Thank you for your last answer which was very helpful. Therefore, change color is only applied on text element but not on Heading element. Change is only applied on first text element occurrence not for the others with same id (?).
    I have done some changes (same Id for each text element and for each heading element. Same issue, unfortunately.
    What’s wrong ?
    Thank for your help.
    Best regards
    Jorge

    #1334153

    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

    #1334998

    Hi Ismael,
    Ok. I fixed the issue by using class attribute and not tue ID attribute.
    Many thanks for your help.
    Please close this topic.
    Kind regards
    Jorge

    #1335026

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘General Styling Page for End Users’ is closed to new replies.