
Try it after removing "&family=MedievalSharp" from the Font Import line. 'Tis a guess based on Roll20 article: https://wiki.roll20.net/Building_Character_Sheets
The important section is Google Fonts:
"NOTE: Do NOT use any fonts that contain eval
in the name (e.g. MedievalSharp
). That string (even when in the middle of a font name) causes security issues with Roll20 and the CSS will get thrown out completely."
Using your code without any edits, it appears to work. Here's the layout I get by putting that code into a custom game:
That is the layout I'd expect to see based on my reading of your css.
Hello Scott. It does'nt work because in my grid-template-area, I have make this :
/*PC wrappers*/.pc-principal {display: grid;gap: 1px;grid-template-columns: repeat(2, 50%);grid-auto-rows: minmax(50px, auto);grid-template-areas:"perso perso""carac health""bourse honneur""attributs affDiv""attributs carRace""resMag resMag""charge charge""competence competence";}
The "Santé" box (health in the grid-template-area) should be next to the "Caractéristiques" box (carac in the grid-template-area).
ah! sorry, the content of the carac section threw me because it looked placed correctly, missed that it was stretched out. The issue is that your tab control display has a higher specificity than the pc-principal styling, so it is forcing it to be display: block. To fix the issue, I'd change this section of your css:
/*PJ (PC) sheet*/
.charsheet .pc-principal,
.charsheet .pc-equipment,
.charsheet .pc-grimoire,
.charsheet .pc-necromancy,
.charsheet .pc-notes {
display: none;
}
.charsheet .tabstoggle[value="PC_principal"] ~ div.pc-principal,
.charsheet .tabstoggle[value="PC_equipment"] ~ div.pc-equipment,
.charsheet .tabstoggle[value="PC_grimoire"] ~ div.pc-grimoire,
.charsheet .tabstoggle[value="PC_necromancy"] ~ div.pc-necromancy,
.charsheet .tabstoggle[value="PC_notes"] ~ div.pc-notes {
display: block;
}
to be this:
.charsheet .tabstoggle:not([value="PC_principal"]) ~ div.pc-principal, .charsheet .tabstoggle:not([value="PC_equipment"]) ~ div.pc-equipment, .charsheet .tabstoggle:not([value="PC_grimoire"]) ~ div.pc-grimoire, .charsheet .tabstoggle:not([value="PC_necromancy"]) ~ div.pc-necromancy, .charsheet .tabstoggle:not([value="PC_notes"]) ~ div.pc-notes { display: none; }
And apply the same logic to all your other display controls.
This will ensure that your tab display logic will only override the display setting of that tab's content when it needs to be hidden.
Also, for your grid setup, I'd recommend using 1fr instead of 50% for your column widths. This will function nearly identically, but will take the size of your gap into account as well.