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!

    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: https://krpano.com/plugins/textfield/#attributes

    So I think you should change your code:

    Code
    <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>

    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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login