Go to Juicer

Juicer.io Support Center

Search for any help questions or topics.

Customizing Juicer Loading Icon and Load More Button

Step-by-step instructions for implementing these customizations.
Avatar
Mario
Updated 4 weeks ago
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:

  1. Juicer Dashboard:
    • Go to the "Feed Design" panel
    • Click "Customize CSS→"
    • Paste the code in the "Customize Theme CSS" pop-up window


  2. Directly on the webpage:
    Add the CSS within <style> tags below your Juicer embed code:

    <style>
    /* Paste your custom CSS here */
    </style>


  3. 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:

  1. Clear your browser cache
  2. Make sure your website is not using a caching plugin
  3. Ensure the CSS is properly linked or embedded
  4. 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.



Did this answer your question?
😞 😐 😃