How to use the "Set Css Style" on Progress Bar?

Get help using Construct 2

Post » Thu Jan 08, 2015 7:09 pm

As I said before, CSS is just huge and there are hundreds of properties/values you can set, and browsers are always adding more CSS features. There's really no point in us trying to document CSS - there are already loads of sites out there that cover it.
Scirra Founder
B
399
S
236
G
89
Posts: 24,524
Reputation: 195,380

Post » Thu Jan 08, 2015 9:05 pm

@Ashley I am frustrated because i think you are misunderstanding my question or assuming I don't know what I'm talking about and therefore not thinking about my question as I am asking it.

As ive said before, i know CSS very well, what i dont know is the class you've assigned to the bar of colour in a progress bar, or how to target that class to apply colour to the progress bar. These semantics have nothing to do with CSS but are entirely related to your development of the progress bar element in Construct 2.

All Im Asking: Is it possible to change the color of the Progress Bars using the "Set CSS Style Action"? Is this even programmed in Construct 2?

If answer is yes, i guess I will continue to blindly fumble my in the dark to figure out how you have implemented it. If it's not possible, please tell me that it is not possible so I stop looking / asking for a way.
Made Cosmochoria - www.cosmochoria.com
Currently working on Slayaway Camp - www.slayawaycamp.com
B
27
S
8
G
3
Posts: 384
Reputation: 5,020

Post » Thu Jan 08, 2015 11:40 pm

It's really very simple: Construct 2 creates a <progress> element, and 'set css style' sets CSS on that element (as in, it goes on the style attribute of the progress element). That is all!

I had a quick look and there doesn't appear to be any standardised way to modify some parts of the progress bar, since some browsers implement it via shadow DOM with different internal elements, but I don't think the standard requires that. It's another reason to go with your own composed of objects so you have 100% control over the appearance. The progress bar plugin is intended for apps which want a system or platform styled progress bar which fits with the rest of the apps on the system - so you'd want to keep it the same.
Scirra Founder
B
399
S
236
G
89
Posts: 24,524
Reputation: 195,380

Post » Fri Jan 09, 2015 6:14 am

@Ashley Awesome, thank you for the explanation. My confusion came from the fact that buttons seem to be 100% customizable through CSS, but the progress bar didn't seem to follow those same properties / css elements. I really appreciate you taking the time to explain and I truly hope I didn't seem too rude/blunt to you. Just been running on such little sleep trying to get cosmochoria done :
Makes a bunch more sense to me now, and makes sense why I cant specify background stuff, because I actually need to be able to target the "progress[value]::-webkit-progress-value" specifically. Oh well. Would be awesome to be able to make non-image based progress bars (for health bars, etc) but it sounds like a niche request if this thread is primarily just me and you talking about it haha.

progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);

border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}

equals

Image without using any images at all. :)
Made Cosmochoria - www.cosmochoria.com
Currently working on Slayaway Camp - www.slayawaycamp.com
B
27
S
8
G
3
Posts: 384
Reputation: 5,020

Post » Fri Jan 09, 2015 5:22 pm

You can give the progress bar an ID (in its properties), so then you could do more advanced styles by using rules like #myprogressbarid::-webkit-progress-value { ... } - but to get that CSS in to the page I think right now you'd need to modify the exported HTML, or use a third party plugin which can write more advanced CSS rules...
Scirra Founder
B
399
S
236
G
89
Posts: 24,524
Reputation: 195,380

Post » Fri Jan 09, 2015 8:42 pm

Cool sounds good, thanks a tonne Ashley :)
Made Cosmochoria - www.cosmochoria.com
Currently working on Slayaway Camp - www.slayawaycamp.com
B
27
S
8
G
3
Posts: 384
Reputation: 5,020

Previous

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 23 guests