Styling Verge3D Applications

Learn how to customize user interface styles in your Verge3D applications.

Introduction

Along with 3D part, all Verge3D applications include HTML elements for rendering preloader, annotations, fullscreen button and more. All these elements are supplemented by CSS classes which can be easily changed in your own application.

See the src/style.css file for the reference and examples of what can be customized. Do not change this file though as it compiled right into Verge3D. Instead add all styling code right into your application main CSS file. For example if your app is called "My Awesome App" then you should modify the following file:

applications/my_awesome_app/my_awesome_app.css

Alternatively, you can modify your CSS classes by using the Puzzles editor. Check out the set css rule puzzle reference.

Customizing Preloader

To modify your preloader change the following CSS classes:

For example, if you need to make progress number red instead of the default blue, add the following code to your application's main CSS file:

.v3d-simple-preloader-text { color: red; }

To change the preloader's gear image to something else:

.v3d-simple-preloader-gear { background-image: url("PATH_TO_YOUR_IMAGE"); }

Replace PATH_TO_YOUR_IMAGE with the actual URL of your image, such as gear.jpg.

Or to assign custom background image instead of default white:

.v3d-simple-preloader-background { background-image: url("PATH_TO_YOUR_IMAGE"); }

With Puzzles, all three style customizations will look as follows:

Styling Annotations

To style your annotations use the following CSS classes:

For example, to make your annotations square with green background:

.v3d-annotation { border-radius: 0px; background: rgba(0, 255, 0, 0.8); }

Changing Fullscreen Button

Fullsceen button styling is already managed by your application. See the following classes in your app's main CSS file:

For example, if you need to change the default open/close images to something else, modify the following two classes:

.fullscreen-open { background-image: url('PATH_TO_OPEN_IMAGE'); } .fullscreen-close { background-image: url('PATH_TO_CLOSE_IMAGE'); }

Got Questions?

Feel free to ask on the forums!