Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3071859
Customizing background of counter with image
Closed

Comments

  • John Man started the conversation

    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.

  •  767
    Janilyn replied

    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

  •  153
    Henry replied

    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:

    /* 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 */
    }

    Demo link: https://dev1.wpclever.org/product-category/decor/

    Best regards,
    Henry N.