Updated 10/April/2020
Note: this tutorial is designed for Pano2VR Release versions 6.1+
Graphic elements such as buttons or information boxes can be exported as png files and added to the skin. However if there are a large number of these elements they can slow down the loading of a large virtual tour.
An alternative is to use SVG (Scalable Vector) files. These elements can be created within Adobe Illustrator and loaded into the skin. However if you want to use a special font to style the text within the SVG, the files will not be supported on Firefox and simply display a standard font (Times) (Figure #1)
Figure #1: Sample renderings across browsers
The example above shows #1. a SVG file styled using Gilroy SemiBold displayed in Google Chrome, #2. the same SVG file viewed in Firefox and #3 a version whose text is styled using an external CSS file and local font file. #3 viewed in both Firefox/Google Chrome/Safari look identical.
The best way to ensure consistency across browsers is to use a Local font file and CSS to style the text. In this example I'm going to create a button and a popup information block using the local font file/css method.
Final Output
Once the tutorial is finished your final project output will look like this example (Project Example #1)
Project Example #1: Finished tutorial project
Tutorial Files
In the tutorial folder, P2VR_CSS_Local there is an CSS_Asset Folder with an equirectangular pano, a .css file and 3 .woff fonts. A CSS_Project folder containing a Pano2VR project and a skin and a CSS_Output folder, with project files created from the .p2vr and .ggsk elements, and (Figure #2)
Figure #2: Tutorial Folder
Project overview
This tutorial covers how to use fonts in a Pano2VR skin that may not be readily available on other computers.
In this tutorial we will…
Modify a CSS file to style both the text for the button name, the header and body in a popup window
Update the skin to style the text & add .woff fonts to the Output folder
Add the CSS file to the skin
Fine tune the line spacing, kerning and add a website link (Figure #3)
Note: click on any image in the tutorial to enlarge it
Figure #3: Before and after styling with CSS and local fonts
Note: information on converting existing fonts into .WOFF versions is provided at the end of the tutorial.
Getting Started
1. Download the zipped tutorial folder here
2. Double click on the P2VR_CSS.p2vr to open the project in Pano2VR (Figure #3)
Figure #3: P2VR_CSS project
3. Click on 'Generate Output' button to view the basic project. (Figure #4)
Figure #4: Generate Output button
Note: It should look and work like the sample file below. (Project Example #2)
Pano Example #2: Basic project created from unedited tutorial files
Modify the CSS File
The first step is to create the CSS classes.
The name on the button, 'Lobby & Concierge'
The header of the popup 'Concierge Information'
The body of the popup 'Body Information'
Each will have slightly different styling so we will create three unique classes, bt_lobby, info_header and info_body.
1. Open the 'font_styles.css' into a text editor. I use TextWrangler but you can use any text editor you like. In the text document add the following;
Note: the css file already contains the code to add the local fonts
2. After the @font-face code add the following;
.bt_lobby{
font-family: "gilroybold";
font-size: 19px;
}
.info_body{
font-family: "gilroylight";
font-size: 15px;
}
.info_header{
font-family: "gilroysemibold";
font-size: 60px;
}3. Your .css file should look like the image below (Figure #5)
Figure #5: Updated font_styles.css document
Note: If you are cutting and pasting the code above it's good practice to remove all formatting from the text before you save your .css file.
4. Save the updated font_styles.css file
5. Select the font_styles.css file and drag or copy it into the top root of the CSS_Output folder.
5. Shift select all 3 .woff fonts and drag or copy them into the top root of the CSS_Output folder as well (Image #6)
Image #6: .Css and .woff fonts in the CSS_Output folder
Assign the Classes to the Elements
1. Open the P2VR_CSS_Skin by clicking on the ‘Edit Skin’ button (Figure #7)
Figure #7: Edit Skin button
2. Click on the dropdown arrow of the bt_lobby_cont container and select the element 'button_text'. In the Properties/Advanced/CSS Classes: add the class name 'bt_lobby' (Figure #8)
Figure #8: bt_lobby CSS Class assigned to button_text element
3. Repeat the process and add CSS Classes to the the ‘info_cont’ container elements, 'header_text' and 'body_text' by adding 'info_header' and 'info_body' into the Properties/Advanced/CSS Classes: for each element
4. Click in the Tree Panel (outside the elements) to open the Global Properties.
5. Open the ‘External Files’ dropdown and select ‘CSS’ in the Type field
6. Enter font_styles.css in the URL field (Figure #9)
Figure #9: Add external CSS file
4. Save and Publish the project. It should look like the Project screenshots below. (Figures #10 & 11)
Figure #12: Button styled
Figure #13: Info box styled
Fine Tuning
Note: The text is now styled using the Gilroy fonts however there is still a bit of fine tuning to be done. For the final output we want to make some modifications.
The word Concierge in the button is too wide and touches the right hand edge of the graphic
The spacing between the words Concierge and Information is too large and the spacing between the lines in the body is too small.
The words visit our website need to be a hyperlink, without underline, bolded and in the same green color as the button. (Figures #15 & 16)
Figure #15: Word requires kerning
Figure #16: Line spacing updates and web site link active
1. Open the 'font_styles.css' file (the one in the CSS_Output folder) in your text editor and make the following changes to the .bt_lobby class by adding in the ‘letter-spacing’ setting and in the .info_header and .info_body classes by adding the two 'line-height' settings. (Figure #14)
.bt_lobby{
font-family: "Gilroy-SemiBold";
font-size: 19px;
letter-spacing: -1px;
}
.info_body{
font-family: "Gilroy-Light";
font-size: 15px;
line-height: 170%;
}
.info_header{
font-family: "Gilroy-Bold";
font-size: 60px;
line-height: 100%;
}Figure #14: Updated .css file
2. Save the .css file and publish the project to see the updated line spacing (Figure #15)
Figure #15: Letter and line spacing applied to the button, popup header and body
3. Open the skin and select the body_text element and in the Properties/Text/Text: remove the text 'visit our website' and replace it with the text below. (Figure #18)
<a href="http://tonyredhead.com/" target="_blank" style="text-decoration:none;"><span style="font-family: gilroybold; color: rgb(0,111,120);">visit our website</span></a>
Figure #18: body_text update to include active URL link
5. Save the skin and publish the project
6. You have finished the tutorial and the Project example at the start of the tutorial should match your finished project. (Project Example #1)
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
