Formatting with CSS
Elements within the Skin Editor can have CSS styles applied to them. For instance, you can create rounded borders for a map element and format text in text boxes. You can either create an external CSS file or edit the HTML document directly.
In a skin elements’s Advanced parameters, there are two fields:
- CSS classes
- CSS styles
You can easily format text by creating an external CSS document or adding CSS classes directly to the outputted HTML document. CSS styles can be added to override the existing styles.
Using CSS Styles
CSS styles can be added to skin elements. An example would be for the Maps element; CSS styles can be used to round the element’s corners:
Add a Map element to the canvas.
Add the border property to the CSS styles field:
Expand on that by adding more properties inline:
border-radius: 5px; border-style: solid; border-width: 5px; border-color: #0080ff
If CSS classes have also been added, then the styles here would override the styles defined in the class.
✭ Styles will not be visible in the Canvas but can be previewed in the Live Preview.
Formatting Text with CSS Classes
In a skin you may wish to have a little more freedom in styling tooltips, labels, popup texts. This freedom can be achieved using CSS.
Just the name of the class or style needs to be added. Do not include the period,
.. Multiple classes can be added to the fields, separated by spaces.
✭ Classes will not be visible in the Canvas or Preview. You can only view the changes on output.
If you are using an external CSS file, add its path to the normal template’s parameters:
You may also add the CSS directly to the HTML file outputted by Pano2VR.
If you are specifying classes for HTML tags, be sure to remove them from the HTML file in order to override them.