RebelMouse Talk to Us

If you are not familiar with spritesheets, please read this article first http://www.w3schools.com/css/css_image_sprites.asp.


How it Works

RebelMouse provides you with tools to create spritesheet files automatically using your individual icons. The tool will create spritesheet files in both retina and non-retina formats, as well as their respective CSS markup.

To generate spritesheets for your projects use

roar-generate_sprites

The image folder is located in static/img/whitelabel/. All images should be located here.

A spritesheet is created for each group of files under each folder of the sprites folder.

Take as an example this set of folders:

static/img/whitelabel/sprites/logos/static/img/whitelabel/sprites/ui/

2 spritesheet files will be created for folders ui and logos automatically by using the roar-generate_sprites command.

Spritesheets will be located here:

static/img/whitelabel/spritesheets/logos@2x.pngstatic/img/whitelabel/spritesheets/logos.pngstatic/img/whitelabel/spritesheets/ui@2x.pngstatic/img/whitelabel/spritesheets/ui.png

Stylesheets will be located here:

static/css/roar/spritesheets/logos.cssstatic/css/roar/spritesheets/ui.css

Step by Step

Create a folder called sprites, under static/img/whitelabel/, if it's not already created.

Create a folder for each new spritesheet you need, under sprites folder.

Put all the .png files you need into created folder. Note: images should be retina size, meaning 2x of their normal size.

Run the command roar-generate_sprites.

Import the generated CSS into your project's critical.css file, if it is not there yet.


Using the Spritesheets

Beside the spritesheet .png file, a .css file is generated as well. It contains CSS classes for all images which also handle retina displays which means you don't have to worry about high quality displays. Simply add the class to the element you want the image to show in.

For example, if your image file is located:

static/img/whitelabel/sprites/ui/yourfile.png

Then the class will be:

.sprites-ui-yourfile
Build on a Better PlatformReady to See More?
Request a Proposal
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
Build on a Better PlatformReady to See More?
Request a Proposal
An Important Note on Site Quality From Google’s Search Expert
Rebel Insights

An Important Note on Site Quality From Google’s Search Expert

Do you ever wonder if a few typos can impact your site’s search performance? According to Google’s Search Advocate John Mueller, it takes more than just a few grammatical missteps for Google’s crawler to determine your site’s quality.

During a New Year’s Eve Office Hours hangout, Mueller said that if certain portions of a website are deemed low quality, it can negatively impact the site’s search ranking overall. A good example of this is a site that has different language versions within the same domain. If the site has a French-language version that is made up of quality content, but the English translation isn’t up to the same standard, the ranking of the French version of the site could be negatively impacted.

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