How do I modify css elements of the progress bar?

Get help using Construct 2

Post » Thu Jul 23, 2015 11:57 pm

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?
B
10
S
2
G
2
Posts: 73
Reputation: 1,044

Post » Fri Jul 24, 2015 1:04 am

See the link below for my how-to-set css tutorial.
I only occasionally visit - I'm learning C# for Unity, but c2 is still a respectable game engine imo....
B
73
S
19
G
66
Posts: 2,198
Reputation: 42,188

Post » Fri Jul 24, 2015 3:01 am

Here's one line version that doesn't try to write a css parser with tokenat... :P :?:
https://dl.dropboxusercontent.com/u/139 ... t_css.capx
B
10
S
2
G
1
Posts: 202
Reputation: 1,545

Post » Fri Jul 24, 2015 8:58 pm

@Noncentz705, that one requires r209. Maybe you could show off the relevant events with a screenshot?
B
10
S
2
G
2
Posts: 73
Reputation: 1,044

Post » Sat Jul 25, 2015 4:51 am

@Mylo
Image
B
10
S
2
G
1
Posts: 202
Reputation: 1,545

Post » Sat Jul 25, 2015 11:48 am

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?
I only occasionally visit - I'm learning C# for Unity, but c2 is still a respectable game engine imo....
B
73
S
19
G
66
Posts: 2,198
Reputation: 42,188

Post » Sat Jul 25, 2015 8:47 pm

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.
B
10
S
2
G
2
Posts: 73
Reputation: 1,044

Post » Sat Jul 25, 2015 10:22 pm

@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.
B
10
S
2
G
1
Posts: 202
Reputation: 1,545

Post » Sat Jul 25, 2015 10:38 pm

@Noncentz705 - thanks! That was way too hard to find!!
I only occasionally visit - I'm learning C# for Unity, but c2 is still a respectable game engine imo....
B
73
S
19
G
66
Posts: 2,198
Reputation: 42,188

Post » Sat Jul 25, 2015 10:43 pm

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

this is how my CSS looks:

Code: Select all
#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;
}


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)""
Last edited by Mylon on Sun Jul 26, 2015 12:06 am, edited 1 time in total.
B
10
S
2
G
2
Posts: 73
Reputation: 1,044

Next

Return to How do I....?

Who is online

Users browsing this forum: AekiroStudio, Linetaru and 8 guests