Custom Styles - Advanced¶
General Options¶
It is possible to customize the graphical style of many aspects of your present4D VR-Suite projects including the style of icons used for HotSpots, Slideshows, and in Conference Mode. You can even change the entire look of the program by customizing the colors and textures used in the graphical user interface of the program.
All these modifications are done by editing the media.xml
file. This file is initally created by present4D for each project. This file contains parameters that define all the graphical aspects of that project. The sections of code shown throughout this chapter are examples of how these parameters appear in the media.xml file.
Logo, HotSpot and Slideshow Icons¶
To change the actual icon used for HotSpots and Sideshows please refer to these instructions: Add Custom Icons to a Project and Logo & Splash Registration
HotSpot and Slideshow Parameters¶
Use the following parameters to change the style of HotSpot and Slideshow icons:
<hotspot ...=... scaleH="1.2" distanceH="10" iconType="auto" ...=... >
<slideshow ...=... distance="20.0" scale="3.75" ...=... >
- scaleH
- Size of the hotspot icon
- distanceH
- Distance of the hotspot icon from your eyes
- iconType
- Rotation functionality of the hotspot icon
- If iconType=”auto”
- The standard hotspot is rotating, individually swapped icon is not rotating
- If iconType=”rotation”
- All HotSpots are rotating
- scale
- Size of Slideshow icon
- distance
- Distance of Slideshow icon from your eyes
Hide Text for HotSpots and Slideshows¶
This settings can be configured in the iMenu / Settings since V 2.3.
<tourSettings>
...
<hideAllhotspotTexts>false</hideAllhotspotTexts>
<hideAllSlideshowTexts>false</hideAllSlideshowTexts>
...
hideALLhotspotTexts
hideALLSlideshowTexts
- If set to true all text will be invisible
Transparency of HotSpot and Slideshow Icons¶
The transparency parameter can make it easier to match your corporate design.
<tourSettings>
...
<disableTransparencyOfHotspotButtons>false</disableTransparencyOfHotspotButtons>
<disableTransparencyOfSlideshowButtons>false</disableTransparencyOfSlideshowButtons>
...
- disableTransparencyOfHotspotButtons
- disableTransparencyOfSlideshowButtons
- If set to true the icons will be displayed without transparency
Default Values for HotSpot and Slideshow Parameters¶
The default values for many graphical parameters can be defined in the media.xml
file.
If you manually edit these settings, it will affect all new elements which will be added to this project in future.
<TourGeneratorDefaultValues>
<Location>
<DefaultScale>0.25</DefaultScale>
<DefaultDistance>6</DefaultDistance>
</Location>
<Location-tour>
<DefaultScale>0.3</DefaultScale>
<DefaultDistance>6</DefaultDistance>
</Location-tour>
<slideshow>
<DefaultScale>1.2</DefaultScale>
<DefaultDistance>10</DefaultDistance>
</slideshow>
<POI>
<DefaultScale>0.175</DefaultScale>
<DefaultDistance>6</DefaultDistance>
</POI>
<sound>
<DefaultScale>1.753</DefaultScale>
<DefaultDistance>17.3</DefaultDistance>
</sound>
<POITwoRows>
<DefaultScale>0.3</DefaultScale>
<DefaultDistance>6</DefaultDistance>
</POITwoRows>
</TourGeneratorDefaultValues>
Guided Tour HotSpot Color¶
Set an individual color for the Guided Tour HotSpots. Due to differences in how computer graphics and VR hardware displays a project, RGB values may not be displayed exactly.
<tourSettings>
...
<tourColor red="0" green="90" blue="140" />
...
Laser Pointer Size¶
The size of the laser pointer can be scaled with this parameter in media.xml
:
<tourSettings>
...
<laserpointerSize>3</laserpointerSize>
...
Laser Pointer Color¶
The color of the laser pointer can be customized with this parameter in media.xml
:
<tourSettings>
...
<customUI>
<customColors active="true">
<colorEntry name="laserpointer_leader" r="0" g="0" b="80" a="179" />
<colorEntry name="laserpointer_follower" r="0" g="255" b="255" a="179" />
...
Conference Arrow¶
<tourSettings>
...
<customUI>
<colorEntry name="laserpointer_leader" r="45.0827141" g="204.375" b="79.13829" a="179" />
<colorEntry name="laserpointer_follower" r="193.125" g="32.6608429" b="32.6608429" a="179" />
Change the texture of the Laser Pointer and Guided Tour Arrow icons by replacing these files in the textures subfolder:
- Laserpointer.png
- GuidedTourArrow.png
3D Object Background¶
Change the texture of the background used to display 3D Objects by replacing these files in the textures subfolder:
- model_background.png
- model_close.png
Skin Customization¶

