How do you add a sklls / ability / proficiency animated part to about page

[jaynkie]

Hello!

I’m trying to add the part under “What I can do” on this page:

About Me

Where it lists ‘photoshop’ etc. and has animated meter bars.

Where can I find out more about this widget? I’d love to add and style it!

Thanks!

// jayse

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Those are shortcodes, you can add them here:

Thanks

[jaynkie]

Thanks David! I figured I was just missing it!

How would I get the same style as http://joyn.swiftideas.com/pages/about-me/

I’ve tried all the types but they actually all seem to be the same? (standard, striped, striped animated – all look and animate?)

[Rui Guerreiro – SUPPORT]

Hi,

Here you have the entire shortcodes for that page.
http://pastie.org/private/ig0kx7tlg7gfwrlaqre4a

Copy them to the classic editor mode and then switch the Swift Page Builder mode.

Hope it helps.

-Rui

[jaynkie]

Thanks Rui! I think I might be missing it, but that appears to only change the color – but the style is the same.

[Kyle – SUPPORT]

Hi

Add this to your custom css

.progress-bar-wrap .progress .bar::after {
  display: none;
}
.progress-bar-wrap .progress {
  height: 5px;
}
.progress-bar-wrap .progress, .progress-bar-wrap .progress .bar {
  border-radius: 4px;
}

– Kyle

[jaynkie]

There we go! Thanks Kyle!

Only thing still missing is the gray bar beneath, which is really needed to give context IMO.

How do I get the gray bar?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Add this:

.progress-bar-wrap .progress {
  background-color: #efefef;
}

– Kyle

[jaynkie]

You ROCK Kyle – that’s perfect!

[Kyle – SUPPORT]

No problem!