How do I customize CSS of an object

Get help using Construct 2

Post » Thu Oct 16, 2014 3:08 am

Hello, good afternoon.

I would like to know how to customize the progress bar and slider bar with CSS. I know how to add CSS in the event sheet, but what value do I actually have to use to change the BG Image and the slider bg image of the slider bar? And the progress and base bg's of the progress bar.

I know how to use CSS, but I actually don't know what values would I have to use to modify these things. I was thinking about background-image, but for example the slider has two parts, am I right? The bar bg image and the slider image.

Kind regards.
B
23
S
3
G
3
Posts: 26
Reputation: 1,832

Post » Thu Oct 16, 2014 10:14 am

Try using the 'Set CSS style' action.
Scirra Founder
B
387
S
230
G
87
Posts: 24,248
Reputation: 192,238

Post » Thu Oct 16, 2014 2:18 pm

Hi Ashley, yep, I know how to add CSS to the object itself, but what CSS rule do I have to use in order to change the BG's of these objects? I know that I can use background-image to change it, but for example the slider bar has two images, am I right? The bg of the bar and the image of the slider. So in that case, what CSS rule do I have to use to change the slider image?

Regards.
B
23
S
3
G
3
Posts: 26
Reputation: 1,832

Post » Thu Oct 16, 2014 3:29 pm

I don't know - it's not really the right place to ask about CSS here, try StackOverflow or the MDN documentation.
Scirra Founder
B
387
S
230
G
87
Posts: 24,248
Reputation: 192,238

Post » Thu Oct 16, 2014 4:17 pm

You can find a lot of stuff over here

http://www.w3schools.com/css/
ImageImageImageImage
B
157
S
64
G
41
Posts: 2,590
Reputation: 34,640

Post » Thu Oct 16, 2014 4:21 pm

What elements can be styled via CSS beyond text and form elements?

Do CSS rules apply to objects rendered to the canvas the same way they would a conventional DOM element? If so, how does pathing work? (ie #canvas2d .myfamily { border: 1px solid black; }
Developing Surolace, the survival role playing space game.

surolace-survival-role-playing-space-game_t116953
B
13
S
4
Posts: 303
Reputation: 1,705

Post » Thu Oct 16, 2014 5:25 pm

The only DOM elements in the page are any form controls and the canvas itself. So you can style that, but not anything else in the canvas (since it's rendered in directly as opposed to being DOM elements). There's really no special considerations here, you can style those things like any web page, but you shouldn't change the size or position which C2 controls.
Scirra Founder
B
387
S
230
G
87
Posts: 24,248
Reputation: 192,238

Post » Thu Oct 16, 2014 6:20 pm

Ok, thanks, for the information :)
B
23
S
3
G
3
Posts: 26
Reputation: 1,832

Post » Thu Oct 16, 2014 8:57 pm

but what CSS rule do I have to use in order to change the BG's of these objects?


@lamies , if on chrome (or I believe firefox) just right click on any dom element you need to change and click inspect element. If right blocking is clicked inspect element of the nearest element that you can and find your target in the mark up. Click it. Under computed it will list every attribute of the element along with the corresponding CSS syntax to change it. (in chrome you can find path information at the bottom of the inspection display)
Developing Surolace, the survival role playing space game.

surolace-survival-role-playing-space-game_t116953
B
13
S
4
Posts: 303
Reputation: 1,705


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 9 guests