Changing the color of the Juicer Loading square and the “Load More” button – Juicer

By adding a short CSS snippet to your site, you can change the color of the Juicer Loading Icon.

To change the color of your Juicer loading icon, add custom CSS to your site like the following:

.j-loading {
 border-color: #000 !important;
}

.j-loading:before {
 background-color: #000 !important;
}

In this case, we are using #000 which is the hex code for black, but you can replace it with any hex code color you like, or even with a natural language color name (e.g., black, orange, yellow, etc.).

⚠️ You can also add this code to your feed in 4 clicks, by clicking the “Custom Design” panel of your Juicer dashboard, then clicking the “Customize CSS” link and pasting the code in the “Customize Theme CSS” pop-up window.

Or, you can add it below your Juicer embed code directly on the webpage, encased within <style></style>tags.

To do the same with the Load More button, after your posts, change the code below to suite your needs:

.juicer-feed .j-paginate {
   transition: all 0.2s ease-in-out;
   background-color: transparent;
   border-radius: 5px;
   border: 2px solid #000;
   color: #000;
   cursor: pointer;
   display: block;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 0.5px;
   padding: 12px 0 10px;
   text-align: center;
   text-transform: uppercase;
   width: 150px;
}

If you have any questions or need any help, please email us athello@juicer.io.

Related articles