Docs

[elise83]

Hi,

I’m using WP 4.4.1.

I tried to change the size and font of my skill bars. Being a beginner in CSS, I tried something but it didn’t work…

.h-skill-bar {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 18px;
border: none;
}

Let me know the right CSS short code!

Thanks!

[Friech]

Hi There,

Thanks for writing in! Add a body to the selector of your custom css

e.g.

body .h-skill-bar {
	font-size: 18px;
	font-family: lato;
}

If this didn’t work, please provide us the site URL.

Hope it helps, Cheers!

[elise83]

Thanks for your answer 🙂

I would like to
1) change the text in small caps
2) Increase size of percentage.

What should I add to this CSS?

body .h-skill-bar {
color: #231F20;
font-family: Lato, Sans-serif;
font-size: 18px;
border: none;
}

Thanks!

[Darshana]

Hi there,

To increase the size of percentage, you can use the following CSS rule.

.x-skill-bar {
    height: 30px;
}

To change the font size, you can use the following CSS.

.h-skill-bar {
    font-size: 18px;
}

Hope that helps.

[elise83]

Hi, the two of them don’t work.

1)
.x-skill-bar {
height: 30px;
}
This increases the size of the bar itself and not the percentage. What I want is to increase the size of the text, i.e. ”50%’.

2)
.h-skill-bar {
font-size: 18px;
}

This doesn’t change anything, what I wanna change is the capital letters. I want small caps.

Hope I was clear.

Thanks and cheers

[Friech]

Hi There,

Add this code to increase the text size of the percent number in the bar.

body .x-skill-bar .bar .percent {
    font-size: 150%;
}

Not sure what do you mean by small caps. In CSS you only have four option to transform a text, those are none, capitalize, uppercase, lowercase.

body .h-skill-bar {
	text-transform: none;
}

Change the none value to desired look.

Hope it helps, Cheers!

[elise83]

Perfect, thanks!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts