Change CSS in the build

Help & Support
1

Hey,
I have done a build of my canvas applications and i wanna mix it with my html/scripts

So for the html and scripts it works i have what i want on my page.

But for the css i don’t understans how to change it. When i put some !important i can change width/height of the Canvas, but there is some width and height on the element that are generated automatically.

For exemple if i want to do a simple display flex and align-items: center , to center the Canvas , i can’t , that don’t work.

If u have some clue to delete the css who are generated automatically would be awsome

Thanks

2

Hi @Xora,

I think those properties are set later in JS, so any overriding you do in your CSS files it’s being later on overriden by JavaScript.

One way to work around that if you are self hosting is to step in the __start__.js file included in the build and update the JavaScript code that handles styling for the canvas:

image
image1113×1232 67.5 KB

1 Like
3

Hey Leonidas thanks for you’re answer.
Ok so i can delete this part in the start.js and the css of my stylesheet would work i guess?

4

It may not be that simple, since deleting may break other behavior of the canvas (e.g. resizing).

I’d say mostly read through it and see which CSS rules you need overriding and edit those.

But yes, you can try deleting and see where that goes :pray:

1 Like
5

Well i just delete the css part but yeah it didn’t work the way i wanted, well thanks for you answer i will try to understand the script and change what i need.

Thanks a lot , have a nice day!

6

The engine does some CSS/styling on certain fill modes.

If you want to control the canvas size and position from the HTML/CSS, I would change the fill mode to NONE

image
image964×592 29 KB

Then it’s down to the developer to control the canvas size/position etc.

2 Likes
7

Hey yaustar thank for you’re answer.

That’s big , i dont know this part thanks a lot!

8

Hey, sorry i open again the thread but now i have a problem with the html aha…

I’m trying to align my items like two button and the Canvas, but it looks like i cant with my regular html , i can’t put my html element + the html who are generated by the script in a div for exemple.

Should i put all my html elements in the scripts Start.js ?

Thanks

9

Hi @Xora,

That’s not advised, since each time you push a new build the __start__.js script will be overwritten.

It’s simpler to add your HTML using a regular PlayCanvas script, like this example:

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

10

Hey !
I see but in my case it doesn’t seem relevant to me because I have a whole interface around it and a web page with a lot of content.
But I have to keep the PlayCanvas build because I interact with the materials via scripts/button in my web page

11

I’m not sure what your setup is here.

It sounds like you have a PlayCanvas page as part of a larger page? If thats the case, you are probably best to create to your own publishing pipeline that adds the PlayCanvas build to your own HTML boilerplate using the REST API and some custom processing scripts.

12

Hey yaustar, sorry for the late response i was in week-end.

Yep it’s that , i have a Html Page with some buttons who interact with my PlayCanvas (to change material with some pdf who went through a script to get png). But the problem it’s the PlayCanvas is generated by a script with some body.append.Canvas.
And when i try to create a div and append on this one , the PlayCanvas stop working so i don’t know why.
But yeah maybe i should juste use some script to take off the html tags and put the PlayCanvas where i want to

13

I have done all my project with the build , but maybe i should do this with the Api? i don’t know never used Api before so not sure if it is relevant

14

In cases like this, I use the REST API to download the build via script and use the same script to do the changes needed for the use case. Eg replace the __start.js__ file

15

I see maybe I should look into it but it still seems a bit complicated at my level but why not.

16

Okey it’s just my bad , i can add the Canvas player to the div i want , just by changing some stuff in the start.js

1 Like