How Do I Change the Day Countdown Widget?

  • Profile Image
    StrawberryDesi
    Asked on January 14, 2017 at 02:44 AM

    I'm using the Day Countdown widget in my Proof Test Form.  But, the widget displays 3 digits for "days".  I only want 1 digit to show because, for my use, I will only be using a maximum of only 3 to 4 days.

     

    Can you send me a CSS code that will accomplish this?

     

    Thank you.

     

     

    Henry

  • Profile Image
    Mike_G
    Answered on January 14, 2017 at 12:08 PM

    Please add the following CSS codes below to the Custom CSS tab of the Day Countdown widget in your form.

    span.countDays .position:nth-child(-n+2) {

        display: none !important;

    }

    I hope this helps. If you have other questions or you need any further assistance, please feel free to contact us again anytime.

    Thank you.

  • Profile Image
    StrawberryDesi
    Answered on January 14, 2017 at 02:45 PM
    Thank you. That worked perfectly! I have 2 other questions:
    1) Can I change the digits so that when there the number of minutes (for
    example) is less than 10, that only ONE digit is visible ("9" instead of
    "09")? How can that be done for hours, minutes and seconds?
    1) The small text at the bottom...can that be changed? For example, when
    there is no time remaining it reads "00 days, 00 hours, 00 minutes and 00
    seconds left!" Can I change it to read "00 days, 00 hours, 00 minutes and
    00 seconds *remaining to complete the proofing process.*"
    Thank you for your continued help.
    Henry
    ...
  • Profile Image
    Mike_G
    Answered on January 15, 2017 at 02:14 AM

    1) Can I change the digits so that when there the number of minutes (for
    example) is less than 10, that only ONE digit is visible ("9" instead of
    "09")? How can that be done for hours, minutes and seconds?

    Days:

    span.countDays .position:nth-child(-n+2) {

        display: none !important;

    }

    Hours:

    span.countHours .position:nth-child(1) {

        display: none !important;

    }

    Minutes:

    span.countMinutes .position:nth-child(1) {

        display: none !important;

    }

    Seconds:

    span.countSeconds .position:nth-child(1) {

        display: none !important;

     

    }

    1) The small text at the bottom...can that be changed? For example, when
    there is no time remaining it reads "00 days, 00 hours, 00 minutes and 00
    seconds left!" Can I change it to read "00 days, 00 hours, 00 minutes and
    00 seconds "

    Although there is no way we can change it directly, a workaround using the CSS codes below might work for you.

    p#note:after {

        content: "*remaining to complete the proofing process.*" !important;

        position: relative !important;

        left: -19px !important;

        background: #F9F2E7 !important;

    }

    p#note {

        position: relative !important;

        left: 9.5px !important;

    }

    I hope this helps. Please feel free to contact us again anytime if you have other questions or concerns.

    Thank you.

  • Profile Image
    StrawberryDesi
    Answered on January 15, 2017 at 09:45 AM
    Is there a way to SHOW or HIDE a certain question or page when the counter
    reaches a certain time remaining? I know that there is another widget that
    has that capability but, it will not work for me because, - with that one -
    when you refresh the page the counter restarts.
    Please let me know.
    Thank you.
    Henry
    ...
  • Profile Image
    BDAVID
    Answered on January 15, 2017 at 03:48 PM

    That is not possible, this widget is not optimized for that purpose.