Skip to main content

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 an elements’s Advanced parameters, there are two fields:

  • CSS classes
  • CSS styles

Advanced parameters

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:

  1. Add a Map element to the canvas.

  2. Add the border property: border-radius: 10px;

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.

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.

If you are using an external CSS file, add its path to the template’s parameters:

Template Settings with added CSS file

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.

See also

2019-02-21 09:55:55