external css not working in 6.1 beta?

Q&A about the latest versions
Post Reply
multimaps360.19
Posts: 23
Joined: Thu Apr 25, 2019 5:23 pm

Hello,
it's possible to include external css file to a tour in the new 6.1 beta version ... but it's not working. If I output the same project in 6.0.6 with the same css file, it works fine.
Why?
Thanks for information,
Alex
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Alex,
Pano2VR 6.1 is different from all the other previous versions of Pano2VR as the CSS is now in the skin.
I am going to assume you mean fonts, as if you just add an external file with formatting then this will work.
In the skin editor you will see the default font used:

Code: Select all

.ggskin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}
so ggskin is the class so any test boxes etc will use the above fonts.

The best thing to do is to copy the style sheet here and stack the class.
As an example, if you want to create a class for tooltips, then the class would be .ggskin.tooltip.

If you want to use only fonts in an external style sheet then in the skin change it to

Code: Select all

.ggskin {}
In the next beta, beta 4 you will be able to just delete the code in the skin.


The advantage of adding your style to the skin is if you do not specify a class you end up with the browser default font.
If you add it to the skin and keep the default class as well as add your own then text boxes without a class will still use the skin default and not the browser.

Example:

Code: Select all

.ggskin { 
               font-family: Verdana, Arial, Helvetica, sans-serif; 
               font-size: 14px;
               }

.ggskin.tooltip {
               font-family: "Times New Roman", Times, serif;
               }

So for tooltip text boxes, you enter the class tooltip
Any others will use the ggskin class.

Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
multimaps360.19
Posts: 23
Joined: Thu Apr 25, 2019 5:23 pm

Hello Hopki,
thanks a lot - it works fine ...

I only thought I can use my old css file because the possibilty to include external css is still available in html ...

Alex
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Alex,
Yes, you could still use it, but as said you would need to use, ggskin {}, in the skin before it would read it.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Martin,

How would I go about adding the following CSS. I've tried a couple of things but I can't get it working.

Code: Select all

.myButton {
	-moz-box-shadow: 4px 3px 7px -4px #ff0000;
	-webkit-box-shadow: 4px 3px 7px -4px #ff0000;
	box-shadow: 4px 3px 7px -4px #ff0000;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f5c4c4), color-stop(1, #bd2a2a));
	background:-moz-linear-gradient(top, #f5c4c4 5%, #bd2a2a 100%);
	background:-webkit-linear-gradient(top, #f5c4c4 5%, #bd2a2a 100%);
	background:-o-linear-gradient(top, #f5c4c4 5%, #bd2a2a 100%);
	background:-ms-linear-gradient(top, #f5c4c4 5%, #bd2a2a 100%);
	background:linear-gradient(to bottom, #f5c4c4 5%, #bd2a2a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5c4c4', endColorstr='#bd2a2a',GradientType=0);
	background-color:#f5c4c4;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #fa0303;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:6px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #092b04;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bd2a2a), color-stop(1, #f5c4c4));
	background:-moz-linear-gradient(top, #bd2a2a 5%, #f5c4c4 100%);
	background:-webkit-linear-gradient(top, #bd2a2a 5%, #f5c4c4 100%);
	background:-o-linear-gradient(top, #bd2a2a 5%, #f5c4c4 100%);
	background:-ms-linear-gradient(top, #bd2a2a 5%, #f5c4c4 100%);
	background:linear-gradient(to bottom, #bd2a2a 5%, #f5c4c4 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd2a2a', endColorstr='#f5c4c4',GradientType=0);
	background-color:#bd2a2a;
}
.myButton:active {
	position:relative;
	top:1px;
}
cheers,

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/
Post Reply