{"id":272,"date":"2017-02-19T04:14:04","date_gmt":"2017-02-19T04:14:04","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=272"},"modified":"2023-01-25T12:49:42","modified_gmt":"2023-01-25T12:49:42","slug":"animated-countdown","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/animated-countdown\/","title":{"rendered":"Animated Countdown"},"content":{"rendered":"\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1au60-7fd891727f56165592a8f2ff1472fc9d\">\n#top .av-special-heading.av-1au60-7fd891727f56165592a8f2ff1472fc9d{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-1au60-7fd891727f56165592a8f2ff1472fc9d .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-1au60-7fd891727f56165592a8f2ff1472fc9d .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-1au60-7fd891727f56165592a8f2ff1472fc9d av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_after_av_codeblock  el_before_av_hr '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Animated Countdown<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-81gc5k-fc5a394432cd250a68a59eea7d41bfb6 hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7xfq4w-b95d0ec482337c0e215488ae03c829ff '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-7myo28-deb4ab597304f58f72f6062e5db992ee '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The animated countdown is an interactive way to let users know about a new product launch, upcoming promotions or any event in future. The countdown element is designed to be catchy and can be set to any time in the future, it starts counting down each second, minute and hour. Once the set time is reached the counter will stop. In case you try to set a time that is already past it will simply not work because the countdown is already completed.<\/p>\n<p>The element comes with several predefined styles that you can choose from such as a default style or the transparent light or dark styles that work well when used above images or solid\u00a0colors.<\/p>\n<\/div><\/section>\n<div  class='av-countdown-timer av-7ibyio-e435d0da8ae416cd11a573394030f5d5 av-align-center av-colored-style av-classic-numbers  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '  data-year=' 2019' data-month='11' data-day=' 31 ' data-hour='1' data-minute='1' data-timezone='120' data-interval='1000' data-maximum='3' ><span class='av-countdown-timer-inner'><span class='av-countdown-cell av-countdown-hours'><span class='av-countdown-cell-inner'><span class='av-countdown-time' data-upate-width='hours'>0<\/span><span class='av-countdown-time-label' data-label='Hour' data-label-multi='Hours'>Hours<\/span><\/span><\/span><span class='av-countdown-cell av-countdown-minutes'><span class='av-countdown-cell-inner'><span class='av-countdown-time' data-upate-width='minutes'>0<\/span><span class='av-countdown-time-label' data-label='Minute' data-label-multi='Minutes'>Minutes<\/span><\/span><\/span><span class='av-countdown-cell av-countdown-seconds'><span class='av-countdown-cell-inner'><span class='av-countdown-time' data-upate-width='seconds'>0<\/span><span class='av-countdown-time-label' data-label='Second' data-label-multi='Seconds'>Seconds<\/span><\/span><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7cah1k-3811d6d87f70b36ead9855e78e547f29 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Apply predefined styles and set a different font size to the Countdown element from the element options &gt; color tab. Check out more\u00a0<a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/animated-countdown\/\" target=\"_blank\" rel=\"noopener\">countdown timer examples<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-78pwyg-0894d813c796c81f848802960920f67f hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6yntgo-b118de8613170577ea01c2f59c8ce1c8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-9  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-6s3668-af140808b9f6d4b5b8e30aa95beadebc hr-default  avia-builder-el-10  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6lmm9c-68a615431c27069de92e7cda2a3290fe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-2gmm7ai-c5591c1818fe67aeaccbdac799b61c3e av-minimal-toggle  avia-builder-el-12  el_after_av_textblock  el_before_av_hr  toggle_close_all' ><section class='av_toggle_section av-s956ay-d561db153b501398d1b91a7d316b01f7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5zem3s-7cb3e143634e0c5f1f48827f9a237121 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5xvle8-b0f1f4893af87352dbae1971c29df463 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-6lmm9c-8e0597f8b783bfab888f70d252b18fdb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Using custom code we can customize the Countdown element and change the default style by adding a custom background,\u00a0border and change position of the number and text.<\/p>\n<p><strong>NOTE<\/strong>: Before we get started, please enable custom CSS class name support from <strong>Enfold theme options &gt; Layout Builder<\/strong> and apply\u00a0the required custom class name &#8220;<strong>my-custom-countdown<\/strong>&#8221; to the countdown element for the code to work well.<\/p>\n<\/div><\/section>\n<div  class='hr av-5qr9rs-ce70724579678fbdc49d59773e966c29 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Number<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-1ty274a-279fa92583f72303b7ec2b339d2446e9'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the &#8220;Font for your body text&#8221; set in Enfold &gt; General Styling is applied to the countdown element. To custom style the number fonts please use the below CSS.<\/p>\n<pre><code> \r\n\r\n\/* Countdown number  *\/\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time {\r\n   font-family: 'Gochi Hand', cursive;\r\n   font-weight: bolder;\r\n   font-size: 20px;\r\n   color:gold;\r\n   text-transform: none;\r\n   letter-spacing: .05em;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Text<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-705fb6cea8bc86cab3e3124f6e91b669 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-q9tg16-373201b3abf619122f82dfd2ff610112'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the \u201cFont for your body text\u201d set in Enfold &gt; General Styling is applied to the countdown element. To custom style the countdown text please use the below CSS.<\/p>\n<pre><code> \r\n\r\n\/* Countdown Text *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   \r\n   font-weight: bolder;\r\n   font-size: 22px;\r\n   color:gold;\r\n   text-transform: capital;\r\n   letter-spacing: .05em;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-92qk0-40da5cfd49b31891678d87348191585e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Custom countdown text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom countdown text\" data-aria_expanded=\"Click to collapse: Custom countdown text\">Custom countdown text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>We have received requests to change the countdown element text from Seconds to Sec, Minutes to Min and so on. There are two ways to do this and each one has it&#8217;s own advantage and disadvantage. Let&#8217;s discuss both the methods.<\/p>\n<p><strong>Method\u00a01<\/strong>: Using a function in your child theme is probably the easiest way to make the changes so you do not have to worry about losing the changes when the theme is updated. However, the jQuery is executed after the page loads. The default\u00a0text is then replaced when the jQuery script runs usually within a second. This creates a flash of text. By using the below function in your child theme functions.php file, you can add your custom text to the countdown element.<\/p>\n\n<p><strong>Method 2<\/strong>: By editing the required PHP files we can change the countdown text. This method loads your custom text instantly unlike the previous one but you have to keep an eye on the changelog when the theme update is released and manually update the PHP file every time there is an update released.<\/p>\n<p>Before getting started, the\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">Enfold child theme<\/a>\u00a0should be installed and activated.<\/p>\n<p><strong>Step 1<\/strong>:\u00a0 First, create a folder named &#8220;shortcodes&#8221; in your\u00a0child theme directory <strong>wp-content\\themes\\enfold-child<\/strong>.<br \/><strong>Step 2<\/strong>: Go to <strong>wp-content\\themes\\enfold\\config-templatebuilder\\avia-shortcodes\\countdown <\/strong>and copy the <strong>countdown.php<\/strong> file to the <strong>child-theme\\shortcodes<\/strong> folder.<br \/><strong>Step 3<\/strong>: Open the countdown.php file and look for the below code. Here you will notice the different countdown text after &#8220;label_multi&#8221; go ahead and change the text from Seconds to Sec and so on.<\/p>\n<pre><code>$this-&gt;full_time_array = array(\r\n\t\t\t\t\r\n\t\t\t\t\t1 =&gt; array(\"interval\" =&gt; 1000\t\t , 'class'=&gt;'seconds', \t'label' =&gt; __('Second', 'avia_framework' ),\t'label_multi' =&gt; __('Seconds',  'avia_framework')),\r\n\t\t\t\t\t2 =&gt; array(\"interval\" =&gt; 60000\t\t , 'class'=&gt;'minutes', \t'label' =&gt; __('Minute', 'avia_framework' ),\t'label_multi' =&gt; __('Minutes',  'avia_framework')),\r\n\t\t\t\t\t3 =&gt; array(\"interval\" =&gt; 3600000\t , 'class'=&gt;'hours', \t'label' =&gt; __('Hour',  \t'avia_framework'),\t'label_multi' =&gt; __('Hours',  \t'avia_framework')),\r\n\t\t\t\t\t4 =&gt; array(\"interval\" =&gt; 86400000\t , 'class'=&gt;'days', \t'label' =&gt; __('Day',  \t'avia_framework' ), 'label_multi' =&gt; __('Days',  \t'avia_framework')),\r\n\t\t\t\t\t5 =&gt; array(\"interval\" =&gt; 604800000\t , 'class'=&gt;'weeks', \t'label' =&gt; __('Week',  \t'avia_framework' ),\t'label_multi' =&gt; __('Weeks',  \t'avia_framework')),\r\n\t\t\t\t\t6 =&gt; array(\"interval\" =&gt; 2678400000\t , 'class'=&gt;'months', \t'label' =&gt; __('Month',  'avia_framework' ),\t'label_multi' =&gt; __('Months',  \t'avia_framework')),\r\n\t\t\t\t\t7 =&gt; array(\"interval\" =&gt; 31536000000 , 'class'=&gt;'years', \t'label' =&gt; __('Year',  \t'avia_framework' ),\t'label_multi' =&gt; __('Years',  \t'avia_framework'))\r\n\t\t\t\t\r\n\t\t\t\t);<\/code><\/pre>\n<p><strong>Step 4<\/strong>: Finally, open the functions.php file in your child theme and add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#add-elements-to-alb\" target=\"_blank\" rel=\"noopener\">code provided in this link<\/a> to add the new countdown element from child theme to ALB.<\/p>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Border<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-2kqopfu-1abf04aa65cb09baa567dc37a4874e0a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"Number\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Number\" data-aria_expanded=\"Click to collapse: Number\">Number<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a border around the countdown number, add the below CSS to your website.<\/p>\n<pre><code> \r\n\r\n\/* Countdown number border *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time {\r\n\t border: 2px solid red;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-23qcdre-f948003ecc4d822b297226f3e91542af'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"Text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Text\" data-aria_expanded=\"Click to collapse: Text\">Text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a border around the countdown text, add the below CSS to your website:<\/p>\n<pre><code> \r\n\r\n\/* Countdown Text *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   \r\n\t border: 2px solid green;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-1qaweju-6620c3acecc022f5a28627e2a0861bb2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"Each Unit\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Each Unit\" data-aria_expanded=\"Click to collapse: Each Unit\">Each Unit<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You can change the default border style around each unit with the below CSS snippet:<\/p>\n<pre><code> \r\n\r\n\/* Each unit *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n     border: 2px solid blue;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-1btroqy-eee5360cd0d91db8da42dc8e90f343da'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"Countdown Element\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Countdown Element\" data-aria_expanded=\"Click to collapse: Countdown Element\">Countdown Element<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>add the below code to your site to display a border around all the units of the countdown element:<\/p>\n<pre><code> \r\n\r\n\/* Countdown element *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n    border: 2px solid cyan;\t\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-qpf02y-c870c86e8f0a6dd6b90b6d811f673c21'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"Remove default border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove default border\" data-aria_expanded=\"Click to collapse: Remove default border\">Remove default border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below CSS snippet will remove the default border around the countdown element<\/p>\n<pre><code> \r\n\r\n\/* Each unit *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tborder: none;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Background<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-8w2v8q-3154890d6b02b2e0981d1cd6ffbf8598'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"Number\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Number\" data-aria_expanded=\"Click to collapse: Number\">Number<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below CSS code will add a background color to the numbers in the countdown element.<\/p>\n<pre><code> \r\n\r\n\/* Countdown number  *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time {\r\n\t background: red;\r\n\t}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-251bhe2-3769c7e120bbf244adfa64f91cbe7390'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"Text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Text\" data-aria_expanded=\"Click to collapse: Text\">Text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will help you display a custom background color for the countdown text:<\/p>\n<pre><code> \r\n\r\n\/* Countdown Text *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {   \r\n\t background: green;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-1kpubka-985cf4306c992dd5d068f8b952323a8a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"Each Unit\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Each Unit\" data-aria_expanded=\"Click to collapse: Each Unit\">Each Unit<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add background color to each unit using the below CSS<\/p>\n<pre><code> \r\n\r\n\/* Each unit *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tbackground: blue;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-qep76y-53247ca2ae96987bb24099e60c498f4a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"Different background color for each unit\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Different background color for each unit\" data-aria_expanded=\"Click to collapse: Different background color for each unit\">Different background color for each unit<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Using the nth-child rule we can add a different background color to each unit of the countdown element =. Please copy the below code to your website to display multiple background colors.<\/p>\n<pre><code> \r\n\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(1) .av-countdown-cell-inner {\r\n\tbackground: #e1306c;\r\n}\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(2) .av-countdown-cell-inner {\r\n\tbackground: #ff0000;\r\n}\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(3) .av-countdown-cell-inner {\r\n\tbackground: #fbb034;\r\n}\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(4) .av-countdown-cell-inner {\r\n\tbackground: #ffdd00;\r\n}\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(5) .av-countdown-cell-inner {\r\n\tbackground: #c1d82f;\r\n}\r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell:nth-child(6) .av-countdown-cell-inner {\r\n\tbackground: #00a4e4;\r\n}\r\n\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-rouakq-8202135a2a55f4ec6a2d8f7f4ed4a7c6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Countdown Element\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Countdown Element\" data-aria_expanded=\"Click to collapse: Countdown Element\">Countdown Element<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a background color or image to the whole countdown element using the below CSS<\/p>\n<pre><code> \r\n\r\n\/* Countdown element *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n    background: cyan;\t\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Shape<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-1o7gs7e-eaee24be3938025ed5bb99d7ccaedacb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"Circular numbers\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Circular numbers\" data-aria_expanded=\"Click to collapse: Circular numbers\">Circular numbers<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\r\n\/* Align number and text in each unit *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: column;\r\n}\r\n\r\n\/* Circle background *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time {\r\n\tbackground: gold;\r\n  width: 90px;\r\n  max-width: 90px;\r\n  height: 90px;\r\n  border-radius: 90px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-nqhju2-2a3967c26d1eaa7f837ce75052c1d434'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Square units\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Square units\" data-aria_expanded=\"Click to collapse: Square units\">Square units<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To give each unit a perfect square shape and center align the units please use the below CSS:<\/p>\n<pre><code> \r\n\r\n\/* Align units *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n}\r\n\r\n\r\n\/* Unit size *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell {\r\n\twidth: 100px;\r\n\theight: 100px;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-3009ka-67c2a816f09479b92f45c4a530e93c8a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Circle units\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Circle units\" data-aria_expanded=\"Click to collapse: Circle units\">Circle units<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the shape of the units to circle please use the below CSS<\/p>\n<pre><code>\r\n\/* Align units *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n}\r\n\r\n\r\n\/* Unit size *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell {\r\n\twidth: 100px;\r\n\theight: 100px;\r\n}\r\n\r\n\/* Circle units *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tborder-radius: 100px;\r\n\tbackground: gold;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Alignment<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-1kkd4sq-cbb76b02f1d782113bd1f2ac589aae26'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Number left, text right\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Number left, text right\" data-aria_expanded=\"Click to collapse: Number left, text right\">Number left, text right<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will align the countdown number to the left and text to the right horizontally.<\/p>\n<pre><code> \r\n\r\n\/* Countdown alignment number left, text right *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tdisplay: flex;\r\n\talign-content: center;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-18jy04q-fbcd6575b6662a4c8bc72772c4ec808d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"Number right, text left\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Number right, text left\" data-aria_expanded=\"Click to collapse: Number right, text left\">Number right, text left<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will align the text to the left and numbers to the right.<\/p>\n<pre><code> \r\n\r\n\/* Countdown alignment *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tdisplay: flex;\r\n\talign-content: center;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tflex-direction: row-reverse;\r\n}\r\n\r\n\/* Countdown Text *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-time-label {  \r\n\tmargin-right: 15px;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-ovzgp6-f185c7b69f237e113e43b76880905157'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"Countdown text on top\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Countdown text on top\" data-aria_expanded=\"Click to collapse: Countdown text on top\">Countdown text on top<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will move the countdown text on top of the numbers<\/p>\n<pre><code>\r\n\r\n\/* Countdown alignment *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n\tdisplay: flex;\r\n\talign-content: center;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tflex-direction: column-reverse;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Countdown Custom Size<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-whfuui-9fec4d591ea65897cabd4adf3ea96314'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"Width and Height\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Width and Height\" data-aria_expanded=\"Click to collapse: Width and Height\">Width and Height<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To set a custom width or height of the countdown units please use the below code:<\/p>\n<pre><code> \r\n\r\n\/* Center align units *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n\/* Countdown unit size*\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n    width: 100px;\r\n    height: 120px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n}\r\n\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Responsive mode<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-sc4cbu-c57883b074aa3183db9242ed30a601d7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-22' data-fake-id='#toggle-id-22' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-22' data-slide-speed=\"200\" data-title=\"Wrap to a new column on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Wrap to a new column on mobile\" data-aria_expanded=\"Click to collapse: Wrap to a new column on mobile\">Wrap to a new column on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-22' aria-labelledby='toggle-toggle-id-22' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The countdown units takes the equal width of its parent container, sometimes depending on the number of countdown units, the width of each unit may be very small especially on a mobile device. This situation can be solved by simply moving each unit to the next line as the screen size get&#8217;s smaller. And the below code will just do that for you \ud83d\ude42<\/p>\n<pre><code> \r\n\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-timer-inner {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n\/* Timer width *\/\r\n#top .av-countdown-timer.my-custom-countdown .av-countdown-cell .av-countdown-cell-inner {\r\n    min-width: 100px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n}\r\n\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Enable Month and Year<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wkf0d8-245491228f7e77dabcc623539f630e80 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We recommend installing the\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">Enfold child theme<\/a>\u00a0before we get started with the steps to add the Month and Year to the countdown units.<\/p>\n<p>Shall we start?<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jl9brptc-10695917433f54d3b14f3bbe94921ba4 av-minimal-toggle toggle_close_all' ><section class='av_toggle_section av-1zxxz2i-946725cfcff6f48200deb3c100289ad0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-23' data-fake-id='#toggle-id-23' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-23' data-slide-speed=\"200\" data-title=\"Step 1\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1\" data-aria_expanded=\"Click to collapse: Step 1\">Step 1<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-23' aria-labelledby='toggle-toggle-id-23' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>First, Go to your\u00a0child theme directory <strong>wp-content\\themes\\enfold-child\u00a0<\/strong>and\u00a0create a folder named &#8220;<strong>shortcodes<\/strong>&#8220;.<\/p>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-1gifsfe-fb35d95d5ecdcfa86a35501830bdc88b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-24' data-fake-id='#toggle-id-24' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-24' data-slide-speed=\"200\" data-title=\"Step 2\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2\" data-aria_expanded=\"Click to collapse: Step 2\">Step 2<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-24' aria-labelledby='toggle-toggle-id-24' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Go to <strong>wp-content\\themes\\enfold\\config-templatebuilder\\avia-shortcodes\\countdown <\/strong>and copy the <strong>countdown.php<\/strong> file to the <strong>child-theme\\shortcodes<\/strong> folder.<\/p>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-1amq1pm-e6d2c1ad5c511556b51e2a2829fab457'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-25' data-fake-id='#toggle-id-25' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-25' data-slide-speed=\"200\" data-title=\"Step 3\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3\" data-aria_expanded=\"Click to collapse: Step 3\">Step 3<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-25' aria-labelledby='toggle-toggle-id-25' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Open the countdown.php file and look for the below code. Here you will notice that the month and year units are commented. All you have to do is to remove the comments and save the file in your child-theme\\shortcodes folder.<\/p>\n<pre><code> \r\n\t\t\t\t$this-&gt;time_array = array(\r\n\t\t\t\t\t\t\t\t__('Second',  \t'avia_framework' ) \t=&gt;'1',\r\n\t\t\t\t\t\t\t\t__('Minute',  \t'avia_framework' ) \t=&gt;'2',\t\r\n\t\t\t\t\t\t\t\t__('Hour',  \t'avia_framework' ) \t=&gt;'3',\r\n\t\t\t\t\t\t\t\t__('Day',  \t\t'avia_framework' ) \t=&gt;'4',\r\n\t\t\t\t\t\t\t\t__('Week',  \t'avia_framework' ) \t=&gt;'5',\r\n\t\t\t\t\t\t\t\t\/*\r\n\t\t\t\t\t\t\t\t__('Month',  \t'avia_framework' ) \t=&gt;'6',\r\n\t\t\t\t\t\t\t\t__('Year',  \t'avia_framework' ) \t=&gt;'7'\r\n\t\t\t\t\t\t\t\t*\/\r\n\t\t\t\t\t\t\t);\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section><section class='av_toggle_section av-n0nc6i-ccc618ba8c0e94b63460f73c1bcf4402'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-26' data-fake-id='#toggle-id-26' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-26' data-slide-speed=\"200\" data-title=\"Step 4\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 4\" data-aria_expanded=\"Click to collapse: Step 4\">Step 4<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-26' aria-labelledby='toggle-toggle-id-26' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Finally, open the functions.php file in your child theme and add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#add-elements-to-alb\" target=\"_blank\" rel=\"noopener\">code provided in this link<\/a> to add the new countdown element from child theme to ALB.<\/p>\n<\/div><\/div><\/div><\/section><\/div>\n<div  class='hr av-5qr9rs-37c411ee21c1d8ae4884c9a363ebe179 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-n8ieo-068400e20cde8564858eed20be1d30e1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-dcz0w-5953da454c239cb564c1eacfc78f3ec4 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9cpco-0de7396d1bd2beee41e3744692d5cb59 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=8l4_cbo-PuU\">Animated countdown tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-272","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":8,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":13532,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/272\/revisions\/13532"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}