[Robert CParticipant]

Hi. I’d like to be able to alter the style of the std skillbar style –

1. Flat and square form, ie no highlight, shadow etc.
2. Size
3. Text size and font inside – font doesn’t follow any site style set.
4. Remove the transparent black box ‘contrast helper’ under the type.
5. Turn on, or off, percentages in the text – I could put this in the text itself of course, just asking, the others are most important.

It’s a really cool and simple device by the way…just need to be able to get into the detail! 🙂

[ChristopherModerator]

Hi there,

1) Add the following CSS codes under Customize ->Custom -> CSS

.x-skill-bar,.x-skill-bar .bar {
  border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
  box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

2) You can set width for skillbar:

.x-skill-bar{
width:60%;/*You can change it to any percentage you like*/
height:30px;
}

3) Changing font size:

.x-skill-bar .bar .percent{
font-size:15px;
font-family:arial;
}

4) Rewove text shadow:

.x-skill-bar .bar .percent{
text-shadow:none;
-moz-text-shadow:none;
-webkit-text-shadow:none;
}

5) there are options for percentage and bar text as you create a skillbar

Hope it helps.

[Robert CParticipant]

Hi. I used the codes you supplied and every thing worked, thanks, except the removal of the dark ‘contrast help’ box under the text. It sizes to fit the text, and looks like it is a percentage alpha of black that sits inside the skill bar. How can I remove that?

[Paul RModerator]

Hi Robert,

I am not sure what you are referring to.
Can you provide us a screenshot and your site url.

Thanks

[Robert CParticipant]

Hi. Here is the imgur url

I want to remove the dark box area under the text inside the skill box.

[CousettMember]

Could you provide us with the URL of the page where the skill bar shows up so we can see what specific CSS you might need.
Thanks!

[Robert CParticipant]

Sorry I can’t as it’s a local dev site.

If you can see the dark rounded box areas under the white text, that’s the bit I want to disable. I’m not setting anything myself, this is purely from the shortcode with nothing added, so it is being self generated.

[ZeshanMember]

Hi Robert,

Thank you for writing in!

You can try using the following CSS code under Custom > CSS in the Customizer:

.x-skill-bar .bar .percent {
   background: none;
   border-radius: 0;
}

Hope this helps. 🙂

Thank you.

[Robert CParticipant]

Yep that’s it – 2 out of 2 for the support guys today – thanks.

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[sndesignParticipant]

Was helpful – thank you!

[RadModerator]

You’re welcome!

[Author]

Posts