How do I modify css elements of the progress bar?

I'm aware of the "set css style" action, but I'm not familiar with what elements are available. For example, this site has some code for a fancy progress bar:

http://stackoverflow.com/questions/7190 ... ml-and-css

This is also a good example of something I'd like to do, done slightly differently:

http://jsfiddle.net/cwZSW/1502/

Like if I try to do "border-radius" I don't get any affect. If I add background-color of #0f0 and a border, only the border is the expected bright green and not the actual filled portion of the progress bar. Basically, how do I get the results from the link?

See the link below for my how-to-set css tutorial.

Here's one line version that doesn't try to write a css parser with tokenat... <img src="{SMILIES_PATH}/icon_razz.gif" alt=":P" title="Razz"> <img src="{SMILIES_PATH}/icon_question.gif" alt=":?:" title="Question">

https://dl.dropboxusercontent.com/u/139 ... t_css.capx

Noncentz705, that one requires r209. Maybe you could show off the relevant events with a screenshot?

mylo

Dammit - lol - that's much more efficient Noncentz705!!! I'm going to have to update my tutorial.... :/

Edit - as you're a css guru - how did you edit the c2 editor to display in black with white writing?

Alright, I got the css file loaded in the game! I guess it's important to note that the "set web font" isn't specific to that text element. It allows the css file to be applied universally to the layout.

But now I'm running into a roadbloack. I can't figure out what the sub-element is called (that is, the portion of progress that is full) so that I can modify the style. Using the code I posted earlier, I get this result: http://imgur.com/L93asUL It seems there may be a third element too, the background of the progress bar itself.

Mylon

As you likely noticed, support for styling progress elements varies by the browser.

Doing so requires vendor prefixes and a fallback for older browsers if you want things to look consistant.

To achieve your desired look and keep things consistent it might be easiest to create your own

progress bar by using sprites or a HTML solution with a custom plugin.

The fiddle you sent would use the later.

If your target export is nw.js you can safely ignore that advice and use some of the webkit prefixes from the link bellow.

Here's an article that covers the process and pitfalls of styling progress elements

https://css-tricks.com/html5-progress-element/

About loading CSS with the web font action,

The CSS is included for the lifetime of your app, so it would be best moved to the loading layout.

Your HTML elements may show without style for an instant while the stylesheet is fetched.

It's worth asking Ashley for 'On web font loaded' and '.. failed' conditions if this is a problem.

To apply different styles based on events you can add/remove class's to your element (with jquery for example).

Colludium

It's one of the default themes

• View/Style/Visual Studio styles/Visual Studio Dark 2012
• File/Preferences/Colors/Choose theme/Default

The style on the tabs won't seem to change until you restart the editor.

Noncentz705 - thanks! That was way too hard to find!!

Noncentz705: That link gave me the info I needed, thanks.

this is how my CSS looks:

#HealthBar {
    background: #333;
    color: #0f0;
    border-radius: 6px;
    height: 24px;
    width: 65px;
    padding: 2px;
}

#HealthBar[value]::-webkit-progress-value {
    background: #0f0;
    border-radius: 6px;
    width: value
}

#HealthBar[value]::-webkit-progress-bar {
    background: #333;
    border-radius: 6px;
}[/code:2dkw10qy]

And that gives me the rounded edges and the desired color.

Thank you so much for your help with this, by the way.  I'm learning a lot about CSS.

Now the question is, how would I edit "#HealthBar[value]::-webkit-progress-value" element to change color using the event system.  I would like it to fade from green to red as health drops (akin to something like ""rgb(" & int(255 * (1-(Heroes.HealthCurr/Heroes.HealthMax))) & "," & int(255 * (Heroes.HealthCurr/Heroes.HealthMax)) & ", 0)""

Colludium

Mylon

No problem..

Alright, so my "set css value "color" to ""rgb(" & int(255 * (1-(Heroes.HealthCurr/Heroes.HealthMax))) & "," & int(255 * (Heroes.HealthCurr/Heroes.HealthMax)) & ", 0)"" code works in Internet Explorer to change the color of the progress bar based on it's current progress, but this doesn't work in Chrome (because of the use of #HealthBar::-webkit-progress-value makes it more difficult to get in there and dynamically change the style.

Is there away to reference the property or am I going to need to edit the progressbar plugin?

Edit: There doesn't seem to be a way to change the ID of an object. Even if I define 4 possible styles for my progressbar, I have no way of changing the ID to take advantage of those styles.

To apply new styles based on events you might consider using the browser plugin and jquery.

For all the time and css it takes to get a solution working you'll have been better off using sprites and the eventsheet.

To style things consistently across desktop browsers you'll need to make you own progress element.

I've made an example here

Here's the same example in a capx (You'll need to install the plugin before you can run the example)