Closed Masonono closed 4 months ago
The character sheet handles the header image differently in Dark mode. It actually applies the image as a ::before CSS element, and as a different size.
Try this...
Let me know what happens.
added a step to the above (4)
I have been looking at this and trying to accomplish what you're wanting, and it is proving quite the challenge. The fact is, the System did not design the HTML and CSS that builds the character sheet to accommodate what you're wanting in any way. The header image and sheet body image both have different CSS properties driving the way the behave in either light or dark mode, and how they behave when the sheet is resized.
I'm not giving up on this, but it is going to take me some time to figure out if I can do it or not. I would like to, i like the idea of what you're going for.
Initially, I am thinking of seeing if I can bypass the whole 2 image header/body aspect and just blank those, and apply an image to the entire sheet itself.
Thanks for putting alot of effort into this me and a player of mine spent the better half of the day troubleshooting I don't often get sucked into trying to solve something like this but thanks again for the effort.
I made some headway. I'll keep working at it. I have to make sure that it plays nice with all of the other settings.
That is perfect, you are speedy with it!
I did that with Custom CSS mod, which is what I use to figure out the CSS I need to target with my mod. Basically I went into my mod and replaced the header and background images with the transparent image in my module assets folder (default folder). I then put the following into Custom CSS mod.
.interactable.tab-details.flexcol { background: url(../../../**modules/tgce-restyler-5e3/assets/sheet-banner-onegod.png**) no-repeat center / cover; }
Just replace the bold part with your file path. You could also use a web link (https://website.com/filePathStuff). In that case you would replace everything between the parentheses.
Just as a workaround if you wanted to go that route for now. It will likely be the better part of two weeks before I push out an update. You know, family stuffs and that whole real job thing.
If you have any questions, let me know.
-Carp
Oh yeah, if you use that CSS, it will affect ALL sheets. If you just wanted to affect 1, then prepend it with this...
where this part brc2v1IuwLEoGr93 would be the ID of your actor. Need to replace that. So....
#ActorSheet5eCharacter2-Actor-brc2v1IuwLEoGr93.interactable.tab-details.flexcol { background: url(../../../**modules/tgce-restyler-5e3/assets/sheet-banner-onegod.png**) no-repeat center / cover; }
You're awesome! Thanks for the fix! And will patiently awaiting the update, take your time family and your wellbeing comes first -edit whoops
url(../../../modules/tgce-restyler-5e3/assets/sheet-banner-onegod.png)
That's what you need to replace if using internal file, just the bold. The 'code' text above didnt translate the ** into bold text like i wanted.
Thanks man I really appreciate it!
There needs to be a space in there. Just realized.
Sorry. The CSS I gave you before only had the whole sheet background image affect the main details tab. All of the other tabs like spells/inventory etc.. werent getting it.
Updated CSS text above.
BTW, i have this working in the new version. Working on a few other things, but release should be out soon.
when adding two images that should make one seamless image, a strange space occurs after changing the background color
Two images made from a single image that should line up perfectly on the character sheet adds a strange space and also darkens the header image after the background color change
Don't be afraid to ask for clarification :)