Hi There.
What is the proper way to override the XR buttons’ style ?
The style.css file in the syles folder of the project’s workspace, once changed didn’t do the trick.
I had to go all the way to engine/lib/engine-component/webxr/webxr.js and changed it there … obviously not a good thing to do to dig so deep.
by user 700879811085598831
There’s a sample for custom XR buttons: Needle Engine Samples
thanks @herbst🌵 . So you mean i can change its style like so ?
const vrButton = document.querySelector(".vr-button")!;
vrButton.style.bottom="";
vrButton.style.top="20px";
by user 700879811085598831
Hello @Kevin you can find a way to access it here: Discord
You can make entirely your own buttons as in that sample. The big “AR” and “VR” buttons are simply your HTML and they call “start AR” and “start VR” as in that sample. So you have full control over styling on your end
Of course you can also do what Marcel mentioned above and change the styles programmatically; typically I find it easier to make entirely custom buttons as often you’ll also want to have them in another place on the screen / in your HTML structure etc.
thanks @herbst🌵 . I think I’ll go with the example in the thread @marcel 
posted. My use case was simply to get them out of the way on mobile as I implemented some html/css joystick and buttons for controlling a character. I had not encountered any problems on ios as they don’t show up unless using the usdz approach, but they did come as a surprise and ruin my UI / UX on an android phone 
by user 700879811085598831
Do you just want them elsewhere or not show them completely? To not show them at all you can just disable the toggle in the WebXR component
I needed them to show up to the top instead of the bottom, and also disable them when the player’s role is set to playing in FPV instead of third person view. So I did end up dealing with my edge-case by programmatically setting the style.
by user 700879811085598831
Ok 