Skip to main content

Changing the Color of the Juicer Loading Square and the Load More Button

Customizing the Juicer Loading Icon and Load More Button

Updated over a month ago

Customizing the Juicer Loading Icon and Load More Button

Use the CSS below to change the loading icon color and style the “Load More” button in your Juicer feed.

Prerequisites:

  • Your Juicer feed is already embedded on your site (via the Juicer dashboard embed snippet).

  • You can add custom CSS (either in your site’s stylesheet or via the Juicer dashboard).

Change the Loading Icon Color

Add this CSS and replace the color values with your preferred color (hex code or name):

/* Loading square border */
.j-loading {
  border-color: #000 !important;
}

/* Inner fill of the loading square */
.j-loading::before {
  background-color: #000 !important;
}

☀️ Tip: Use a single color variable to keep things consistent.

:root {
  --juicer-accent: #000; /* set to your brand color */
}

.j-loading {
  border-color: var(--juicer-accent) !important;
}

.j-loading::before {
  background-color: var(--juicer-accent) !important;
}

Add Custom CSS

You can add the CSS in any of these places:

  1. Juicer dashboard:

    • Open your feed → “Design” option (🎨)

    • Click “</> Custom CSS”

    • Paste the code into “Custom CSS” field

  2. On your webpage:

    • Add the CSS to your main CSS file that loads after your theme/styles.

⚠️ Note: If your site has other styles, load this CSS after them or use !important to ensure it takes effect.

Customize the “Load More” Button

Use this CSS and adjust values as needed:

.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;
  margin: 16px auto; /* centers the button */
}

.juicer-feed .j-paginate:hover {
  background-color: #000;
  color: #fff;
}

☀️ Tip: Use the same variable for consistency.

.juicer-feed .j-paginate {
  border-color: var(--juicer-accent);
  color: var(--juicer-accent);
}

.juicer-feed .j-paginate:hover {
  background-color: var(--juicer-accent);
  color: #fff;
}

Troubleshooting

If changes don’t appear:

  • Clear your browser cache and hard-reload the page.

  • Disable/clear any site caching or CDN (e.g., WP Rocket, Cloudflare) temporarily.

  • Ensure your custom CSS loads after your site/theme styles and the Juicer embed.

  • Check for conflicting selectors; increase specificity if needed:

    • Example: .your-wrapper .juicer-feed .j-paginate { ... }

  • Verify the feed you’re editing matches the page you’re viewing (correct embed).

Did this answer your question?