Header style

[viriatusX]

Hello @ItzNotABug ! How are you? I hope you can help me. I'm trying to apply the style to the "Header" component of the Ghost Editor. But without success. I have included this code to "newsletter.ejs" but it doesn't show well :(

Example of header component in Ghost site:

        .kg-header-card>picture>.kg-header-card-image {
    filter: brightness(.35);
    border-radius: 7px;
}
        .kg-card.kg-header-card.kg-v2 {
    border-radius: 8px;
}
        .kg-header-card.kg-v2 {
    position: relative;
    padding: 0;
    min-height: initial;
    text-align: initial;
    box-sizing: border-box;
}
        .kg-header-card {
    padding: 12vmin 4em;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
        .kg-header-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: min(6.4vmax, 120px) min(4vmax, 80px);
    background-size: cover;
    background-position: center;
    text-align: left;
}
        .kg-header-card h2.kg-header-card-heading, .kg-signup-card h2.kg-signup-card-heading {
    margin: 0;
    font-size: clamp(1.7em,4vw,2.5em);
    font-weight: 700;
    line-height: 1.05em;
    letter-spacing: -.01em;
}
        @media (max-width: 900px) {
    .kg-card.kg-header-card.kg-v2.kg-width-regular .kg-header-card-heading * {
        font-size: 40px;
    }
}
        .kg-header-card h2+.kg-header-card-subheading {
    margin: .6em 0 0;
}.kg-card.kg-header-card.kg-v2.kg-width-regular .kg-header-card-text {
    padding: 0;
}
        .kg-header-card-text.kg-align-center {
    align-items: center;
    text-align: center;
}.kg-header-card-content {
    width: 100%;
}
        .kg-header-card>picture>.kg-header-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
            pointer-events: none;}

[ItzNotABug]

Hey @viriatusX 👋, I was away for a while so couldn't get back.

---

How are you trying to add the header? Via a Post or directly in the custom newsletter template?

[viriatusX]

No worries! I have added this CSS to the custom template but it shows up wrong. Maybe there is more CSS that I don't know about to make it display well.

[ItzNotABug]

@viriatusX Could you show what you are trying to achieve and what is the actual result as you said it shows up wrong? Also, as you said, its possible that it is due to the CSS but it shouldn't be that trivial ig.

[ItzNotABug]

Closing due to inactivity. Reopen if you still have issues.

[viriatusX]

Sorry for the delay. Don't worry, it looks very complicated and requires a lot of CSS. I meant this: https://ghost.org/changelog/header-card-improvements/

The CSS is not in Ghosler and it looks horrible. I tried to copy the CSS but it didn't work.

On the other hand, is it possible to update Ghosler with a checkbox to include the Subtitle? https://forum.ghost.org/t/subtitles-in-newsletters-ghost-changelog/47949

Thanks

[ItzNotABug]

I see, thanks for the references. I could take a look over the weekend or the next week.

Regarding the subtitle, could you please create a new feat. req. issue. Would help for better tracking.

Thanks.

[ItzNotABug]

Since this issue is more towards css customisations & may not work as required due to table usage in newsletter and also not directly related to Ghosler, I am going to close this.