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

I think ggibson1 is correct - the property name should be the text before the colon from the css sheet, all in "". The value is the data to be inserted into the parameter and it comprises everything after the colon up to, but not including, the semi colon. Although I wrote the tutorial I'm no css expert - I'm just becoming less inefficient at using c2 LOL.

OK, so i think the issue is that the 'background' property does not work. I can add a "border" as a property name and "4px solid #F00" to add a red border to the progress box, but adding "background" as a property and a color always changes the color to a dark/greyish green, not the colour i specify.

Is it possible to get a list of what the elements are classified as / what property names to use?

Ie. How do i change the background of the progress bar? How do i change the bar itself?

If you want to customise the appearance to something significantly different to the default, you will probably find it easier just to compose a new progress bar out of sprites and tiled backgrounds.

Understood, i guess the issue is there is still zero documentation regarding what elements can actually be styled. So there's an option to add css styles to the progress bar, but no clear definition on what elements we are able to style and how.

Im guessing based on the lack of answers that it's not actually possible to change the background colour of a progress bar using the built in css expression?

Ashley

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.

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.

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.

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

without using any images at all.

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...

Cool sounds good, thanks a tonne Ashley