How can i replace the circle loading with skeleton in your theme

This topic has 24 replies, 3 voices, and was last updated 2 weeks, 1 days ago ago by Luca Rossi

  • Avatar: saleh
    saleh
    Participant
    January 18, 2025 at 14:29

    i want to replace the circle loading with skeleton in your theme

    Please, contact administrator
    for this information.
    23 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    January 19, 2025 at 10:02

    Hello, Saleh,

    Thank you for contacting us and for using XStore.

    We noticed that a similar discussion has already taken place, which you can review here: https://www.8theme.com/topic/skeleton-loading-skeleton-loading-skeleton-loading/#post-427246

    Could you please provide us with more details about your request? For example, let us know which specific areas or pages you’d like the skeleton loader to be implemented. This will help us better understand your requirements.

    Best regards,
    8Theme’s Team

    Avatar: saleh
    saleh
    Participant
    January 19, 2025 at 10:03

    but it was not clear for me

    Please contact administrator
    for this information.
    Avatar: saleh
    saleh
    Participant
    January 19, 2025 at 10:38

    this circle loading i don want it
    i want skeleton loading

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 19, 2025 at 11:40
    Avatar: saleh
    saleh
    Participant
    January 20, 2025 at 10:02

    I did the steps but its same issues no thing change

    https://prnt.sc/m4Q8YjmMDSGq
    https://prnt.sc/NzTR06dCSwk3

    Please contact administrator
    for this information.
    Avatar: saleh
    saleh
    Participant
    January 21, 2025 at 06:35

    I Want to chang the Ajaxify circle loading to sekelton loading style Please can you Help Me to reach that !!

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 21, 2025 at 07:47

    Dear @saleh,

    Did you try with this custom CSS code already?

    https://www.8theme.com/topic/skeleton-loading-skeleton-loading-skeleton-loading/#post-428013

    Best regards,
    8Theme’s Team

    Avatar: saleh
    saleh
    Participant
    January 21, 2025 at 14:44

    still same issue circle loading
    https://prnt.sc/DLeKobxAPBXD

    Avatar: saleh
    saleh
    Participant
    January 21, 2025 at 14:45

    can i give you access to my website and make the change ?

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 22, 2025 at 05:38

    Dear Saleh,

    We hope this message finds you well.

    Could you kindly provide the admin account credentials along with the website URL? Additionally, we would appreciate it if you could disable the cache plugin.

    Thank you for your cooperation.

    Best regards,
    The 8Theme Team

    Avatar: saleh
    saleh
    Participant
    January 22, 2025 at 07:14

    and please provide me the changes you will edit by screenshot

    Please contact administrator
    for this information.
    Avatar: saleh
    saleh
    Participant
    January 23, 2025 at 07:40

    is there any reply please ?

    Avatar: saleh
    saleh
    Participant
    January 23, 2025 at 13:09

    PLEASE CAN YOU REPLY BEFORE THE WEEKEND

    Avatar: Justin
    Luca Rossi
    Support staff
    January 26, 2025 at 11:38

    Dear @Saleh,

    We kindly request that you refrain from replying to your own tickets, as doing so will move your ticket to the bottom of the queue.

    Please rest assured that our team is actively reviewing your inquiry and will get back to you shortly.

    Thank you for your understanding.

    Best regards,
    The 8Theme Team

    Avatar: Justin
    Luca Rossi
    Support staff
    January 26, 2025 at 11:50

    Dear Saleh,

    We hope this message finds you well.

    Could you kindly provide us with the correct Login URL? It seems that the standard path (domain/wp-admin/) is not functioning as expected. Please refer to the screenshot for reference: (https://prnt.sc/DTOpbbPJV2gG).

    Thank you in advance for your assistance.

    Best regards,
    The 8Theme Team

    Avatar: saleh
    saleh
    Participant
    January 27, 2025 at 07:38

    okay i forgot to tell you here is the login URL

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 27, 2025 at 07:48

    Dear @Saleh,

    We hope this message finds you well.

    We wanted to bring to your attention that the loading icons on your website appear to be completely disabled. You can view the issue in the following video: (https://www.awesomescreenshot.com/video/35937114?key=c7c956e5f36a439a4f662674311ae8b3).

    Could you kindly double-check this on your end? Please ensure that you clear your browser cache to observe any changes.

    Should you require any further assistance, feel free to reach out to us.

    Best regards,
    The 8Theme Team

    Avatar: saleh
    saleh
    Participant
    January 27, 2025 at 07:56

    this is not the result that i want it, this is from the lightspeed Cashe Plugin i deactivated Right Now You can check the issue again

    Avatar: Justin
    Luca Rossi
    Support staff
    January 27, 2025 at 12:38

    Dear @Saleh,

    We hope this message finds you well.

    As mentioned in the previous ticket, the skeleton CSS file can be found at the following location:

    app/public/wp-content/themes/xstore/css/modules/skeleton.css

    It appears that this file is specifically designed to support the “Add to Cart” modal functionality for products.

    If you wish to extend its application to other elements or widgets, you would need to implement custom CSS code on your own. Please note that such customizations fall outside the scope of the standard support services we provide.

    We appreciate your understanding in this matter. Should you have any further questions, please feel free to reach out.

    Best regards,
    The 8Theme Team

    Avatar: saleh
    saleh
    Participant
    January 27, 2025 at 13:55

    no problem i will make custom CSS < but can you teach me how to use it with your hook/listener

    Avatar: Justin
    Luca Rossi
    Support staff
    January 27, 2025 at 17:09

    Hi @saleh,

    There is no hook/filter for the custom CSS codes.

    You just need to follow the rules in this custom CSS file:

    
    app/public/wp-content/themes/xstore/css/modules/skeleton.css
    
    

    For example the .product-content class:

    
    .skeleton-body .product-content {
      overflow: hidden;
    }
    
    .skeleton-body .product-content:after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))), color-stop(50%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8))), color-stop(80%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))));
      background-image: linear-gradient(90deg, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 20%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8)) 50%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 80%);
      background-size: 60% 100%;
      background-position: -100% 0;
      background-repeat: no-repeat;
      -webkit-animation: skeletonloading 1.5s infinite 0.2s;
              animation: skeletonloading 1.5s infinite 0.2s;
      z-index: 1;
    }
    

    Hope it helps!

    Avatar: saleh
    saleh
    Participant
    January 30, 2025 at 14:19

    Can you please give me an examplar with

    <div class="elementor-element elementor-element-e39bdc0 elementor-align-center elementor-widget elementor-widget-etheme_advanced_headline" data-id="e39bdc0" data-element_type="widget" data-widget_type="etheme_advanced_headline.default">
    				<div class="elementor-widget-container">
    					        
            <div class="etheme-a-h-wrapper">
            
                
            <h2 class="etheme-advanced-headline etheme-advanced-headline-mask">
    
                التصفح السريع
            </h2>
    		
                        
            </div>
            
    						</div>
    				</div>

    to make it skeleton loading not circular

    Avatar: Justin
    Luca Rossi
    Support staff
    February 1, 2025 at 09:18

    Hi @saleh,

    Please try with this way:

    1. Enable the ajaxify setting for your elements: https://prnt.sc/ca7A8HbXajRT

    2. Add this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    body span.etheme-ajaxify-lazy-wrapper.etheme-ajaxify-replace.etheme-ajaxify-loading {
        background-color: #f0f0f0;
    }
    
    body span.etheme-ajaxify-lazy-wrapper.etheme-ajaxify-replace.etheme-ajaxify-loading::before {
        display: none;
    }
    body span.etheme-ajaxify-lazy-wrapper.etheme-ajaxify-replace.etheme-ajaxify-loading::after {
    content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))), color-stop(50%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8))), color-stop(80%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))));
      background-image: linear-gradient(90deg, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 20%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8)) 50%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 80%);
      background-size: 60% 100%;
      background-position: -100% 0;
      background-repeat: no-repeat;
      -webkit-animation: skeletonloading 1.5s infinite 0.2s;
              animation: skeletonloading 1.5s infinite 0.2s;
      z-index: 1;
    }
    

    Hope it helps!

  • Viewing 24 results - 1 through 24 (of 24 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.