Garden Gnome Software

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.


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



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:



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

Is to centre the text in the Context menu.

Regards,
Hopki

Hi Hopki,

On the code I found the font-size not working for me. When looking into the 'pano2vr_player.js' I can adjust the font size from there and it works (line 407). Am I mistaking somewhere or is that the CSS code must be adjusted?

Julien

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


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.



Regards,
Hopki

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

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)