Context Menu and Hyperlink text CSS

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Hi can modify the Skins Style Sheet to not only modify the Text but also hyperlinks and the right button click context menu.
The below shows a text link and the context menu using the colours from the Garden Gnome website.

context.gif
context.gif (159.97 KiB) Viewed 5043 times

Here is the CSS, copy and paste this into your own skin, then just change the attributes.

Code: Select all

.gg_contextmenu {
	border-radius: 10px;
	overflow: hidden;
	background-color: #613e0c !important
	}
.gg_context_row a { 
	color: white !important
	}
.gg_context_row { 
	color: white !important
	}

.gg_context_row:hover { 
	background-color: #a8c543 !important
	}
	
.ggskin { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	}

.ggskin a {
	color: #613e0c;
 	text-decoration: none;
	}
	
.ggskin a:hover {
	color: #a8c543;
  	text-decoration: underline;
	}
	
.gg_context_row {
	text-align: center !important;
}



The CSS classes starting with .gg are for right button click context menu.
The first class: .gg_contextmenu
• border-radius: 10px; The higher the number the more curved the border
• overflow: hidden; Stops the hover colour going outside of curved corners
• background-color: #613e0c !important This sets the background colour, in this case, the hex value for brown

The next class: .gg_context_row a
• color: white !important This sets the colour of the hyperlink text colour

The next class: .gg_context_row
• color: white !important This sets teh text colour

The next class: .gg_context_row:hover
• background-color: #a8c543 !important This sets the colour of the line colour on hover. In this case its the green

The next part of the CSS, .ggskin is for the text in the skin.

a {
• color: #613e0c; This is the colour
• text-decoration: none; This removes the underline normally associated with hyperlink text

a:hover {
• color: #a8c543; The text colour on hover
• text-decoration: underline; This puts in the underline normally associated with hyperlink text

For the colours you can use the colour picker in Pano2VR, just copy and paste the hex value:

picker.png
picker.png (113.63 KiB) Viewed 5043 times


The last part of teh CSS:
.gg_context_row {
text-align: center !important;
}

Is to centre the text in the Context menu.

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
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Hi Hopki,

On the code I found the font-size not working for me.

Code: Select all

.ggskin { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	}
When looking into the 'pano2vr_player.js' I can adjust the font size from there and it works (line 407).

Code: Select all

f+="font-size: 9pt;";f+="opacity : 0.95;";g.setAttribute("style",f);g.setA...
Am I mistaking somewhere or is that the CSS code must be adjusted?

Julien
Mac, pro version always updated :)
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Julien,
Do you have any other code that could break the CSS as this does work ok?
Also, have you set the size in the text box? If so this overrides the CSS size.
Example:
Stylesheet

1.png
1.png (29.07 KiB) Viewed 4679 times

The next screenshot shows the left text box using the size as set in the text box, I am using size 14px.
The right text box is using the default text setting so is now using the CSS, in this case, 5px.

2.png
2.png (93.25 KiB) Viewed 4679 times


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
Julien
Posts: 55
Joined: Sat Sep 28, 2019 7:05 pm

Hi Hopki,

Ohh I have missunderstood this font-size CSS was going to affect the Context Menu, but it is made for the Skin :oops:

So, what may the stylesheet inputs to affect the Context Menu:
- text size
- border
- box shadow?

I've tried a couple inputs into the .gg_contextmenu.. but I have still lot to learn...
At the moment to affect the above tasks, I edit the 'pano2vr_player.js', re-doing them after re-generating the project, and sometime forgetting to do :lol:

Julien
Mac, pro version always updated :)
User avatar
trw
Posts: 24
Joined: Sat Mar 24, 2012 2:31 pm
Location: Norddeutschland (North of Germany)

Hi Hopki.

Thanks for this short "tutorial". :-)

I just found/saw it today and it helped me a lot!
(I've wanted to change the hover-color of the context-menu for a long time, but never found the right solution)
_____________________
Freundliche Grüße, trw.
Greetings from trw.
Post Reply