Support » Plugin: Kirki » pattern_replace Assistance

  • Resolved Thomas

    (@tsquez)



    Hi there,

    So I find myself in need of your assistance once again and I hope this is an easy one. For me it’s got me like “WTF”…lol.

    Anywho, its about using pattern_replace and I have read over your documentation on it and I can’t seem to get it to work. Unfortunately I got frustrated, deleted my code and walked away…lol. This was yesterday. So I thought I would come over and ask.

    I am trying to add color controls for a off canvas menu hamburger icon. If you look at this site in mobile view you will get what I am talking about: https://themeawesome.com/themes/wpforge/

    Now it has css like this:

    .menu-icon::after {
        background: #fefefe;
        box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    }

    SO I would like to give the user the ability to change the color of the hamburger icon to whatever they wish and I believe the pattern_replace is the way to go.

    I just can’t seem to wrap my head around it. Could you possibly help and show me what I may need to do?

    Any help is greatly appreciated. Thanks in advance.

Viewing 4 replies - 1 through 4 (of 4 total)
  • pattern_replace is useful when building complex CSS that depends on more than 1 settings.
    In your case since you only want this to depend on a single control, you can use value_pattern:

    
    'output' => array(
    	array(
    		'element'  => '.menu-icon::after',
    		'property' => 'background',
    	),
    	array(
    		'element'       => '.menu-icon::after',
    		'property'      => 'box-shadow',
    		'value_pattern' => '0 7px 0 $, 0 14px 0 $'
    	),
    ),
    

    pattern_replace would be useful if for example you had 2 controls and you wanted to create a gradient from one value to the other, for example something like
    background: linear-gradient($value1, $value2);
    In your case it’s not necessary 🙂

    Ah OK I see what your saying. Makes sense.

    I will give it a try and see what happens. I’ll stop back in and let yah know how it goes.

    Thanks again for the help.

    Just wanted to stop back by and let yah know it worked perfectly.

    The cool thing is that I understand what the code is doing, which is pretty neat.

    Thanks again for taking the time to assist and for the awesome plugin 😉

    Glad I could help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.