Using CSS Classes

Q&A about the latest versions
Post Reply
User avatar
Hopki
Gnome
Posts: 9511
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Using CSS Classes

Post by Hopki » Thu Feb 23, 2017 11:05 pm

You can add CSS classes directly in the HTML page or use a separate style .css file.
This lets you format the text in text boxes, bold, italic and even a drop shadow.
I will be using the attached file so please download as I will be referring to this.

CSS.zip
(14.78 KiB) Downloaded 191 times
Open the attached project and publish.
You will see there is a css file that you can open with a text editor, notepad for Windows or TextEdit for Mac.

It contains the CSS for different classes:

Code: Select all

.textbox1{
   			text-shadow: 1px 1px 2px #FF0000;
			font-family: "Times New Roman";
    			font-size: 18px;
			}

.textbox2{ 			
			font-family: "Comic Sans MS";
			font-weight:bold;
    			font-size: 14px;
			}

.textbox3{ 			
			font-family: "Arial Black";
			font-style: italic;
    			font-size: 25px;
			}

Now the start of each style starts with a .textbox1, 2 and three.
These are what you enter in the skins text box CSS classes.
So a text box with CSS Classe textbox2 will have its text box formatted to Bold text and size 14 point.
Note at this stage the font face will not change.

This is because the HTML page has its own CSS and font. So to show different fonts you must remove this from the HTML page.
You are looking for and need to delete the highlighted code in the HTML page:

1.jpg
1.jpg (55.66 KiB) Viewed 2923 times

Open the project and the founts will also now change.

If you want to make a CSS file, you just need to open a basic text document add the code and then save with a file extension of .css.
Then under the HTML5 output select the HTML tab and then click the edit template button.
You then need to select the CSS document.

2.jpg
2.jpg (53.08 KiB) Viewed 2923 times

The name of the CSS can be anything you like as long as it has the CSS file extension as Pano2VR renames it in the output folder.
The different Classes can also be named anything you link as long as they start with a "." (dot) in the CSS document.
Remember you don't add the dot in Pano2VR skin editor, just the Class name.


You can also add the CSS Classes directly in the HTML page.
Using the code in the CSS document just copy and paste it directly in the HTML page shown below:

3.jpg
3.jpg (64.03 KiB) Viewed 2923 times

You still need to delete the CSS from the top of the page if you want to use a different font.
Regards,
Hopki

LionelD
Posts: 10
Joined: Tue Jan 31, 2017 9:08 am

Re: Using CSS Classes

Post by LionelD » Thu Feb 23, 2017 11:54 pm

UPDATED - SEE BELOW

Thank you very much, this is exactly what I asked for.

By the way, with 5.0.3 it appears the dialog box does not enable you to tell it where your CSS is; perhaps I don't know where to look. No problem with 5.1 beta that I downloaded today.

Regards
Lionel

UPDATE

Ok, after making several mistakes I have it working, so I'm very pleased with that.

I did notice an anomaly:
- I cannot edit the iBooks widget template, but I can edit normal.ggt, don't know if it's me or something else. If you are using the iBooks widget template, attempting to edit it gives you the "Template Parameters" dialog box - the one you can use to provide an image for Default.png.

Is there a work-around other than editing the generated .html file?

I did my first test (the one that worked, above) with 5.1 beta Pro, but subsequent testing with Standard gave me the same result when attempting to use CSS with the iBooks widget template.

Very good to see that the user-defined CSS is incorporated with a link rather than being copied inline.

Regards
Lionel
Last edited by LionelD on Fri Feb 24, 2017 1:32 am, edited 1 time in total.

User avatar
360Texas
Moderator
Posts: 3351
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Re: Using CSS Classes

Post by 360Texas » Fri Feb 24, 2017 1:06 am

? What font style does the visitor see IF they not have for textbox2 "Comic Sans MS"

Code: Select all

font-family: "Comic Sans MS";
			font-weight:bold;
    			font-size: 14px;
I just checked my PC Win10 default font list and the "Comic Sans MS" is not a resident font style.

Is there a way to specify a unique font set to be downloaded to the visitor computer for temporary use while viewing this project ?

IF the visitors computer does not have "Comic Sans MS" font set on their computer... is the textbox2 display BLANK ?

A possible answer might be to specify a "Font Family". or a uniform standard font style across all platform.

Just thinking out loud.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com

User avatar
jare
Posts: 355
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Re: Using CSS Classes

Post by jare » Fri Feb 24, 2017 10:15 am

Thanks a lot for this topic, very useful explanation.
Is there a way to specify a unique font set to be downloaded to the visitor computer for temporary use while viewing this project ?
This should be solved somehow using the @font-face CSS rule, that specify online or local fonts. I've tried to use it in pano2vr many times, but no result...

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

Re: Using CSS Classes

Post by Hopki » Fri Feb 24, 2017 1:32 pm

Hi Dave,
The part you delete from the head section, if your not using CSS Classes then don't remove it, just replace the font you want there.
This font will be used throughout the text boxes, hence why you have to remove it before you can see the fonts in the Classes.
Regards,
Hopki

wiso
Posts: 163
Joined: Wed Oct 26, 2016 6:52 pm

Re: Using CSS Classes

Post by wiso » Wed Sep 20, 2017 2:41 pm

hallo,
thank you for explaining.
i understand how to change the fonts for different boxes with the individual css sheet.

but if i want to change the basic font for the whole document. what is the easiest way? change it in "normal.ggt"?

thank you,
best regards,
wiso

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

Re: Using CSS Classes

Post by Hopki » Wed Sep 20, 2017 9:09 pm

Hi wiso,
Yes, I would make a copy of the Normal.ggt and rename it to Identify the font it will use.
Regards,
Hopki

wiso
Posts: 163
Joined: Wed Oct 26, 2016 6:52 pm

Re: Using CSS Classes

Post by wiso » Wed Sep 20, 2017 9:50 pm

good idea,
thank you,
best regards,
wiso

Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests