Editing Child CSS "About Us"


Thanks for creating this wonderful theme.
I am trying to remove the numbers and boxes above the progress bar in the skill widget.
I have tried to following code in my child CSS, however to changes appear.

#about .skill .skill-top .skill-progress-bar .ui-progressbar-value .ui-progressbar-value-top {
display: none;

Can you please advise if this is possible.


Try this CSS code:

#about .skill .skill-top .skill-progress-bar .ui-progressbar-value .ui-progressbar-value-top{
display: none !important;
content: none;

Your code should work alright, maybe you are not using it right.

If still not working, please provide the website link, if possible.


Thank you for your support! I have learned so much from your responses to other questions.

Another question if I may:
I am using this code to edit the contact form.

#contact-us .section-content .wpcf7-form p .wpcf7-text,
#contact-us .section-content .wpcf7-form p .wpcf7-textarea{
background-color: #0BBE30 !important; //TEXT BACKGROUND
border: 1px solid #FDFDFF !important; //TEXT BORDER
color: FDFDFF !important; //TEXT

However the text box border has not changed (as seen in picture it remains orange)
I have tried different variations of “border: 1px solid #FDFDFF !important; //TEXT BORDER”
I can not get the width or color to change.
I also want to change the font color of the phone, and other location details. Can you help?

If I have any further questions should I create a new thread for each?


If possible, please provide the website link so I can have a live preview of the issue.

The code should work alright, Im not sure if you are using the comment text though, which might cause the code to not work.

Try this code to change the color of the phone and location:

#contact-us .section-content .contact-us-box .box-right span,
#contact-us .section-content .contact-us-box .box-right span a,
#contact-us .section-content .contact-us-social .fa{
color: red;



Thanks for your help. Everything has worked so far (I had to change the order of my CSS code for the border).
May I ask some last few questions:

I want to change all the menu and icon colors from the stock yellow to a different color do I have to add CSS code for each element or is there a faster way?

Can I add a SECOND hover state to buttons? (initial color, immediate hover color, NEW hover color after a time)

I need to move the copyright information to the right a few spaces, where would I do that? I have attached a picture showing how it doesn’t line up with my logo.

Can I change the counter to only work on hover? What about the height?

I have learned so much with your help. I am even answering some of the other peoples questions now!


I just used this code to edit all the small color changes:

#blog .blog-post .blog-post-meta .post-meta-author .fa,
#blog .blog-post .blog-post-meta .post-meta-time .fa,
#blog .blog-post .blog-post-meta .post-meta-comments .fa,
#blog .blog-post .blog-post-meta .post-meta-uncatagorized .fa,
#blog .blog-post .blog-post-meta .post-meta-categories .fa {
color: #;

Hi there

Can I use the existing thread to discuss the same issue. I am also trying to remove the numbers and boxes above the progress bar in the skill widget.

I have tried putting the code you suggested on the “Additional CSS” section as well as under stylesheet.css (but on using child theme method) but no luck so far.

Can you let me know what i could be doing wrong?



I’m trying to change the progress bar values in the About section. I am using values all above 100% so they all just go to the max. I’d like to change the bar size manually. I’m currently doing the following:

#illdy_skill-14 .skill .skill-top .skill-progress-bar {
width: 16%
#illdy_skill-15 .skill .skill-top .skill-progress-bar {
width: 32%

But, that also removes the gray line that shows the max value possibility. Can I get that gray line back and keep the colored line at a lower value?

Thanks so much! love the theme.

Hi there

@mrsideproject can i see your page with this problem? please provide url and i will take alook