Public preview fade out effect removes spaces between paragraphs

Themes
1

Hi,

I have successfully set up a “fade out” effect for my public preview CTA.

It works fine but I’m struggling to solve an issue with how the text is displayed: the spaces between my paragraphs are missing (see picture).

firefox_Z3gCthDHNQ
firefox_Z3gCthDHNQ1232×710 248 KB

Below is the code for the content-cta.hbs file located in the partials folder:

<div class="fadeout">
    {{{html}}}
</div>
<aside class="gh-post-upgrade-cta">
    <div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
        {{#has visibility="paid"}}
            <h2>This post is for paying members only</h2>
        {{/has}}
        {{#has visibility="members"}}
            <h2>This post is for members only</h2>
        {{/has}}
        {{#has visibility="tiers"}}
            <h2>This post is for members on the {{tiers}} only </h2>
        {{/has}}
        {{#if @member}}
            <a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Upgrade your account</a>
        {{else}}
            <a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
            <p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
        {{/if}}
    </div>
</aside>

Below is the custom CSS in screen.css:

    /* Public Preview Fading Effect */
    .fadeout {
        -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
        mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    }

Any idea what could cause the missing spaces between paragraphs?

Thanks for your help.

2

I ultimately solved the issue by making the following changes:

<div class="fadeout">
    <div class="fadeout-content">
        {{{html}}}
    </div>
</div>
<aside class="gh-post-upgrade-cta">
    <div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
        {{#has visibility="paid"}}
            <h2>This post is for paying members only</h2>
        {{/has}}
        {{#has visibility="members"}}
            <h2>This post is for members only</h2>
        {{/has}}
        {{#has visibility="tiers"}}
            <h2>This post is for members on the {{tiers}} only </h2>
        {{/has}}
        {{#if @member}}
            <a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Upgrade your account</a>
        {{else}}
            <a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
            <p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
        {{/if}}
    </div>
</aside>

And the CSS code:

   /* Public Preview Fading Effect */
    .fadeout {
        -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
        mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    }

    .fadeout-content p {
        margin-bottom: 1.5em;
    }
2 Likes
3

Thanks a lot! The problem is that if the preview is long, the fadeout applies to the whole preview. I’d like the fadeout to apply only to the last paragraph of the preview. Can you help?

4

Hey,

No worries! My apologies for the delayed reply.

I reworked the CSS and this new version should solve this:

/* Public Preview Fading Effect for Last Paragraph */
.fadeout-content p:last-child {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    margin-bottom: 1.5em; /* Ensure consistent spacing */
}

/* Reset other paragraphs to prevent unintended effects */
.fadeout-content p:not(:last-child) {
    -webkit-mask-image: none;
    mask-image: none;
    margin-bottom: 1.5em; /* Ensure normal paragraph spacing */
}

Let me know if that works for you.

1 Like
5

Thanks @dreamburger! It works with the Ghost Source theme but not with my custom theme. Do you know what I need to adapt in my custom theme?