How to Style and Add Badges to Posts

How to Style and Add Badges to Posts

On RebelMouse, you can assign badges to certain posts and authors. Some sites in our network use them to flag their promoted content, others just like to have a cool way to categorize their content.

Here's an example of post badges on RebelMouse-powered OkayAfrica. They use our badges feature to label which country in Africa an article pertains to:

To set up badges for your site, append the following address to your site's URL:


You can also use the hamburger menu (☰) in the top-left corner of your Posts Dashboard, and then scroll down to select Badges.

To create a badge, click the +Add Badge button at the bottom of the dashboard.

Then, you will need to click the camera icon to upload a badge photo. In the same interface, you can assign the badge a name, post tags, and a URL you would like the badge to link out to. When assigning a badge's post tags, think of the tags you often use to categorize content, such as "trending" or "quarterly update."

For badges to appear, you'll have to assign them to posts in Entry Editor during their creation. If you haven't been doing this, no fear — you can edit older posts to add them after the fact. You can assign badges via the Advanced tab in the right-hand navigation menu of Entry Editor. Look for the gear icon and then locate the Badging field.

Click +Add Badge to assign a badge to the post. From there, you will see a drop-down menu of your saved badges. Select your desired badge to assign it to the post.

The first badge you select will be the post's primary badge. This will appear first on your home page. You can also assign more than one badge to a post. In the example below, OkayAfrica chose South Africa as the primary badge for their post since it shows up first. Nigeria and Swaziland are additional badges on the same post.

You can also add a badge to a post by adding the same tag that is associated with the badge in the Badges Dashboard. As a reminder, you can add tags via the Channels tab in the right-hand navigation menu of Entry Editor:

If you'd like to make any changes to your Badges in the dashboard, please take note that the posts already containing these badges will have to be updated to see the new changes.

You can also customize how your badges look in Layout & Design Tool. First, make sure your layout is set to be displayed in the Element Order in the settings of the Lead Media element of your Post page layout:

You can add CSS per element to badges as well. To do so, click on the Styles card and scroll down to the badges' sub-elements:

Here's an example of a post displaying a customized badge:

From the Badges Dashboard, you can also create Author Badges, a feature that gives authors on your site a unique image to complement their avatar. For example, if an author tends to write about "Trending" topics, you could assign a "Trending" badge to them. Click here to learn more.

If you have any questions about badges, email or talk to your account manager today.

What Is RebelMouse?
Request a Proposal
The Most Secure CMS of 2023

The Most Secure CMS of 2023

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Keep reading...Show less
Meet the RebelMouse Platform: The Highest Performing CMS on the Web
Rebel Insights

Meet the RebelMouse Platform: The Highest Performing CMS on the Web

Make sure your site is set up for success in 2022.

In the spring of 2020, Google let the world know that its Core Web Vitals would become the new benchmark for measuring a site's performance in its search results, known as the page experience update. Fast forward to more than a year later in August 2021 when, after much anticipation, Google's page experience update became official.

Since its rollout, developers have felt the impact of how their publishing platforms stack up against the new standard. Important decisions around the architecture of your site can now make or break your site's performance in the eyes of Google.

HTTP Archive, a tracking platform that crawls the web to identify trends and record historical patterns, frequently reports on how top content management systems (CMS) have weathered the page experience update through the creation of its Core Web Vitals Technology Report. RebelMouse has consistently outperformed major CMS platforms on Google's most critical metrics throughout the year:

Getting superior scores on Google's performance benchmarks isn't easy, either. The Ahrefs blog analyzed Core Web Vitals data from the Chrome User Experience Report (CrUX), which is data from actual Chrome users, to see how the web stacks up against Core Web Vitals. Their study found that only 33% of sites on the web are passing Core Web Vitals.

data from Ahrefs tracked on a line chart finds that shows only 33% of sites on the web pass Google's Core Web VitalsFrom Ahrefs.

Luckily, performing well on Core Web Vitals is possible with thoughtful, strategic changes to your site’s codebase. Here's what you need to know and how we can help.

Keep reading...Show less
Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now