Personalize your Juicer feed by changing the color of the loading icon and styling the Load More button. This guide provides step-by-step instructions for implementing these customizations.
Changing the Loading Icon Color
To modify the color of your Juicer loading icon, add the following CSS to your site:
.j-loading {
border-color: #000 !important;
}
.j-loading:before {
background-color: #000 !important;
}Replace #000 with your desired color hex code or color name (e.g., black, orange, yellow).
Adding Custom CSS
You can add the custom CSS in three ways:
- Juicer Dashboard:
- Go to the "Feed Design" panel
- Click "Customize CSS→"
- Paste the code in the "Customize Theme CSS" pop-up window
- Directly on the webpage:
Add the CSS within<style>tags below your Juicer embed code:<style>
/* Paste your custom CSS here */
</style> - Your website's stylesheet:
Add the CSS to your site's main CSS file.
Customizing the Load More Button
To style the Load More button, use this CSS and adjust 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;
}
Troubleshooting
If your changes don't appear immediately:
- Clear your browser cache
- Make sure your website is not using a caching plugin
- Ensure the CSS is properly linked or embedded
- Check for any conflicting styles in your main stylesheet
If you have any questions or need any help, please email us at hello@juicer.io.