Overview
This “little bit's” tutorial show you how to style text with CSS and Local Fonts in Pano2VR 6.1.2a ßeta
Note: this tutorial is designed for Pano2VR 6.1.2a ßeta . You can download the beta here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Tutorial Files
In this tutorial we will be re-using some of the project files from the ‘Styling Text with CSS and Local Fonts’ tutorial. You can download the zip folder here.
The ‘v6beta-fonts.zip’ tutorial folder contains an assets folder with an equirectangular file, and a CSS file. The ‘custom_fonts_beta’ is the output folder and contains the local fonts. The ‘project files’ folder contains the .p2vr project file and the .ggsk skin file. (Figure #1)
Figure #1: v6beta-fonts folder
Project Overview
In Pano2VR Version 6 custom fonts could be added by disabling ‘device default CSS fonts’ in the HTML Template window and adding in a CSS Style Sheet and fonts. In Version 6 beta this option is no longer available and has been superseded by a new workflow.
In this tutorial we will modify the custom_fonts_beta.ggsk skin by adding the ‘my_styles_new’ css file to the ‘embedded stylesheet’ window in the skin editor.
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Unzip the tutorial folder.
2. Open the project file ‘custom_fonts_beta.p2vr’
Note: make sure you open the file into the Pano2VR.6.1.2aBeta.app
3. Click on the Edit Skin button to open the skin. You will notice that there are some new assets in the Canvas Properties panel including ‘Embedded Stylesheet’ (Figure #2)
Figure #2: Skin with Canvas Properties, Embedded Stylesheet element
4. Click on the ‘Live Preview’ button to see the current state of the skin output. There is some styling, ie visit our website, implemented by styling applied directly in the text box. Each text box also has a CSS Class defined in the Properties: Advanced: panels but these aren’t showing in the preview. (Figure #3)
Figure #3: Live Preview showing unstyled text areas
5. Close the Live Preview and click in the blank space below the elements in the Tree to return to the Canvas Properties. Click on the pencil next to the Embedded Stylesheet: entry to open the ‘Enter Value’ window. (Figure #4)
Note: you can resize the window to see all of the text
Figure #4: Embedded Stylesheets; Enter Value window
6. Open the ‘my_styles_new.css’ file into a word editing application and select all of the text and copy it. (Figure #5)
Figure #5: CSS file open in a text editor, selected and copied
7. In the Enter Value window select return a couple of times to start a new line and paste in the text copied from the CSS file. (Figure #6)
Note: I’ve styled it a bit in the window to make it look neater :-)
Figure #6: Enter Value window with new stylesheet
8. Select ‘OK’ to close the window. Click on the ‘Live Preview’ button to view the text with the applied fonts and styles. (Figure #7)
Figure #7: Live Preview with stylesheet applied via embed.
9. Save and close the skin, save and re-publish the project and you are done.
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.
