Docs

[Teranox]

Hi,

I bought The X theme and i’m currently doing an overhaul of my website. http://www.pimentsfortsquebec.com (Think it’s block for your country).

I’m reviewing hot chili peppers and I want to switch my scovil scale (heat scale) from infography to something more “coded”.
I would like to use the skill bar but replace the background by an image (or at least divide it in 20 blocs numerated from 1 to 20. I would simply put some transparency to the progress layer.

Also, each time I would call this specific skill bar, I would like to make a small char appear on top of it.

Is something can be done to achieve this using this skill bar? You can see in the attached file the scale i’m using with arrows. Right now, each time I’m making a review I have to open photoshop and edit this bar then upload it….it’s heavy and long. Thanks

[Teranox]

any help please?

[Rue Nel]

Hello There,

Thanks for writing in! Yes you can have a background image in your skill bar. please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-skill-bar {
  background-image: url('http://placehold.it/20x20');
}

You need to upload the image to your server and change the url in the given code above. Hope this helps.

[Teranox]

Thanks, i’ll try that tonight.

Also, would there be a way to use skillbar normally and having specific skillbars to use the image?

Let say I want skillbars for heat and skillbars for other things.

Is there a way to make that simple so i don’t have to add a custom css each time (because after a few months there could be hundreds of reviews…

like a mean to “duplicate this plugin/function” so there is one that is used for heat, other for flavor, etc… and just have to call a specific one via shortcode or insert in cornerstone?

Thanks.

[Teranox]

Also, How Can I make sure the Skillbar will stop at the same and right place on mobile/pc and any other screen?
Im my image is an image with cells ranked 1-20, it there a way to stop it where is want?

[Jade]

Hi there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts