CSS Styles

Is there a document anywhere that lists EVERY CSS style command in C2? I literally can't find a single thing online for more complex parameters (ie changing the parameters of a button in the file chooser, etc.)

Construct 2 doesn't have its own "CSS commands", it uses the same CSS as used in modern websites.

If you are looking for parameters, have a look here.

randomly - right, but when you put "border", how do you choose the button border instead of the file chooser border?

You need to choose the element, by either id (#), class (.), or semantic (header, footer, nav etc.).

These can be combined with selectors to be even more specific, for example p{} will style all paragraphs, however body p{} will only style paragraph elements within the body. CSS has entire concepts devoted to this, and it's worth reading up on how both the cascade and specificity works (rules like !important will help you a lot in the beginning, but try not to become reliant on it!); as well as additional selectors like siblings, adjacents, and wildcards, as well as pseudo classes.

The best way to identify elements in C3 is open dev tools in Chrome and use the selector tool (Ctrl+Shift+C) to highlight elements, for example the new file button is .spOpenFileButton, so to give that a red background you would write:

.spOpenFileButton{

background:red;

}

Elliott - sorry I'm not quite following. Putting that into the CSS value or property name will return a bunch of syntax errors in C2.

Whups, I thought we were talking about styling C3 themes!

C2 has CSS support for it's HTML elements like buttons and file pickers; you set these individual in the object itself through actions - for example to set the buttons CSS you set the condition, and then use the buttons Set Style as the action.

Alternatively you can style these elements with an external stylesheet or inline stylingif you're publishing a web app, you just have to update the index.html file C2 generates in a text editor.

Elliott - No problem!

Yes, so I've done that to an extent.

Set CSS Style "border" to "solid"

Set CSS Style "border-radius" to "4px"

Set CSS Style "color" to "rgb(44,4,4)" etc. etc.

That's what I'm looking for a set list of.

ie. why can't I do "button-border" to "transparent", or "button-bevel" to "none". I can't because they don't exist and I don't know what does

Hopefully that makes more sense?

Each object sets it's CSS individually; so the button has it's own Set CSS action that applies to it, and so does the File Chooser:

https://www.scirra.com/manual/111/button

https://www.scirra.com/manual/182/file-chooser

To have a partially transparent button border you would set it's colour using RGB values, so for example the rule would be:

color: rgba(255, 0, 0, .5);

Where the values are declared (red, green, blue, opacity)

Bevel isn't a deafult CSS property that can be declared, if you wanted to achieve an effect that looks like that you would use border-radius to curve the edges and a linear gradient as the background: https://stackoverflow.com/questions/254 ... ton-in-css

CSS is a vast language with lots of properties, if you're looking for I'd complete list I would go here: https://www.w3schools.com/css/default.asp

Elliott - What I mean is the button IN the file chooser. It's all one object, so I don't know how to differentiate between the two.

Ah, I see.

To my knowledge there's no natural way of doing this, the two work arounds I can see:

1) Edit the exported HTML5 index.html so that the button is styled inline.

2) Make the file chooser transparent and sit on top of a sprite that has the visual appearance you want.

Elliott - ah number 2 isn't a bad idea. Thanks!