CSS Styles

Discussion and feedback on Construct 2

Post » Thu Jul 06, 2017 6:41 am

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.)
B
43
S
12
G
1
Posts: 545
Reputation: 4,246

Post » Thu Jul 06, 2017 2:26 pm

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.
"We can't solve problems by using the same kind of thinking we used when we created them."
- Albert Einstein
B
27
S
11
G
8
Posts: 528
Reputation: 7,091

Post » Thu Jul 06, 2017 3:23 pm

@randomly - right, but when you put "border", how do you choose the button border instead of the file chooser border?
B
43
S
12
G
1
Posts: 545
Reputation: 4,246

Post » Thu Jul 06, 2017 3:40 pm

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;
}
B
62
S
23
G
10
Posts: 647
Reputation: 10,578

Post » Thu Jul 06, 2017 3:54 pm

@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.
B
43
S
12
G
1
Posts: 545
Reputation: 4,246

Post » Thu Jul 06, 2017 4:35 pm

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.
B
62
S
23
G
10
Posts: 647
Reputation: 10,578

Post » Thu Jul 06, 2017 5:03 pm

@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 :P

Hopefully that makes more sense?
B
43
S
12
G
1
Posts: 545
Reputation: 4,246

Post » Thu Jul 06, 2017 8:11 pm

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
B
62
S
23
G
10
Posts: 647
Reputation: 10,578

Post » Sat Jul 08, 2017 2:10 am

@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.
B
43
S
12
G
1
Posts: 545
Reputation: 4,246

Post » Sat Jul 08, 2017 2:37 am

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.
B
62
S
23
G
10
Posts: 647
Reputation: 10,578

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 14 guests