Sydney FP: Skills How do I change the number value from percentage?

I want to show different values other than percentages. Specifically, for now, I want to show years. How can I change these values?

Hello there,

If you use Elementor builder, add a custom class name to the skill widget. The class name option is in the Advanced group.

27

To change the default value which presents with a percentage, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

       'use strict'

       if( $('.my-skill-1 .elementor-progress-percentage').length ) {
         $('.my-skill-1 .elementor-progress-percentage').text('75');
       }

    })(jQuery);
  1. Update

Regards,
Kharis

Kharis,

I do not use Elementor. What do you suggest if I do not use it?

Hello there,

Do you have a link to a page to share here? Maybe we could use specific selector depending on your setup.

Regards,
Kharis

Kharis,

The link is Nomadicatheart.org

Hi Kharis,

Was wondering if you have any update on fixing the percentage?

Hello there,

I am sorry for the delay. Try doing the below steps, please.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      'use strict'

      $('.widget_sydney_skills .roll-progress:nth-of-type(1) .perc').text('85');
      $('.widget_sydney_skills .roll-progress:nth-of-type(2) .perc').text('75');
      $('.widget_sydney_skills .roll-progress:nth-of-type(3) .perc').text('70');
      $('.widget_sydney_skills .roll-progress:nth-of-type(4) .perc').text('100');


    })(jQuery);
  1. Update

.roll-progress:nth-of-type(1) means the first row.

Regards,
Kharis

Kharis,

Thanks for the reply.

Can you please explain further on what in the code I am supposed to change in order for there to be text instead of percentages?

I’ve tried a few things, but have failed to get it right.

Hello there,

I visited your site and seems like the code is already working.

23

Probably your web browser cached older version of your site that resulting the new code addition won’t be recognised. Please clear/flush your web browser’s history/cache.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Kharis,

Yes! It was only changing some of them, not all. After about 30 minutes, all of them changed. It was just taking a while.

THANK YOU!

How do I add additional rows?

You’re welcome!

Nothing special. Just like what you did before. To target the fifth row’s value, add

     $('.widget_sydney_skills .roll-progress:nth-of-type(5) .perc').text('97');

So the complete code would look like this:

    ;(function($) {

      'use strict'

      $('.widget_sydney_skills .roll-progress:nth-of-type(1) .perc').text('85');
      $('.widget_sydney_skills .roll-progress:nth-of-type(2) .perc').text('75');
      $('.widget_sydney_skills .roll-progress:nth-of-type(3) .perc').text('70');
      $('.widget_sydney_skills .roll-progress:nth-of-type(4) .perc').text('100');
      $('.widget_sydney_skills .roll-progress:nth-of-type(5) .perc').text('97');


    })(jQuery);

Regards,
Kharis