How do I customize CSS of an object

0 favourites
  • 9 posts
From the Asset Store
This is a single chapter from the "Construct Starter Kit Collection". It is the Student Workbook for its Workshop.
  • 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.

  • Try using the 'Set CSS style' action.

  • 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?


  • I don't know - it's not really the right place to ask about CSS here, try StackOverflow or the MDN documentation.

  • You can find a lot of stuff over here

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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; }

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

  • Ok, thanks, for the information

  • [quote:34hokhub] 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)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)