Oleg

<script>
document.addEventListener("DOMContentLoaded", function() {
    var blogPosts = document.querySelectorAll('.blog-item, .summary-excerpt');

    blogPosts.forEach(function(post) {
        var words = post.innerText.split(' ').length;
        var readingTime = Math.ceil(words / 200); // Average reading speed is about 200 words per minute

        var datelineLink = post.querySelector('.entry-dateline-link');
        var readingTimeElement = document.createElement('span');
        readingTimeElement.innerText = 'Estimated reading time: ' + readingTime + ' min';
        readingTimeElement.style.color = '#a59896'; // Set the color of the text
        readingTimeElement.style.display = 'block'; // Ensure the reading time appears on a new line
        datelineLink.parentNode.insertBefore(readingTimeElement, datelineLink.nextSibling);
    });
});

</script>

change .blog-item, .summary-excerpt to your ID's 

On 5/14/2022 at 10:18 AM, tuanphan said:

Try this new code

div#gridThumbs {
    opacity: 1 !important;
    transform: unset !important;
}
.portfolio-grid-basic .grid-item .portfolio-title {
    opacity: 1 !important;
    transition: unset !important;
}

 

This worked like a charm Tuan. Amazing. 

On 6/5/2021 at 1:27 PM, aravsanj said:

I am afraid this has to do with the browser than your code. You're using input tags to achieve the quantity input. This is the code you are using:

<input size="4" max="9999" min="1" value="1" type="number" step="1"></input>

The problem is, each browser is rendering the piece of code differently. I tried running this code in isolation on Chrome and it is only showing the arrows on hover. I ran the same code on firefox and the arrows are there by default. But when I visited your website via firefox, the arrows are not showing even on hover (weird, probably incompatible).

More nerdy explanation:
The arrows inside the input html element is a CSS pseudo-element. It is non-standard (till date) which is why different browsers are behaving differently. For custom CSS, you can target the pseudo-element using:

 ::-webkit-inner-spin-button

Solution:
The following CSS might potentially work but it is not guaranteed to behave appropriately for everyone all the time. I tested it myself and it is working in Chrome (desktop). You can add this to custom CSS.

<style>
input[type=number]::-webkit-inner-spin-button {
  Opacity: 1;
}
</style>

PS: Since this is a non-standard feature, browsers might act differently. The above code worked for me on latest Chrome (desktop). Once you added the CSS however, try visiting the page on firefox, firefox mobile, chrome mobile, safari, etc. Also keep on notice if it somehow becomes standardized in the future. The CSS might mess it up in such a case.
 

THank you for your help, it is absolutely the way you described. Working on desktop not mobile. 

Site URL: https://www.queenlashista.com/products

Hello, I have been trying to figure it out, on how to make my quantity arrows to be visible at all times and of course if possible to make them customised slightly also, but till now i cannot find a solution . 

Image Below shows quantity arrows appear when hover over with mouse. 

Image below is the usual view and no arrows are visible. 

any help appreciated - also customising css would great too. 

Best wishes all.

Creedon : i am trying to implement this on my website - but i cannot get it work :(

Would you be able to help ? www.queenlashista.com has shop for products and courses. I need express checkout to work each time someone Clicks Enroll Now in my academy page. 

Let me know if you have time to look into it? 

Thank you.