Help Making a Responsive Skin Please

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
LionelD
Posts: 10
Joined: Tue Jan 31, 2017 9:08 am

Hi, I'm looking for some help making a responsive skin, please. I consider myself a newbie; I've been working my way through the skin editor, learned a lot, but now I need some help, please.

I'm going to do this in stages rather than one big leap; step 1 has to do with using CSS to style text elements in the skin. The attached skin (simplex_v5_autohide CSSV16) started as simplex_v5_autohide.ggsk, one of the built-in skins in V5.1 beta; I have modified it quite extensively. I am running 5.03 in trial mode.

I've stripped out a whole lot of the elements to make it easier to concentrate on making the controller responsive. In this version, I am using CSS to style the controller text elements. They render as expected in P2VR, but the CSS for each text element is repeated inline, with the text (so if I have 20 pieces of text, the styling repeats 20 times). For example, the text for the Zoom In button is styled as follows:

<p style="font-size: 1em; margin-top: 0em; margin-bottom: .15em; color:white; text-shadow: 2px 2px 0px black;">Zoom In</p>

The actual "Zoom In" text is right at the end of this text string. This approach creates an effect that's very similar to the original skin, but uses one instance of each text element - all the text elements whose names end in _white in the original skin are not required any more. The key piece of CSS styling is the "text_shadow" bit. If you translate the text in a skin, that means you only have to change one piece of text for each element in the controller rather than 2, you don't have to worry about keeping those 2 pieces of text the same (Ok, I'm oversimplifying multi-lingual support quite a lot).

While I'm happy with the way this renders in P2VR output, my current approach is a nightmare for maintenance and consistency. If I want all the controller text elements to have the same style, I have to make sure my CSS styling is the same across all those elements; a change in any one must be applied to all the others, completely consistently, and I have to do that one element at a time.

The Advanced tab in the skin editor suggests there's a smarter way, by using CSS classes and/or CSS Styles, but I cannot get this to work. If it works as I'm hoping, there would be one specification for the styling, and each text element would use that specification. If you want to change the styling, you would simply edit the specification, and all the elements that use that styling would get the changes simply by re-creating the P2VR output - and what a bargain that would be!

I expect I'd have to re-write what I have now, but that's ok. I have working HTML (attached .txt file - copy the text and drop it into the W3C Try It editor to see what it does) that shows one way to accomplish this - but I can't figure out how to make this work in P2VR.

I have quite a few panos going into the same iBook as independent widgets (they are not a tour), so if there is a way to use a common stylesheet would help me a lot.

Can anybody help me, please?

Regards
Lionel

PS: I'm going to include my HTML inline in case this forum software does not like what I did. There are several ways to apply a single style to multiple pieces of text; this is an example of CSS Style Selectors. I would have to re-write my inline styling (above) to work like the example below.

<!DOCTYPE html>
<html>
<head>
<style>
.topictitle {
font-size: 1em;
margin-top: 0em;
margin-bottom: 0em;
text-decoration: underline;
}
.topictext {
font-size: .9em;
margin-top: 0em;
margin-bottom: .15em;
}
</style>
</head>
<body>

<p class="topictitle">Heading 1</p>
<p class="topictext">Text text text text text text Text text text text text text Text text text text text text Text text text text text text </p>
<p class="topictitle">Heading 2</p>
<p class="topictext">Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text </p>

<p class="topictitle">Heading 3</p>
<p class="topictext">Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text Text text text text text text </p>

<p>This paragraph does not use the above styles.</p>

</body>
</html>
Attachments
simplex_v5_autohide CSSV16.ggsk
(37.78 KiB) Downloaded 177 times
Post Reply