Styles and templates

The WP-Pano by default contains 6 styles of hotspots and the same window templates that can be used depending on what content you want to open in panorama. So, for example, to display a single photo better fit the hs_photo hotspot style with the "thumbnail" window template. In this case, as a photo will be attached to the thumbnail and the caption will be the text of the post.
The WP-Pano support any combination of a hotspot style and a window template in the settings for each post type are registered in the WordPress.
Despite the fact that WP-Pano allows you to use such types as "pages" and "media" and attach them into panoramas, however it is recommended not to use them except when you sure that it is absolutely necessary.

Hotspot styles

All hotspot styles are contained in the wp-pano.xml file in the xml folder.
Example of the hotspot style:

After open a panorama hotspots will be load with styles that was selected in the WP-Pano settings page. For all hotspots will be added event onclick="wppano_openpost( post_ID );".
Also will be added properies Post_ID, post_title with the post title, and post_thumbnail with url to the post thumbnail (if it exists, or null). You can use properties in hotspot style like this: onhover="showtext(get(post_title));"
If you have style hotspot event "onclick", than the WP-Pano will add action wppano_openpost( post_ID ) to begin event. This behavior can be used, for example, to stop autorotation of a panorama after post opened: onclick="set(autorotate.enabled, false);"
After a hotspot have loaded, event "onclick" will be looks like: onclick="wppano_openpost( post_ID ); set(autorotate.enabled, false);"

Window templates and css

Window templates are contained in the WP-Pano templates folder and in many ways similar to the work of a single template a WordPress theme.

Example: standard.php template

In addition to the standard window template for display a content of posts, there are also templates for displaying photo galleries, longread texts, and others.

In the style.css file (in the WP-Pano plugin folder) you can modify #pano div for modify the virtual tour container.
Class wppano_wrapper it is container for a window templates, also it is background.

Your own styles

For create your own unique design you should modify css-file, xml file with hotspot styles and/or window templates. In order not to lose them in the next update the WP-Pano plugin, you need create the wp-pano folder in the your active theme folder and copy there files, that you need modify or add new (for window templates).
For fully independent design recomended to create wp-pano folder in the your theme folder and copy there img, xml and templates folder with all files, also copy the style.css from the WP-Pano plugin folder.

Structure of files:


This is the structure of the plugin WP-Pano will search for style files and templates in your theme folder.

If the same template name in the templates folder of the plugin and themes, priority will be given to the file from the theme.
If WP-Pano does not find the style.css or wp-pano.xml file in the respective folders of the theme, it will be get the original files from the plugin folder.

Thus, if you need to change the styles of hotspots, you need to copy the xml folder from the plugin folder to the wp-pano folder in your theme. You can then edit the file wp-pano.xml and the changes will immediately take effect.