Advice

  • Venutius

    #50127

    Hi there, I’m looking for a bit of guidance. I have on my list of nice to have features on where I’d be able to allow BuddyPress Users the ability to set the theme colours and fonts only on their own profile pages. I’m looking to maximise their profile page personalisation options.

    I’ve found and created plugins that allow them t set custom background images and headers, and this seems like the next step.

    If you were landed such a project, where would you start?

    Venutius

    #50131

    Hi there,

    I’ve been digging deeper and from what I can see I’d need to ask you to add filter hooks for the outputs of graphene_get_custom_colours() and graphene_get_custom_style().

    Would that be possible?

    Admin

    Syahir Hakim

    #50132

    There is already a filter before the output from custom styles and colours is minified and printed to wp_head:

    $style = apply_filters( 'graphene_custom_style', $style, $echo, $minify, $force_all );
    

    If you would like to customize the individual colours and styles, I would suggest to directly modify the $graphene_settings global variable itself. This is the variable that holds all of Graphene’s settings. The values in this variable is used by the functions you mentioned to generate the correct style code.

    Example:

    function custom_user_style(){
    	$user_id = get_current_user_id();
    	if ( ! $user_id ) return;
    
    	global $graphene_settings;
    	$user_settings = get_user_meta( $user_id, 'custom_graphene_settings', true );
    	$graphene_settings = array_merge( $graphene_settings, $user_settings );
    }
    add_action( 'template_redirect', 'custom_user_style' );
    

    Venutius

    #50136

    Thanks for the reply, yes I’ve been looking at $graphene_settings. I printed it off and am going through it. Seems like that would be much easier.

    Thanks to your suggestion I’ve actually gone quite a way with this, just need to get the color picker working.

    Venutius

    #50138

    Hi Sayahir,

    before I load my plugin I’d like to check if Graphene is active and is the current theme, I’ll need to load this sometime after graphene has loaded but before the page is published, would you know a suitable hook?

    Admin

    Syahir Hakim

    #50142

    You can use the graphene_setup action hook, which runs after the Graphene setup routine and only when Graphene is being used as the current theme.

    Venutius

    #50144

    Thanks Syahir I’ll do that it sounds perfect. My project is almost complete now, thanks to the simplicity of hooking into the Graphene settings. The most difficult bit was getting the colorpicker to work but I got there in the end. I’m hoping that this is the first of a few Graphene specific plugins I’ll be creating for BuddyPress. I’d like to do something for the members and groups directories next.

    Venutius

    #50153

    Hi there, I’ve almost completed my project. There’s just a couple of items that I could do with some help on:

    I’m setting up a js function to dynamically change the screen items as they are selected. It seems to me it’s exactly the same finctionality as is provided in Customizer, so you may be able to help.

    1. How to trigger my js code once a new color is selected from the color picker? I tried using a change event, but that does not trigger when the change is done via the color picker, I also tried the input event but had the same results, then I tried using mutation observer but again it did not trigger when the changes were made programmatically. I ended up using a jQuery blur event, but this only works when the user physically clicks on the input and then clicks away.

    2. How do you get js to change the link hover color? I know I can use code to change the color on mouseover but it seems to be this would be overkill for what I’m trying to acheive.

    Thanks

    Admin

    Syahir Hakim

    #50225

    1. How to trigger my js code once a new color is selected from the color picker?

    Colorpickers usually have their own event triggers when the selected color is changed. You can hook to these events. If you’re using the colorpicker that’s bundled with WordPress (it’s called Iris), you can use the change callback to include the function that updates the preview. Here is the documentation for that: http://automattic.github.io/Iris/#change

    2. How do you get js to change the link hover color? I know I can use code to change the color on mouseover but it seems to be this would be overkill for what I’m trying to acheive.

    You can’t. The way Graphene does it is to actually add custom CSS to the page’s head that overrides any existing hover style. See below for an example of how this is implemented in Graphene.

    /* Add a custom style element to add our styling */
    $('head').append('<style type="text/css" id="graphene-preview-css"></style>');
    
    /* Add CSS codes to the custom style element */
    $('#graphene-preview-css').append('a:focus, a:hover, .post-nav-top a:hover {color: ' + to + '}');
    

    Venutius

    #50228

    Thanks for the reply, I actually tried using change and it didn’t work, maybe it’s something to do with my code? The workaround I came up with was to change the input type to color and trigger on input, that worked though obviously not for all browsers, I’m using the iris color picker as a fallback but still have the change issue. I’ll try tweaking my code to fix that.

    Regarding the link hover, yes, I implemented code to change the class of the link and pull in the updated color.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.