Sie sind nicht angemeldet.

with html5 player page css affects textfield elements

Ariel

Anfänger

  • »Ariel« ist der Autor dieses Themas

Beiträge: 45

Wohnort: Argentina

  • Nachricht senden

1

Dienstag, 6. Januar 2015, 13:53

with html5 player page css affects textfield elements

I have a tour that uses textfield plugin to show tour title.
When the browser uses HTML5 player, the title looks weird. I figured out that the h1 css property from the page where the tour is embeded is affecting the [h1] from the textfield when it is using HTML5 player... doesn't happen -of course- with the flash player.

Example (Disable Flash so it uses HTML5 player!):
this tour shows the title with a white background and uppercase characters: http://www.spinattic.com/tour.php?id=325
And this tour is exactly the same as before but embeded in a different page: http://www.spinattic.com/tours/325

The difference between both pages is that tour.php uses main.css for the styles of the page. Here we have properties for H1. When I remove these properties, the [h1] from the tour looks good.

I didn't test it but I'm sure it'll be the same for every html tag used with textfield like [h1] [h2] [h3] [p] [a]... and styled in the page CSS


I think krpano html5 textfield shouldn't be affected by css styles of the page where the tour is embeded. Is there a quick solution to this that doesn't makes me change the css of my pages?
Is this a fix that krpano can do in future versions?

thanks!
Ariel M.
Build and Customize your virtual tours with Spinattic
www.spinattic.com

My profile in Spinattic

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

2

Dienstag, 6. Januar 2015, 22:34

I don't think textfield is supporting h1 h2. See example: http://www.krpano.com/examples/textfield/

As stated in documentation: For equal results in Flash and HTML5 only very simple html formating code should be used (source: http://krpano.com/plugins/textfield/#attributes

So I think you should change your code:

Quellcode

 
1
2
3

<data name="toptitlesCSS">
h1{font-size:18px;font-family:Arial;color:#ffffff;} h2{font-size:14px;font-family:Arial;color:#ffffff;} p{font-size:12px;font-family:Arial;color:#ffffff; text-decoration:none;}
</data>

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

3

Freitag, 9. Januar 2015, 10:25

Hi,

the krpano html5 viewer output itself and so also the textfield is also just HTML/CSS - that mean when modifying the default CSS styles - it will be affected too from that.

To avoid such don't modify the default CSS style and using id, classes and selectors for the CSS styles.
Or use iframes - this way the pano page and the surrounding page are separated.

A real way to create separate CSS contexts would be 'Shadow Dom' - but this isn't available yet in all browsers and therefore not used by krpano.

Best regards,
Klaus

Ähnliche Themen