Quick Tip: Styling Restricted Content for Online Publishers

Many popular online newspapers (e.g. The Wall Street Journal, Le Figaro, The Telegraph) offer some free content, but require users to purchase a subscription if they want unlimited reading.

And in a world where many people expect content on the internet to be free, finding the most suitable payment model is an ongoing challenge for online publishers.

“One of the most essential all-time challenges for journalism is its economic sustainability.” – Aurelija Gackaitė

Take for example a post from The Wall Street Journal, where users are permitted an excerpt of an article for free, but need to subscribe to gain access to the full piece:

In this short tutorial, we’ll use JavaScript to mimic this behavior. First we’ll create a post with restricted content, masked by a gradient, and then we’ll let subscribed users reveal the full post.

Here’s our demo:

1. Begin With the Page Markup

We’ll start by using the article element to represent a typical blog post or newspaper article. We’ll also wrap it inside a .container for setting a maximum page width.

Here’s the relevant markup:

<div class="container">  
  <article class="post">
    <header>
      <h1 class="post-title">...</h1>
      <div class="post-meta">...</div>
    </header>
    <div class="post-content">...</div>
    <div class="actions">
      <p>...</p>
      <div class="links">...</div>
    </div>
  </article>    
</div>

2. Add the CSS

By default we’ll add a not-member class to the html element (here we’re using the Add Class tool provided by CodePen:

Add the not-member class to the html element

This ensures that only a small part of the post will initially be visible to the readers:

More specifically we’ll show just the header, the first two paragraphs, and the call-to-action links. We do this by using the “general sibling combinator” to select everything after the second paragraph (p:nth-child(2) ~ *) where .not-member is present:

.not-member .post-content p:nth-child(2) ~ * {
  display: none;
}

.not-member .actions {
  display: block;
}

Next we’ll add a few styles to the last visible paragraph (second). We’ll gradually hide its contents and add a padlock icon on top of it. These styles will let readers know that access is restricted to the whole article.

Here’s the CSS needed for this bit:

.not-member .post-content p:nth-child(2) {
  position: relative;
}

.not-member .post-content p:nth-child(2)::before,
.not-member .post-content p:nth-child(2)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.not-member .post-content p:nth-child(2)::before {
  background: url(padlock.svg) no-repeat center;
  z-index: 1;
  height: 24px;
}

.not-member .post-content p:nth-child(2)::after {
  background: linear-gradient(rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.36) 36%, rgba(255,255,255,0.54) 54%, rgba(255,255,255,0.72) 72%, rgba(255,255,255,0.9) 90%);
  height: 100%;
}

To round off these basic styling rules, we’ll style the call-to-action section:

.not-member .actions {
  font-weight: bold;
  text-align: center;
  margin-top: 2rem;
}

.not-member .links {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 1rem;
}

.not-member .links a {
  background: firebrick;
  color: white;
  padding: 0.5rem 0;
  transition: background 0.3s;
}

.not-member .links a:hover {
  background: #9d1e1e;
}

3. Unlock Premium Content

For the purposes of our simple demo, let’s assume that a reader becomes a premium member each time he or she clicks on a call-to-action.

In our case, at that point the not-member class is removed from the html element and the full post content becomes visible.

Here's the JavaScript code responsible for that functionality:

const links = document.querySelectorAll(".not-member .links a");

for(const link of links) {
  link.addEventListener("click", e => {
    e.preventDefault();
    document.documentElement.classList.remove("not-member"); 
  });
}

By the time the full post appears, there’s no need to style the second paragraph differently as well as show the initial call-to-actions. So, let’s hide them all:

.post-content p:nth-child(2)::before,
.post-content p:nth-child(2)::after,
.actions {
  display: none;
}

Finally, we can restart the subscription/unsubscription process by clicking on the Unsubscribe/Sign Out link which can be found at the bottom of the post content:

Here’s the required JavaScript code:

const unsubscribe = document.querySelector(".unsubscribe");

 unsubscribe.addEventListener("click", e => {
    e.preventDefault();
    document.documentElement.classList.add("not-member"); 
  });

Conclusion

In this quick tutorial, we built a simple demo that covered some ideas for styling restricted content. Similar techniques are used by big online newspapers and publishers, but you may find a use for this yourself.

We only simulated the subscription, so to implement this properly you would have to work out the signup process behind the scenes. And it’s important to note that the content we’ve hidden is only hidden visually–the page source still contains the restricted content. Bear this in mind if you’re publishing genuinely sensitive material.

As always, thanks for reading!

Quick Tip: Styling Restricted Content for Online Publishers

1. Begin With the Page Markup

2. Add the CSS

3. Unlock Premium Content

Conclusion

Read All About it!

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: