Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Help for print character sheet

1750063225

Edited 1750313172
Maïlare
Pro
Sheet Author
API Scripter
Hello, I have a problem to print my character sheet. I want to print it with 3 colour bar which represent the honor, the health and the god affinity. I have made this in my code to print the bar and don't print the cursor (made with checkbox), but it doesn't work. /* Health bar */ .jauge-sante {     height : 20px ;     width : 372px ;     margin-left : 18px ;     background : linear-gradient ( 90deg , rgba ( 1 , 255 , 0 , 1 ) 0% , rgba ( 255 , 128 , 0 , 1 ) 50% , rgba ( 255 , 0 , 0 , 1 ) 100% );     print-color-adjust: exact ; } input [ type = "checkbox" ] .sante-check {     opacity : 0 ;     width : 14px ;     height : 14px ;     position : relative ;     top : 5px ;     left : 6px ;     margin : 1px ;     cursor : pointer ;     z-index : 1 ; } input [ type = "checkbox" ] .sante-check + span::before {     content : "" ;     width : 14px ;     height : 14px ;     font-size : 14px ;             -moz-border-radius : 3px ;     -webkit-border-radius : 3px ;     border-radius : 3px ; } input [ type = "checkbox" ] .sante-check:checked + span::before {     content : "▼" ; } @media print {      @page { size : A4 portrait ; margin : 10mm ;}      body , html { background : white !important ; color : black !important ; }      .areas { display : block !important ; page-break-inside : avoid ; }      .page-break { page-break-before : always ; break-before : page ; }     /* resize logo */      div.logo { width : 75px !important ;}   /* hide elements */   button , .sheet-tab , .part-of-sheet-buttons , .export-pdf-btn { display : none !important ; }   input.affDiv-check , input.honneur-check , input.sante-check { display : none !important ; } } And the result and the original sheet : How can I correct this ? Thanks
1750313180
Maïlare
Pro
Sheet Author
API Scripter
Up
1750347392
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The issue is that the colors are defined by background colors. Background colors are not printed for web pages because browsers are programmed to save on ink if possible. The best way to accomplish this is to use the print-color-adjust css property on the elements that you specifically want to display background colors, images, etc. on.
1750348124
Maïlare
Pro
Sheet Author
API Scripter
Hello Scott. I have tried all the print-color-adjust parameters but it doesn't work.
1750350931
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
what element are you putting them on?
1750401621
Maïlare
Pro
Sheet Author
API Scripter
I put this in the css of the bars like in my code above