Change font on click

Q&A about the latest versions
Post Reply
Mattmatt21
Posts: 8
Joined: Fri Jan 31, 2020 5:23 pm

Hello, can I change the font on "Variable Changed" event? I need to make a list of buttons with a simple style, and selected button should have bold font. Text field font is determined in the CSS file.
User avatar
Hopki
Gnome
Posts: 13025
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
There's a couple of things you can do here.
You can use HTML formatting which can be used with a set value action.
Please see this website: https://www.w3schools.com/html/html_formatting.asp

As an example:
You can use a Set Value action using targeting a single text box with:

Code: Select all

<span style="font-family: Arial Black;">Your Text</span>
Or

Code: Select all

<span style="font-family: Arial;">Your Text</span>
You can also use other tags such as

Code: Select all

<b>This text is bold</b>

Code: Select all

<i>This text is italic</i>
That said you can use the above is in the text logic blocks.

If you want to add more elaborate text formatting you can use CSS and the style sheet.
And swop text boxes, you can set up say Google Fonts: please see this doc: https://ggnome.com/doc/pano2vr/6/html-css/
In the Skins style sheet then use a variable to hide and show different text boxes.


The attached project is using:
Font1 font-family: 'Zhi Mang Xing', cursive;
Font2 font-family: 'Sigmar One', cursive;
Font3 font-family: 'Work Sans', sans-serif;
Font4 font-family: 'Molle', cursive;
Font5 font-family: 'Indie Flower', cursive;

The style sheet looks like this:

Code: Select all

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

.ggskin.font1 {
	font-family: 'Zhi Mang Xing', cursive;
	font-size: 14px;
	}

.ggskin.font2 {
	font-family: 'Sigmar One', cursive;
	font-size: 14px;
	}

.ggskin.font3 {
	font-family: 'Work Sans', sans-serif;
	font-size: 14px;
	}

.ggskin.font4 {
	font-family: 'Molle', cursive;
	font-size: 14px;
	}

.ggskin.font5 {
	font-family: 'Indie Flower', cursive;
	font-size: 14px;
	}
Regards
Hopki
Attachments
fonts.zip
(13.63 KiB) Downloaded 141 times
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/
Mattmatt21
Posts: 8
Joined: Fri Jan 31, 2020 5:23 pm

Thank you for the fast and very detailed reply! These tips have opened a lot of possibilities for me. You are the best, Hopki! :D
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Here's an example using CSS, a Variable and a Text Box with a Logic Block: https://p2vrtutorials.s3-ap-southeast-2 ... index.html

image-previewgra31.jpg
image-previewgra31.jpg (566.02 KiB) Viewed 3176 times

In this example you can hover over each button and as you do so the background color changes from white to blue, the font changes from Gotham Book to Gotham Black and the font color changes from black to white. This is done in CSS.

Clicking on a button sets a Variable "click_status" to the name of the button. This changes the background color to green and sets the respective image Alpha to 1.000. This is done by changing the assigned Class in the Text Box Logic Block.

Alternatively clicking either image has the same effect.

Clicking outside of the buttons or images or clicking on the "x" resets the variable.

There is a textbox showing the current Variable text.

I'm going to write it up into a tutorial.

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/
Mattmatt21
Posts: 8
Joined: Fri Jan 31, 2020 5:23 pm

Thank you for example, waiting for tutorial :)
User avatar
Hopki
Gnome
Posts: 13025
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Speaking with Christoph we have come up with a JavaScript method to change the class of a text box in the skin.
As this is a skin project please see: viewtopic.php?f=13&t=14232
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: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Mattmatt21,

The tutorial is online at https://tonyredhead.com/pano2vr-little- ... s-variable

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