search

Carpathias / tgce-restyler-5e3

Restyler for DnD5e 3.0
Other
4 stars 0 forks source link

issues when trying to make a seemless background #10

Closed Masonono closed 4 months ago

Masonono commented 4 months ago

when adding two images that should make one seamless image, a strange space occurs after changing the background color Untitled_Drawing Inverse 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 Bug report Don't be afraid to ask for clarification :)

Carpathias commented 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...

  1. Put the system in Light mode.
  2. Apply the header image you want to the sheet.
  3. Switch back to Dark mode. The header image from the Light mode will stick.
  4. Replace the dark mode header image with the transparent image in the modules folder.
  5. Apply the sheet body image you want.

Let me know what happens.

Carpathias commented 4 months ago

added a step to the above (4)

Carpathias commented 4 months ago

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.

Masonono commented 4 months ago

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.

Carpathias commented 4 months ago

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.

2024-04-15_20-38-08

Masonono commented 4 months ago

That is perfect, you are speedy with it!

Carpathias commented 4 months ago

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

Carpathias commented 4 months ago

Oh yeah, if you use that CSS, it will affect ALL sheets. If you just wanted to affect 1, then prepend it with this...

ActorSheet5eCharacter2-Actor-brc2v1IuwLEoGr93

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; }

Masonono commented 4 months ago

You're awesome! Thanks for the fix! And will patiently awaiting the update, take your time family and your wellbeing comes first -edit whoops

Carpathias commented 4 months ago

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.

Masonono commented 4 months ago

Thanks man I really appreciate it!

Carpathias commented 4 months ago

ActorSheet5eCharacter2-Actor-brc2v1IuwLEoGr93 .interactable.tab-details.flexcol

There needs to be a space in there. Just realized.

Carpathias commented 4 months ago

ActorSheet5eCharacter2-Actor-brc2v1IuwLEoGr93 .interactable.flexcol { background: url(../../../modules/tgce-restyler-5e3/assets/sheet-banner-onegod.png) no-repeat center / cover; }

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.