RebelMouse Talk to Us
Add Style to Articles With HTML Class Selectors

RebelMouse's Particle Assembler is designed to break down articles into micro pieces of content, which we call "particles." Individual particles in an article can be styled, shared, converted to slideshows, and now, take specific CSS styling to make them pop, when you want them to pop.

By adding some simple (or complex!) CSS to your Entry Editor via Layout & Design Tool, you can have a preset template for side quotes, warnings, or just places where you want something to stand out a bit.

For example, in the screenshot below, we have a section in our article for Do's and Don'ts. We wanted this section to stand out from the particles before and after it, so we styled it with some colors to make it unique:

How to Select a Custom HTML Class in Entry Editor

For a writer or an editor, this requires nothing more than clicking on a drop-down menu and selecting the correct HTML class. Let's look at how this is done in Entry Editor. At the top of an individual particle, you will see a small artist's palette icon:

Clicking on that icon will open up the CSS section for styling that individual particle:

If you're not a developer and are perhaps a bit scared looking at the prospect of having to write code, don't fear! The code can be written in Layout & Design Tool by either your development team or RebelMouse's developers. All you have to do as a writer or an editor is click on the drop-down menu underneath "HTML Class":

The drop-down menu will reveal the different options that you have to select from:

In this example, we are selecting the "Do's and Don'ts" option. The styling that we put in place (as you saw in the image at the beginning of this article) changes the particle headline to white over a blue background, the H3s to white over a green background, the bullet list under "Do This" to have a gray background, and the ordered list under "Don't Do This" to have a red background.

This of course is just one example! There is no limit to the styling you can set with HTML classes. Let's learn how to create the classes now.

How to Create Custom Classes in Layout & Design Tool

There are several steps to creating custom classes to be used in your particles. The first is to set up Assembler custom classes in Layout & Design Tool for Entry Editor.

Setting up Assembler Custom Classes

First you need to click on the hamburger menu (☰) in the top-left corner and select Layout & Design Tool. This will take you to the Global Settings page, where you will again click the hamburger menu and then scroll down until you see Entry Editor. Click on Entry Editor to open up the Entry Editor view in Layout & Design Tool:

Please note that you are not allowed to edit the live version of Entry Editor. This is to ensure that any mistakes made will not affect the current content creation process for your writers. You must first create a B test of your live Entry Editor. Only then can you safely make any number of changes that won't affect your active content creation process. After you are comfortable with your updates, you can take the new B test live and delete the previous version (or you can hang onto the old version as a possible restore point).

Once you have your B test ready for customization, the first thing to do is scroll down until you see the column that contains your Body element. Click Assembler Element (thus highlighting the entire section) to activate it for editing. Next, you will see on the right in the Properties card an option to add an element. Click + Add Element and select Assembler Custom Classes:

Simply add a name and value for your new custom class. You'll want to make sure this is something that will make sense to your writers and editors to select. For our example, we'll say that we want a particle's background color to be RebelMouse blue. Let's call the custom class "Rebel Blue Background":

The value will later be used to specify your CSS styling for this custom class.

That's the last step here. Click Save in the top-right corner, enter the details of what you updated on the layout for the save history, and you are ready to move on to the next step: styling the custom class(es).

Styling HTML Custom Classes

Styling HTML custom classes is as easy as styling any other element on your site. You can simply add CSS to your Top Bar's Styles element, or create a new Styles element specifically for your HTML classes.

For the first option, you simply navigate to the Top Bar element in Layout & Design Tool and locate your site's Styles element. From there, add the CSS that will style your classes how you want them. For our example, we will add a simple blue background to a paragraph. In Layout & Design Tool, our example looks like this:

Now we can save this and test it out on a new article!

The steps are the same as described above. We simply create an article, open up an Assembler listicle item (particle), and select the appropriate HTML class. For illustrative purposes, I've created an article and used the "Rebel Blue Background" custom class in the first particle and not in the second particle. You can see how the background color is blue in the first paragraph, but not in the second:

This is clearly a very simple example, where we've added a background color to a <p> element. If you are using custom HTML classes regularly, you will certainly have much more styling to do. You can absolutely add all the styling you want to the Styles element in your Top Bar, but you may want to keep the code for your HTML classes separated.

