Context Menu and Hyperlink text CSS

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

Context Menu and Hyperlink text CSS

Post by Hopki » Sun Nov 24, 2019 11:31 pm

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 397 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;
	}
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 397 times

Regards,
Hopki

User avatar
Julien
Posts: 13
Joined: Sat Sep 28, 2019 7:05 pm

Re: Context Menu and Hyperlink text CSS

Post by Julien » Thu Dec 12, 2019 10:23 am

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
Pro version
Mac

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

Re: Context Menu and Hyperlink text CSS

Post by Hopki » Thu Dec 12, 2019 1:00 pm

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 33 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 33 times


Regards,
Hopki

User avatar
Julien
Posts: 13
Joined: Sat Sep 28, 2019 7:05 pm

Re: Context Menu and Hyperlink text CSS

Post by Julien » Thu Dec 12, 2019 4:08 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
Pro version
Mac

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 5 guests