Giter VIP home page Giter VIP logo

Comments (6)

Riernar avatar Riernar commented on August 10, 2024 1

That is indeed the case, and the K-Scaffold framework I used injected it's own import before mine, hence the problem.
I fixed that by re-ordering stuff and forgot to close this issue, sorry about the noise

from roll20-character-sheets.

nmbradley avatar nmbradley commented on August 10, 2024

Hi @Riernar

If I was going to make a guess, I would presume that the CSS validator on the VTT is rejecting, for some reason, your CSS font imports. For obscure, arcane, and frankly silly reasons, the Custom Sheet option in campaigns, and the sheet sandbox uses a slightly more permissive CSS validator in contrast with what is piped from github, through the microservice, and delivered to the VTT.

Things I would suggest:

  • Altering your font imports to use a single import.
  • Ensuring no fonts are being sourced from anywhere other than google fonts.
  • Ensuring that you're using the old google fonts reference methods.
  • Removing any comments or extraneous code from your css file.
  • Running your compiled CSS through a validator to ensure that nothing might be causing the error.

from roll20-character-sheets.

nmbradley avatar nmbradley commented on August 10, 2024

I will also note that often, but not always, CSS validation errors are thrown in the VTT, so I'd check your dev console when the sheet is loaded.

from roll20-character-sheets.

Riernar avatar Riernar commented on August 10, 2024

Hi Nic,

Thanks for the tips. I already checked the dev console, and found no error. Though I just found the <style> element that contains rolltemplate's CSS and indeed only the first @import is there. I'll investigate further to see what is causing the other two to be removed.

from roll20-character-sheets.

Riernar avatar Riernar commented on August 10, 2024

Sadly #11954 didn't fix it. If someone would be so kind as to re-open this issue (for some reasons I can't), that would be great for tracking.

As far as I can tell,

  • Ensuring no fonts are being sourced from anywhere other than google fonts.
  • Ensuring that you're using the old google fonts reference methods.
  • Altering your font imports to use a single import.
    Not possible with the kScaffold framework, but Scott C, the creator, never had issues due to that.
  • Removing any comments or extraneous code from your css file.
  • Running your compiled CSS through a validator to ensure that nothing might be causing the error.

I'm starting to think the Material+Symbol+Outline family contains a forbidden string, and cause its own line and the next line to be sanitized out.

from roll20-character-sheets.

Anduh avatar Anduh commented on August 10, 2024

Isn't the issue here that there can only be one font import statement? https://wiki.roll20.net/Character_Sheet_Development/CSS#Google_Fonts

from roll20-character-sheets.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.