Pano2VR 5 and CSS Styles

[Hopki]

Hi one and all,
If you have been prodding around in the skin editor you may have noticed that when you select an element you have under the Advanced tab CSS Classes and CSS styles.
Well for now looking at just styles you can use CSS code to add some extra visual enhancements.

If you select the map element this has no way of adding a border or radius. So what you would do is add a rectangle element and make the map a child of this.
You could then give it a border and rounded corners etc. However with CSS you can do this directly in the map element.
I get all my code from the W3Schools website http://www.w3schools.com/css/
Example:
Add a Map to a skin.
In the W3Schools website look down the left hand side for Rounded Corners.
Under the first example you will see: border-radius: 25px;.
Copy and paste into the map elements CSS Styles text field but change to 10px.
Click the Live Preview button or publish the project and you will see the Map now has rounded corners.

Now go back to the W3Schools website and look for CSS Borders.
Under the first example you will need to copy and paste both border-style: solid; and border-width: 5px;.

Back in the skin and under the CSS Styles for the map add the code. Just leave a space in-between each peace of code so it will look like this:

Code: Select all

border-radius: 10px; border-style: solid; border-width: 5px;

Now when you preview or publish you will see the Map now has rounded corners as well as a 5px border.

You can add further code: border-color: #98bf21; to specify colour, just copy and paste and add to the end of the code string, remembering to leave a space.
You will now have a lime green border.

Now have look at the CSS3 Shadow Effects.
This will allow you to add a drop shadow to the Map or a text box/rectangle as well as shadow effect to text in a text box.
The page starts off with text effects then further down shows the drop shadow effects for boxes.

Add a text box to your skin, now on the W3Schools website look for CSS3 Gradients.
Under the first example you can add to the CSS Styles to your text box:

Code: Select all

background: -webkit-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue);

You will need to add both so you get the same effect in Safari, Chrome and Firefox.
Preview or Publish and you will see a white background?????

However in the text box properties deselect Background: Enabled.
Now Preview, you will see the colours for the CSS background. Just change your text colour to white so it is clear to read.
Of course you can add the CSS to the text box to give it a drop shadow as well as all the other CSS tricks above.
Note: Not all CSS code will work with all elements.
Have fun,
Regards
Hopki

[soulbrother]

Many thanks for that explanations - very helpful !!

Please don´t stop to give more such hints and tutorials.

[DHogg]

Hi Hopki

Is it possible to use CSS to round the corners and add borders to images, it doesn't seem to work for me? I suppose I would effectively want the CSS to style a mask which then hides the corners of the image, rather than styling the image directly ...

It would be great if this were possible, as the only way I can get images with rounded corners at the moment is by using PNG images and rounding the corners in Photoshop ... but then the file sizes become silly ...

Thanks!

David

[Hopki]

Hi David,
It depends on how you are adding the images.
If using an external loader then no I would not use CSS.
It may be better to use a solid black screen tint and then you can add rounded borders with a black background with a JPG.

If they are images in the skin then you can use a rectangle that is slightly larger and then add rounded corners to that.
Regards,
Hopki

[DHogg]

Hi Hopki,

Thanks for the feedback

David

[Chu]

Hi one and all,
If you have been prodding around in the skin editor you may have noticed that when you select an element you have under the Advanced tab CSS Classes and CSS styles.
Well for now looking at just styles you can use CSS code to add some extra visual enhancements.
...
Have fun,
Regards
Hopki

Hey Hopki, the CSS Styles works great (pity the text entry field doesn't stretch with the window, it remains very small - same with most text entry fields)

So, how are the CSS Classes used?