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?

7

I now have a strange effect that duplicates the paragraph on which there is the fadeout. I don’t think it was like this last time, as if something had changed, but I haven’t changed the code.

8

It’ll be easier to help with an example link.

9

Hi @Cathy_Sarisky and @dreamburger.

Here you can see that it does not work well on my blog :slight_smile:

10

It looks like your blog is missing some styles for the CTA block. Is that the i18n source fork, or something else? You may want to grab the latest copy of Ghost, and the latest copy of the theme.

11

sorry I just updated it. This time you can see that the code for the fadeout has no effect. I don’t really understand why.