Design an Unique Skin for present4D Interface¶
It is possible to change the graphical style of present4D interface.
Download an example skin file set from our website and place into the folder data_myProject/textures
or create your own skin, with the following steps:
- Preparation for changing the Skin:
- In the
media.xml
file: SetcustomColors active
andcustomTextures active
to - Adjust the default colors in the
media.xml
file - Copy customized graphic files into the
data_myProject/textures
subfolder. If the foldertextures
does not exist please create it manually.
- In the
- If you wish to create your own png files:
- Download the texture template files in Photoshop format (*.psd) from our website (–> Download Additional Skin Examples).
- Use the droplet to convert them into transparent
.png
files (24-Bit RGBA) - Copy the
*.png
images into the folderdata_myProject/textures
. If the foldertextures
does not exist please create it manually. media.xml
: Adjust colors as needed (thea
value is for alpha / transparency)
Skin Color Definitions¶
Example Code Block
<tourSettings>
...
<customUI>
<customColors active="true">
<colorEntry name="menu_text" r="0" g="0" b="0" />
<colorEntry name="conference_text" r="255" g="255" b="255" a="255" />
<colorEntry name="video_grabber" r="255" g="255" b="255" a="255" />
<colorEntry name="video_time" r="0" g="90" b="140" a="255" />
<colorEntry name="video_slider" r="255" g="255" b="255" a="255" />
<colorEntry name="menu_text-marked" r="255" g="255" b="255" />
<colorEntry name="slide_label-text" r="255" g="255" b="255" />
<colorEntry name="spot_label-text" r="255" g="255" b="255" />
<colorEntry name="welcometext_headline" r="255" g="255" b="255" />
<colorEntry name="welcometext_subheadline" r="255" g="255" b="255" />
<colorEntry name="slide_load-Location-text" r="255" g="255" b="255" a="255" />
<colorEntry name="poi_headline" r="255" g="255" b="255" a="255" />
<colorEntry name="poi_subheadline" r="255" g="255" b="255" a="255" />
<colorEntry name="quiz_description_subheadline" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_description_headline" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_question_headline" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_question_answer" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_answer_headline" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_question_answer_default" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_question_answer_greyedout" r="56" g="56" b="56" a="102" />
<colorEntry name="quiz_question_answer_checkmark_correct" r="0" g="181" b="0" a="255" />
<colorEntry name="quiz_question_answer_checkmark_wrong" r="56" g="56" b="56" a="102" />
<colorEntry name="quiz_question_answer_wrong" r="252" g="0" b="0" a="255" />
<colorEntry name="quiz_result_headline" r="55" g="55" b="55" a="255" />
<colorEntry name="quiz_result_subheadline" r="55" g="55" b="55" a="255" />
</customColors>
<customTextures active="true" />
</customUI>
Skin Color Definitions for Textures¶





Quiz Skin¶
To choose different pictures for every single slide, click the Picture Symbol and select the picture.
Copy the *.png
images into the folder data_myProject/textures
- quiz_background.png
- Background behind the Quiz Slideshow
- quiz_close.png
- Close the Quiz
- quiz_next.png
- Load next Slide
- quiz_question_correctcheckmark.png
- Checkmark to show the correct answers
- quiz_question_multimarker.png
- Checkbox marker for multiple choice
- quiz_question_multiplechoice.png
- Checkbox for multiple choice
- quiz_question_singlechoice.png
- Checkbox for multiple choice
- quiz_question_singlemarker.png
- Checkbox marker for single choice
Video Tutorials
Visit our Youtube Tutorial Video Channel