Skills bar

Support
#1

Hi Guys,

How can I change my current skills bars (see attached) to have the same layout as the image attached (how i want it):

  1. Skills bar heading to the left of the bar

  2. percentage headings outside to the right of the bar

  3. white behind bars to be transparent

  4. change font of skills bar headings.

my url: mountain-view.co.za

Thanks!
W

#2

Hello There,

Thanks for writing in! Do you want to have some thing like this?

If that is the case, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 768px) {
    .x-skill-bar {
        float: left;
        width: 60%;
        margin-left: 10px;
        background-color: transparent;
        box-shadow: none;
    }

    .h-skill-bar {
        float: left;
        clear: both;
        margin-top: 5px;
        font-family: "Helvetica Neue", Arial, serif;
    }
    
    .x-skill-bar .bar {
        overflow: visible;
    }

    .x-skill-bar .bar .percent {
        right: -50px;
        z-index: 9999;
    }
}

Hope this helps. Please let us know how it goes.

#3

Hi @RueNel

Thanks for the code it helped but there are still some change I wold like.

You will see how my bars look like after the code you’ve provided me with.

How can I align all the bars?

And how can I get all of the bars percentages outside the bars?

Thanks a lot!

#4

Hello There,

Thanks for updating this thread. Do you want something like this?

Then you can use this code instead:

@media(min-width: 768px) {
    .x-skill-bar {
        float: left;
        width: 50%;
        margin-left: 10px;
        background-color: transparent;
        box-shadow: none;
    }

    .h-skill-bar {
        float: left;
        clear: both;
        margin-top: 5px;
        min-width: 200px;
        font-family: "Helvetica Neue", Arial, serif;
        text-align: right;
    }
    
    .x-skill-bar .bar {
        overflow: visible;
    }

    .x-skill-bar .bar .percent {
        right: -50px;
        z-index: 9999;
    }
}

Hope this helps. Kindly let us know.

#5

100% Thanks you’re a super star!

I’ve tried the code and now it looks like the attached pic. Though there are still two problems I would appreciate your help for:

  1. You will notice the bar’s numbers and percentages start in the bottom two bars. Can I have them outside the bar to the right please?

  2. You will notice the top two bars numbers and percentage are outside to the right of the bars… but for some reason the percentage are below the number.

Your assistance is much appreciated.

W

#6

Hi There,

Please update this part:

 .x-skill-bar .bar .percent {
    right: -50px;
    z-index: 9999;
    background: none;
    color: #424242;
    font-size: 14px;
    text-transform: none;
 }

To this:

 .x-skill-bar .bar .percent {
    left: 100%;
    z-index: 9999;
    background: none;
    color: #424242;
    font-size: 14px;
    text-transform: none;
    min-width: 150px;
 }

Result will be like this:

Hope this helps.

#7

Thanks its 100% you are a star!

#8

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.