How do I load a CSS file?

  • I want to customize a Slider Bar and a Button with a CSS file using the ID property.

    I created the CSS file in Construct 3, and I used a different ID for each one, but when I preview the project nothing happens.

    #btn{
    	color:red;
    }
    

    Tagged:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • construct.net/en/make-games/addons/166/inject-css

    Amazing plugin!

    What I typically do is launch the C3 game and use Chrome's 'inspect' to look at the elements and make sure I have the tags, class, id, etc. correct. Using the inspect you can also edit the css on the fly and see immediate changes. Once I have what I want, I then edit and upload the css to a web server and let the plugin load that css.

    The only problem is in caching. Chrome doesn't seem to check to see if the css is updated. In that case, I manually enter the url for the css into the browser and refresh it. Then, it appears correctly in C3.

    Eventually, the plan is to have the css files with version numbers. Whenever I update the css, I change the css file name and the name in the plugin and hopefully, it loads the latest one.

    For larger chunks of HTML I use in the game I use codepen.io as a test platform. It allows me to 'simulate' the html, css and js and show instant results.

    For one-off items, I just set the CSS in the event sheet.

    -> MyButton: Set CSS style "color" to "#999999"

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