Creating your own Theme

With the new JavaScript/HTML5 based 360 player you can create your own theme very easily.

TLDR: Just replace/modify the files in the exported assets folder to create your own theme.

When creating your own theme, you can:

1) Modify the look of the buttons
2) Modify the position of the buttons.

When you export the 360 product rotation with the 3DRT Setup Utility also a folder named assets is created in the output folder. This folder contains the button images and a styles.css file:

Each image is one button with it’s over state, e.g. the play pause button:

Modifying the look of the buttons

To change the button look, replace each of the button images with your own graphics. If you do not change the size of the buttons/images you do not need to edit the styles.css file.

If you do change the size of the images, you need to modify also the styles.css file. The default-white and default-black theme button default size is 22x22px. This means, that in styles.css you need to replace each occurrence of 22px and 44px with your new button size. E.g. if yours new button is 25x25px, change the styles as follows:

Modifying the position of the buttons

Each button is positioned using the “left”,”bottom” and “right” css statements. It’s the button distance from the left,bottom or right edge. Example code for button play positioning:

The themeUrl parameter

It is wise to use one central location for the rotatetool.js file. The same way you can use one central location for your player’s theme. If you redesign sometime in the future, you replace the theme files at one-central location an the change is automatically reflected on all 360 product rotations across your site. The themeUrl parameter is described in the “Integrating into a webpage” page.

Share your theme

Have you cerated a nice theme? Share it with other users and I will award you with 3 extra months of free upgrades or more!

Other notes

If you use the themeUrl parameter, you can also host the theme on other server, such as Cloud or CDN hosting – similar to hosting the images.