I would like to add image to the background of each <span> under class wooct-timer. I have tried adding CSS to the page and changing the css file in the plugin but both are not working.
Thanks for contacting WPClever Support Forum. We're not available at the weekends so today (Monday) I am able to process your ticket.
We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your question and responding with specific instructions as soon as possible.
While waiting for our developer, you can kindly provide us with a public link to your page with countdown timer so that we can help you check it from the front end as well.
Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.
/* Add background image for Days */
.wooct-countdown .wooct-timer>span:nth-child(1) {
background: url('https://via.placeholder.com/300x300.png?text=.') no-repeat center center #ffffff;
}
/* If you need to set text color after adding background image. */
.wooct-countdown .wooct-timer>span:nth-child(1)>span:nth-child(1) {
color: #000000; /* Set color for text */
}
.wooct-countdown .wooct-timer>span:nth-child(1)>span:nth-child(2) {
color: #000000; /* Set color for text */
}
/* Add background image for Hours */
.wooct-countdown .wooct-timer>span:nth-child(2) {
background: url('https://via.placeholder.com/300x300.png?text=.') no-repeat center center #ffffff;
color: #000000; /* Set color for text */
}
/* If you need to set text color after adding background image. */
.wooct-countdown .wooct-timer>span:nth-child(2)>span:nth-child(1) {
color: #000000; /* Set color for text */
}
.wooct-countdown .wooct-timer>span:nth-child(2)>span:nth-child(2) {
color: #000000; /* Set color for text */
}
/* Add background image for Minutes */
.wooct-countdown .wooct-timer>span:nth-child(3) {
background: url('https://via.placeholder.com/300x300.png?text=.') no-repeat center center #ffffff;
color: #000000; /* Set color for text */
}
/* If you need to set text color after adding background image. */
.wooct-countdown .wooct-timer>span:nth-child(3)>span:nth-child(1) {
color: #000000; /* Set color for text */
}
.wooct-countdown .wooct-timer>span:nth-child(3)>span:nth-child(2) {
color: #000000; /* Set color for text */
}
/* Add background image for Seconds */
.wooct-countdown .wooct-timer>span:nth-child(4) {
background: url('https://via.placeholder.com/300x300.png?text=.') no-repeat center center #ffffff;
color: #000000; /* Set color for text */
}
.wooct-countdown .wooct-timer>span:nth-child(4)>span:nth-child(1) {
color: #000000; /* Set color for text */
}
.wooct-countdown .wooct-timer>span:nth-child(4)>span:nth-child(2) {
color: #000000; /* Set color for text */
}
I would like to add image to the background of each <span> under class wooct-timer. I have tried adding CSS to the page and changing the css file in the plugin but both are not working.
Hi John,
Thanks for contacting WPClever Support Forum. We're not available at the weekends so today (Monday) I am able to process your ticket.
We’ve received your ticket and assigned one of our developers to help you with that. He’ll be looking into your question and responding with specific instructions as soon as possible.
While waiting for our developer, you can kindly provide us with a public link to your page with countdown timer so that we can help you check it from the front end as well.
Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.
Best regards.
Janilyn T. - WPClever Support Agent
Hi John Man.
If you need to set background image for each span tag.
Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:
Demo link: https://dev1.wpclever.org/product-category/decor/
Best regards,
Henry N.