You can recolor the Juicer loading indicator and restyle the Load More button with custom CSS. The exact selectors depend on whether your feed runs on Feeds 2.0 (the default for new feeds) or on the legacy embed. The snippets below cover both.
Where to add the CSS
In your Juicer dashboard, open your feed and click the Design option (🎨).
Click </> Custom CSS.
Paste your CSS into the Custom CSS field and save.
Alternatively, you can add the same CSS to your own site's stylesheet as long as it loads after the Juicer embed. Use !important if your site's existing styles fight back.
Customize the Load More button (Feeds 2.0)
Target the .jcr-load-more class.
.juicer-feed .jcr-load-more {
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;
}
.juicer-feed .jcr-load-more:hover {
background-color: #000;
color: #fff;
}☀️ Tip, use a CSS variable for your brand color so the loading indicator and the button stay consistent.
:root {
--juicer-accent: #000;
}
.juicer-feed .jcr-load-more {
border-color: var(--juicer-accent);
color: var(--juicer-accent);
}
.juicer-feed .jcr-load-more:hover {
background-color: var(--juicer-accent);
color: #fff;
}
About the Feeds 2.0 loading indicator
The Feeds 2.0 loading spinner uses inline styles that can't be cleanly overridden with custom CSS, and it only appears for a moment while the first batch of posts loads. We don't currently expose a hook for changing its color. Most viewers won't notice it. If a branded loading indicator is important for your use case, get in touch using the contact link at the bottom of this article and we'll see what we can do.
Legacy feeds, the .j-loading and .j-paginate selectors
If your feed still runs on the older embed (the multi-line snippet with a separate CSS and JS link), the legacy selectors apply instead. Use these for legacy feeds.
Loading square
/* Border */
.j-loading {
border-color: #000 !important;
}
/* Inner fill */
.j-loading::before {
background-color: #000 !important;
}
Load More button
.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;
}
.juicer-feed .j-paginate:hover {
background-color: #000;
color: #fff;
}
Troubleshooting
Hard-refresh the page and clear any caching layer (WP Rocket, NitroPack, Cloudflare, your browser cache).
Make sure your custom CSS loads after the Juicer embed and your theme styles.
If your site's CSS has higher specificity, scope your selectors more tightly, for example
.your-wrapper .juicer-feed .jcr-load-more { ... }, or add!importantto the specific properties you need to win.Confirm you're editing the same feed that's embedded on the page you're viewing.
If your CSS isn't taking effect, contact us with the feed name, the URL of the page where the feed is embedded, and the exact CSS you pasted into the Custom CSS field, and we'll take a look.