Context Menu and Hyperlink text CSS

[Hopki]

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 (159.97 KiB) Viewed 28196 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 (113.63 KiB) Viewed 28196 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

[Julien]

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

[Hopki]

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 (29.07 KiB) Viewed 27832 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 (93.25 KiB) Viewed 27832 times

Regards,
Hopki

[Julien]

Hi Hopki,

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

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

Julien

[trw]

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)

[AClauß]

Hello Hopki,

thanks for the great tutorial and the explanations. Unfortunately, I always have the problem that the background elements appear through the menu. Is there a way to increase the opacity of the menu background?

[Julien]

Hi Hopki,
Is it possible to add this non-clickable horizontal line to simply organize our tabs?
I found a way by using the <hr> tag, but the field is of course affected when mousing-over.

Edit: or, is it maybe possible to make a tab not clickable/permeable?

No big deal, just asking.
Thanks,
Julien

[Hopki]

Hi Julien,
Each entry in the context menu will add a separator bar, have you seen this forum post: viewtopic.php?p=65140#p65140
Regards,

[Julien]

Hi Hopki,
I’m confused, is it the right post you shared? It’s about logos in the context menu.

So far the separator bar is added with P2VR default entries, see my previous attachment “non-clickable line.jpg”. Not for each entry, or the ones we may want.

I’m fine in using the <hr> tag If there is another and non-clickable option, I’m up to it.

Code: Select all

<hr style="border-top: 1px solid black;">

Regards,
Julien

[Hopki]

Hi Julien,
The team looked at this and came up with a solution.

In the skin's CSS style sheet, you need to add:

Code: Select all

div:has(> span > hr):hover {
background-color: inherit !important;
}

So it looks like this:

1.jpg (31.7 KiB) Viewed 9512 times

Then in the context menu, menu list add

Code: Select all

<hr>

.
This will add the line.

2.jpg (15.58 KiB) Viewed 9512 times

Regards,