Change font on click
-
- 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.
- 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:
Or
You can also use other tags such as
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:
Regards
Hopki
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>
Code: Select all
<span style="font-family: Arial;">Your Text</span>
Code: Select all
<b>This text is bold</b>
Code: Select all
<i>This text is italic</i>
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;
}
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/
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/
-
- 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!
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
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
Here's an example using CSS, a Variable and a Text Box with a Logic Block: https://p2vrtutorials.s3-ap-southeast-2 ... index.html
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/
-
- Posts: 8
- Joined: Fri Jan 31, 2020 5:23 pm
Thank you for example, waiting for tutorial
- 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
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/
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/
Hi Mattmatt21,
The tutorial is online at https://tonyredhead.com/pano2vr-little- ... s-variable
cheers,
Tony
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/