Small Headers and uncropped images

[Poetowiec]

Hi!

I'm making new layout and have problem with headers and images.
Headers are very small (H1 on screenshot) and images are pointed at center of the image (I don't want to cut it for face only).
Can I change it somehow?

Thanks in advance!

[sigrunixia]

Hi!

I'm making new layout and have problem with headers and images. Headers are very small (H1 on screenshot) and images are pointed at center of the image (I don't want to cut it for face only). Can I change it somehow?

Thanks in advance!

Hello!

The header is currently controlled by the default styling of your H1 in a theme. We are working on unbinding this, but in the interim, it can be styled with a CSS snippet.

.statblock.yourlayouthere .heading {
    font-family: var(--statblock-heading-font);
    font-weight: var(--statblock-heading-font-weight);
    font-variant: var(--statblock-heading-font-variant);
    line-height: var(--statblock-heading-line-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    letter-spacing: 1px;
    color: var(--statblock-heading-font-color);
  }

 .statblock.yourlayouthere h1.heading .statblock-heading .YAML-KEY {
    // Your Styles Here
  }

The YAML-Key would be whatever you named the H1 block in the layout editor.

Similarly, fixing the token image can be done with a css snippet.

.statblock.yourlayoutnamehere .image img {
    object-position: center top;
}

[Poetowiec]

Ok, I changed (for now) a bit headers in obsidian and it's better.
What about "avatars". Is there a way to move the part we can see without cutting whole picture?

[sigrunixia]

Ok, I changed (for now) a bit headers in obsidian and it's better.
What about "avatars". Is there a way to move the part we can see without cutting whole picture?

The second snippet I gave you should have taken care of that. If not, we'd need to look closer.

[Poetowiec]

Where can I change it? Sorry, I'm not into coding much...

[sigrunixia]

https://gist.github.com/sigrunixia/58ab19bf17da3797c494fe44415ab253

Here is a gist. Download the .css and place it into your .snippets folder.

Update the layout name as instructed, or remove it to be .statblock image img to apply to all layouts.

[Poetowiec]

Unfortunately it doesn't work. I changed name with dash, pasted .css in snippets and enabled in appearance.
It doesn't work even if I remove ".statblock.xx image img"