Colors Circle Skills

Hi, also looking to change the SKILLS area circle colors, (About Us Section).

I 1st downloaded a zip file of the theme to my computer, I searched for the file: zerif.js tucked in these folders:

wp-content > themes > zerif -lite > js (Thank you IsmaHaro)

In the zerif.js file under:

/* ================================

=== KNOB ====

================================= */

…I ONLY changed the four lines of
‘fgColor’:

to the # colors I need, (using TextEdit, not the plugin as recommended by Alexandra)
& left ALL the rest of the code untouched on this dup file.

I already had created a child theme, (but with only the style.css) so next I uploaded the NEW zerif.js file, with the NEW colors to the zerif-lite-child folder via Cyber Duck & also …NOTHING!? Still NO change in colors to those rings?! :'(

(I also will add the big_title.php to the child theme, need to add a RESPONSIVE/mobile friendly video on the top section too.)

Ugh, I’ve been pulling my hair out trying to change these 4 rings of color, what am I doing wrong? Do I need to cut & paste a line of code that says please, PLEASE follow these child theme files??? Do I need to change something in the CSS as well?

Sigh! Also a (none coding, no programing knowledge) newbie… Thank you for your help!

CC2,

If fixed it using a plugin. Create a new folder in your plugins folder and add the following PHP code in the main plugin file:

<?php
/*
Plugin Name: Skill knob colors
Description: This plugin loads the script that
Version:     0.1
Author:      Sjors Hijgenaar
*/
function add_scripts(){
    wp_enqueue_script('skill-circle-script', plugin_dir_url(__FILE__) . 'js/skill-circles.js', array('jquery'));
}
add_action('wp_enqueue_scripts','add_scripts');

In a sub directory called “js” create a file called “skill-circles.js” with the following code:

jQuery(document).ready(function(){
   jQuery(".skill1").knob({

        'max':100,

        'width': 64,

        'readOnly':true,

        'inputColor':' #FFFFFF ',

        'bgColor':' #222222 ',

        'fgColor':' #e96656 '

    });

    jQuery(".skill2").knob({

        'max':100,

        'width': 64,

        'readOnly':true,

        'inputColor':' #FFFFFF ',

        'bgColor':' #222222 ',

        'fgColor':' #ffd923 '

    });

    jQuery(".skill3").knob({

        'max': 100,

        'width': 64,

        'readOnly': true,

        'inputColor':' #FFFFFF ',

        'bgColor':' #222222 ',

        'fgColor':' #e96656 '

    });

    jQuery(".skill4").knob({

        'max': 100,

        'width': 64,

        'readOnly': true,

        'inputColor':' #FFFFFF ',

        'bgColor':' #222222 ',

        'fgColor':' #ffd923 '

    });
});

Here you can change the fgColor properties to anything you want and it should change on your website, whilst retaining updateability

Thank you for your reply & help, SjorsHijgenaar.

Sorry, first let me reiterate I’ve NO programing knowledge, but I can cut & paste ??

That said the thought of MYSELF ‘Creating a Plugin’ was a bit daunting.

So for anyone else out there, basically here’s what I did.

ON my computer:
? I created a folder called: “Skill knob colors”

IN this folder:
? I created a TextEdit (on a Mac) file called: “skill-knob-colors.php”
? I Cut & Paste SjorsHijgenaar’s top section of code (I believe this is HIS plugin creation, though being new even to WordPress I’m not absolutely sure of that, but I think it is.)

NEXT in this folder I created another folder called: “js” (for java script I expect)

IN this folder:
? I created a TextEdit file called: “skill-circles.js”
? I again Cut & Paste SjorsHijgenaar’s second section of code but changed the colors to what I selected for fgColor

Then I up loaded the folder called “Skill knob colors”, to the plugin folder on my site’s folders in the cPanel via CyberDuck (FTP software)

Next I went to Dashboard on the Admin of the site > to Plugins > to the brand NEW plugin in the list “Skill knob colors”, I activated the NEW plugin & at first I did get this message:

“No such file exists! Double check the name and try again.”

But I hit refresh & THIS FINALLY WORKED! Whew! Thank you very much SjorsHijgenaar!

Hope this may help anyone else looking to do this color change too.

??

Thanks SjorsHijgenaar for your help. I really appreciate it. You are a life saver!!
Thanks cc2 for this question and descriptive last comment.

you guys made my day!!!

please how can i make the skill section horizontal please