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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden