Personalizing Verge3D Applications — Soft8Soft
Description: How to customize styles of your Verge3D applications.

# Personalizing Verge3D Applications

Use this guide to create customized Verge3D applications targeted to your specific audience.

- Introduction to UI Styling
- Title and Description
- Advanced Customizations
  - Customizing Preloader
  - Styling Annotations
  - Changing Fullscreen Button
  - Customizing WebGL Error Screen
  - Language
  - Icon
- Fully-Customized UI

#

## Introduction to UI Styling

Along with canvas which renders 3D part, Verge3D application includes additional HTML elements for preloader, annotations, fullscreen button, etc. All these elements are supplemented by CSS classes which can be easily modified.

The easiest way to make your app personalized — choose Standard Light or Standard Dark in the app creation dialog:

And then use the Application Settings dialog to tweak your app:

#

## Title and Description

It's difficult to overestimate the importance of assigning meaningful title and description for your app.

The title is displayed in the browser tab and also used to bookmark your app link:

Both title and description are used by the search engines to find your app and present it to the user in the search output:

To assign app title change the corresponding setting in the application settings. Application description can be changed in the same manner.

Keep the length of the title below 50-60 characters. For description 120 to 160 characters is good enough.

#

## Advanced Customizations

Read below only if the built-in app templates and application settings dialog are not sufficient to properly customize your app.

For more advanced customizations, check out the src/style.css file in the Verge3D installation folder. Do not change this file as it is compiled right into Verge3D. Instead, add the styling code into your application main CSS file. For example if your app is called "My Awesome App" then you should modify the following file (located in the applications folder):

`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:

- v3d-simple-preloader-background — to customize the background of the entire preloader screen.
- v3d-simple-preloader-container — to modify the container element with the preloader image and bar. By overriding this class you can customize position and size of the preloader.
- v3d-simple-preloader-bar — to customize the loading bar.
- v3d-simple-preloader-logo — to customize the preloader image.

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

`.v3d-simple-preloader-bar { background: red; }`

To change the preloader's image to something else:

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

Replace PATH_TO_YOUR_IMAGE with the actual URL of your image, such as my_company_logo.png.

Recommended preloader image size is 120x120px.

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:

This snippet should be used in the init tab of the Puzzles editor because the preloader must be customized before the scene is loaded.

#

### Styling Annotations

To style your annotations use the following CSS classes:

- v3d-annotation — for changing the style of the annotation icon.
- v3d-annotation-transparent — for changing the style of semi-transparent (occluded) annotations.
- v3d-annotation-dialog — for styling annotation popup dialog.

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:

- fullscreen-button — for changing the style of the both open and close fullscreen buttons.
- fullscreen-open — for styling the image for entering (opening) the fullscreen mode.
- fullscreen-close — for styling the image for leaving (closing) the fullscreen mode.

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'); }`

#

### Customizing WebGL Error Screen

There are four CSS classes which define look of this error screen:

- v3d-webgl-error-container — for changing the style of the error container.
- v3d-webgl-error-image — for changing the image displayed above the error message.
- v3d-webgl-error — for changing the style of the message.
- v3d-webgl-error-link — for styling the error message link.

For example, the following CSS code:

`.v3d-webgl-error { color: white; border: solid 1px black; padding: 10px; background-color: red; } .v3d-webgl-error-link { color: black; }`

will make your WebGL error message look like this:

With Puzzles, this CSS code becomes:

Since WebGL error message generated before the engine initialized, this snippet will only work if placed in the init tab of the Puzzles editor.

#

### Language

Modify the following snippet in the beginning of your main HTML file to change app language:

`<html lang="en">`

See here for a list of possible language codes.

#

### Icon

To customize page icon displayed in the browser (also known as favicon), replace the following files in the media directory of your application:

- favicon-48x48.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png

To simplify things up, there are plenty of favicon generators available on the web.

#

## Fully-Customized UI

The best way to create fully-customized Verge3D experience is to build UI on top of your 3D part (see the Scooter demo as an example of this approach).

## Got Questions?

Feel free to ask on the forums!