i want to 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
i want to replace the circle loading with skeleton in your theme
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
but it was not clear for me
this circle loading i don want it
i want skeleton loading
Hi @saleh,
Please try with this solution: https://www.8theme.com/topic/lazy-loading-still-enabled-even-though-all-lazy-load-options-are-seemingly-disabled/#post-424312.
Best regards,
8Theme’s Team
I did the steps but its same issues no thing change
– https://prnt.sc/m4Q8YjmMDSGq
– https://prnt.sc/NzTR06dCSwk3
I Want to chang the Ajaxify circle loading to sekelton loading style Please can you Help Me to reach that !!
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
still same issue circle loading
https://prnt.sc/DLeKobxAPBXD
can i give you access to my website and make the change ?
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
and please provide me the changes you will edit by screenshot
is there any reply please ?
PLEASE CAN YOU REPLY BEFORE THE WEEKEND
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
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
okay i forgot to tell you here is the login URL
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
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
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
no problem i will make custom CSS < but can you teach me how to use it with your hook/listener
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!
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
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!
You must be logged in to reply to this topic.Log in/Sign up