To do so, you'll add a new Styles element to your Top Bar, name it "Assembler Classes CSS" (or whatever is memorable for you), and then add the required CSS for each of your classes there.

If you want to take it another step further, you can also create a Shared element that you can add all of your CSS to, and then add that Shared element to any page type (home, post, section, etc.) where you wish to have those styles available.

Have fun creating custom HTML classes and helping your writers and editors make your articles really pop!

And, as always, if you have any questions about this feature, please contact or your account manager today.

Not on RebelMouse yet? Let's talk!

What Is RebelMouse?
Request a Proposal
subscription model for publishers
Content Strategy

In 2022, Publishers Take Back Control With Subscription Success

Users are ready to pay for content that delivers

The Rise of the Mature User

It's been a long and winding path, but in 2022 the subscription model continues its upward trajectory as a top revenue strategy for publishers of all sizes. The tug of war between platforms and publishers reached its peak in the last few years of the previous decade, leaving users desperate for a modern user experience that's clear of any clutter from the duopoly that is Google and Facebook. This is why intelligent paywall models are a top choice for users looking to consume content right from the source. When done correctly, the strategy can work for any type of media. The New York Times, a frequent showpiece example of the power of paywalls, is constantly reporting record-busting subscription numbers, with 7.6 million digital subscriptions in 2021.

And it all makes perfect sense. The subscription model eliminates the middleman — such as the platforms — so readers get the experience and content they want, and publishers get the cash they need.

Keep reading... Show less
People on a train station
Rebel Insights

RebelMouse Q1 2021 Platform Updates

Speed, performance, and Core Web Vitals enhancements

Click here to read our Q2 2021 platform performance updates!

At RebelMouse, we pour our souls into making sure that our platform is always the most modern, high-performance CMS on the market. In fact, we invested over $100,000 worth of hours into our platform in Q1 2021 alone. This has resulted in updates and performance enhancements that publishers would have to pay for on their own to make happen on any other platform, such as WordPress. We're proud to be at a level of scale where we can invest this way into our platform, and we will continue to invest at this rate every quarter moving forward just as we have in the past.

Here are the major updates that we've added to the platform in Q1.

Keep reading... Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now
Sign Up for RebelMouse’s Free Website Health Check
Rebel Insights

Sign Up for RebelMouse’s Free Website Health Check

Most publishers are bogged down with day-to-day content strategy and creation, which usually means their technology suffers. That translates into poor search rankings, traffic dips, and loss of revenue.

Even so, the idea of replatforming to a new CMS, migrating your data, and overhauling your site’s architecture can sometimes feel more daunting than simply fixing the issues your website currently faces. But the stumbling block here is that most publishers aren’t even sure what the exact problems are with their current site.

That’s why RebelMouse offers a free website health check. This comprehensive audit will help you make a data-backed decision on what the best and most cost-effective next steps are to brighten your site’s future. Here’s what our health check includes:

Keep reading... Show less
The Subscription Model Is Taking off and Competition Has Never Been Steeper
Rebel Insights

The Subscription Model Is Taking off and Competition Has Never Been Steeper

The post-pandemic user landscape is still ripe for subscription revenue

You can get a subscription for everything these days. Whether it’s a cheese-of-the-month club or annual access to read your favorite content, the subscription-based model has continued to gain steam in recent years. In fact, the market for digital subscriptions is valued at $650 billion according to a new report from Lineup, a subscription management solution.

The power of the subscription model has been growing since even before the COVID-19 crisis began, and isn’t showing any signs of slowing as we enter a post-pandemic landscape. According to What’s New in Publishing, Gannett reported a 46% year-over-year increase in digital subscriptions in November 2021, putting them at 1.5M total subscribers. Hearst grew its digital subscriptions by 50% in 2021.

But subscriptions aren’t just for big name publishers. Users in 2022 are ready to pay up for legacy names and new media companies alike, as long as it’s for an experience that’s beneficial to them, reliable, and free of the clutter that can come from third-party platforms. Speaking of platforms, even TikTok and Instagram have started to gauge their audiences’ temperature on subscription experiences. So, the competition has never been steeper for publishers looking to build a subscriber base. Unfortunately, launching a simple paywall may not be enough.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal