Styling Text with CSS for a hotspot

Q&A about the latest versions
Post Reply
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

So I'm trying to style text for a hotspot using the CSS Styles option in the skin editor under the Advanced options but for some reason only the font-size property works. I'm trying to use the font-family property as well but it doesn't work.

I heard that you can create an external CSS document and style text with it but I have no idea what to put in this document. Does it have to have any html or just CSS rules for text. I tried this but still doesn't work:

p {
font-family: verdana;
font-size: 16px;
}

Thanks in advance!
duceduc
Posts: 43
Joined: Sun Dec 11, 2016 5:39 pm

Click on the link that reads 'Styling with CSS' in this post to create an external CSS.
viewtopic.php?f=6&t=13521#p56533
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Try this tutorial of mine "Styling Text with CSS and Local Fonts" it may give you some clarity around styling with CSS.

https://tonyredhead.com/pano2vr/styling-with-css

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

Hi Tony

Thanks a lot for the link. I actually found your tutorial yesterday and started going through it.

One thing is still not clear to me. If I want to include the actual font files (.eot, .ttf, .woff and .svg) in the folder Pano2VR generates, how do I link the css file to these font files so that the browser knows where to look for them?

Thanks for your help.

Bw
Greg
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Greg,

Are you using V5 or V6 app?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

Hi Tony

I'm using Pano2VR 6.0.3 for mac.

I tried following all the steps in your tutorial and I have been unsuccessful. I can style the text but the font type still remains unchanged (default I guess).

I'm using a mac so I'm thinking that maybe I should include several fonts (.ttf and .woff) as these are used by Firefox. I want to use the OpenSans bold and regular so I'm not sure what I shall put as a font family for both of them.

Any help appreciated.

Greg
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Have you checked "Disable default CSS font" in the HTML Template. You get to the template by clicking on the little spanner/screwdriver button in the HTMl output section.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

Hi Tony

I did disable it and still no good. There must be sth wrong with my browser because even I open the finished project you provided in the tutorial, the text is styled properly but the font type is not right (displaying as Times New Roman).
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

I think I know what the problem is.

When modifying the HTML5 Template file, I declared two types of fonts from the same family: Open Sans Regular and Open Sans Bold.

However, the CSS file only recognises one type. This is really confusing.

Greg
Grzesiek_R
Posts: 11
Joined: Wed Dec 21, 2016 11:48 am

Solved it! For some reason, when I was declaring the fonts in the HTML5 template, these were not included in the <head> section of my .html document.
Post Reply