WordPress.org
Get WordPress

Plugin Directory

Changeset 3407592


Ignore:
Timestamp:
12/02/2025 07:18:01 AM (4 months ago)
Author:
hmbashar
Message:

Update to version 1.2.0 from GitHub

Location:
cb-countdown-timer-widget-for-elementor
Files:
2 added
10 edited
1 copied

Legend:

Unmodified
Added
Removed

  • cb-countdown-timer-widget-for-elementor/tags/1.2.0/assets/style.css

    r3313690 r3407592  
    66    margin: 0;
    77}
     8/* Wrapper: gradient background like the design */
     9.cb-countdown-timer-widget-area {
     10    padding: 40px 24px;
     11    border-radius: 28px;
     12    background: linear-gradient(90deg, #ff7a18, #ff3a55, #ffb347, #35d6a8, #10a7b5);
     13    display: flex;
     14    justify-content: center;
     15}
     16
     17/* Layout of the items */
     18.cb-countdown-timer {
     19    display: flex;
     20    gap: 24px; /* will get overridden by your inline gap from Elementor */
     21    justify-content: center;
     22    align-items: flex-start;
     23    flex-wrap: wrap;
     24}
     25
     26/* Each unit (month / day / hour / etc.) */
     27.cb-countdown-timer p {
     28    position: relative;
     29    margin: 0;
     30    width: 120px;
     31    height: 120px;
     32    border-radius: 50%;
     33    display: flex;
     34    align-items: center;
     35    justify-content: center;
     36
     37    /* outer soft circle */
     38    background: rgba(255, 255, 255, 0.18);
     39    box-shadow:
     40        0 10px 18px rgba(0, 0, 0, 0.25),
     41        0 0 0 4px rgba(255, 255, 255, 0.15);
     42    font-weight: 700;
     43    font-size: 34px; /* main number size, Elementor typography can override */
     44    color: #1f2933;
     45    text-align: center;
     46}
     47
     48/* inner circle to create the double ring effect */
     49.cb-countdown-timer p::before {
     50    content: '';
     51    position: absolute;
     52    inset: 10px;
     53    border-radius: 50%;
     54    background: #f9fafb;
     55    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
     56    z-index: -1;
     57}
     58
     59/* Put the number above the inner circle */
     60.cb-countdown-timer p {
     61    z-index: 1;
     62}
     63
     64/* Label (MONTH / DAYS / etc.) */
     65.cb-countdown-timer p span {
     66    position: absolute;
     67    bottom: -28px;
     68    left: 50%;
     69    transform: translateX(-50%);
     70    display: block;
     71    margin: 0;
     72    font-size: 12px;
     73    font-weight: 600;
     74    letter-spacing: 0.18em;
     75    text-transform: uppercase;
     76    color: #f9fafb; /* Elementor text color control can override this */
     77}
     78
     79/* Optional: keep things responsive on smaller screens */
     80@media (max-width: 767px) {
     81    .cb-countdown-timer-widget-area {
     82        padding: 24px 16px;
     83    }
     84    .cb-countdown-timer p {
     85        width: 90px;
     86        height: 90px;
     87        font-size: 24px;
     88    }
     89    .cb-countdown-timer p span {
     90        bottom: -22px;
     91        font-size: 10px;
     92        letter-spacing: 0.12em;
     93    }
     94}

  • cb-countdown-timer-widget-for-elementor/tags/1.2.0/config.php

    r3313690 r3407592  
    2121     * @var string The addon version.
    2222     */
    23     const VERSION = '1.1.0';
     23    const VERSION = '1.2.0';
    2424
    2525    /**

  • cb-countdown-timer-widget-for-elementor/tags/1.2.0/countdown-widget.php

    r3313690 r3407592  
    33Plugin Name: CB Countdown Timer Widget for Elementor
    44Description: Custom widget for Elementor that displays a countdown timer.
    5 Version: 1.1.0
     5Version: 1.2.0
    66Author: Md Abul Bashar
    77Author URI: https://facebook.com/hmbashar

  • cb-countdown-timer-widget-for-elementor/tags/1.2.0/readme.txt

    r3313690 r3407592  
    33Tags: elementor, countdown, timer
    44Requires at least: 4.7
    5 Tested up to: 6.8
    6 Stable tag: 1.1.0
     5Tested up to: 6.9
     6Stable tag: 1.2.0
    77License: GPLv2 or later
    88License URI: https://www.gnu.org/licenses/gpl-2.0.html
    9 Elementor tested up to: 3.29
    10 Elementor Pro tested up to: 3.15
     9Elementor tested up to: 3.33
     10Elementor Pro tested up to: 3.33
    1111Requires Plugins: elementor
     12Requires PHP: 7.4
     13
     14A customizable Elementor countdown widget to highlight upcoming events, sales, launches, and limited-time offers.
     15
    1216
    1317== Description ==
    … …  
    3741
    3842== Changelog ==
     43= 1.2.0 =
     44* Initial release.
     45
    3946= 1.0 =
    4047* Initial release.

  • cb-countdown-timer-widget-for-elementor/tags/1.2.0/widget.php

    r3313690 r3407592  
    3131
    3232
    33     protected function register_controls()
    34     {
    35 
    36         // Content Tab Start
    37 
    38         $this->start_controls_section(
    39             'cb-countdown-section_setting',
    40             [
    41                 'label' => esc_html__('Countdown Settings', 'cb-countdown-timer'),
    42                 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    43             ]
    44         );
    45 
    46         $this->add_control(
    47             'cb_countDown_target_date',
    48             [
    49                 'label' => esc_html__('Date and Time', 'cb-countdown-timer'),
    50                 'type' => \Elementor\Controls_Manager::DATE_TIME,
    51                 'default' => '2023-05-31 00:00:00',
    52             ]
    53         );
    54 
    55         $this->end_controls_section();
    56 
    57         // Content Tab End
    58 
    59 
    60         // Style Tab Start
    61 
    62         $this->start_controls_section(
    63             'cb_countdown_switch',
    64             [
    65                 'label' => esc_html__('Switch', 'cb-countdown-timer'),
    66                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    67             ]
    68         );
    69 
    70         $this->add_control(
    71             'cb-month-switch',
    72             [
    73                 'label' => esc_html__('Months', 'cb-countdown-timer'),
    74                 'type' => \Elementor\Controls_Manager::SWITCHER,
    75                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    76                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    77                 'return_value' => 'yes',
    78                 'default' => 'yes',
    79             ]
    80         );
    81         $this->add_control(
    82             'cb-days-switch',
    83             [
    84                 'label' => esc_html__('Days', 'cb-countdown-timer'),
    85                 'type' => \Elementor\Controls_Manager::SWITCHER,
    86                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    87                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    88                 'return_value' => 'yes',
    89                 'default' => 'yes',
    90             ]
    91         );
    92         $this->add_control(
    93             'cb-hours-switch',
    94             [
    95                 'label' => esc_html__('Hours', 'cb-countdown-timer'),
    96                 'type' => \Elementor\Controls_Manager::SWITCHER,
    97                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    98                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    99                 'return_value' => 'yes',
    100                 'default' => 'yes',
    101             ]
    102         );
    103 
    104         $this->add_control(
    105             'cb-minutes-switch',
    106             [
    107                 'label' => esc_html__('Minutes', 'cb-countdown-timer'),
    108                 'type' => \Elementor\Controls_Manager::SWITCHER,
    109                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    110                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    111                 'return_value' => 'yes',
    112                 'default' => 'yes',
    113             ]
    114         );
    115 
    116         $this->add_control(
    117             'cb-seconds-switch',
    118             [
    119                 'label' => esc_html__('Seconds', 'cb-countdown-timer'),
    120                 'type' => \Elementor\Controls_Manager::SWITCHER,
    121                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    122                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    123                 'return_value' => 'yes',
    124                 'default' => 'yes',
    125             ]
    126         );
    127 
    128 
    129         $this->end_controls_section();
    130 
    131         // Style Tab End
    132 
    133         $this->start_controls_section(
    134             'cb-coundown_style_section',
    135             [
    136                 'label' => esc_html__('Style', 'cb-countdown-timer'),
    137                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    138             ]
    139         );
    140 
    141         $this->add_group_control(
    142             \Elementor\Group_Control_Typography::get_type(),
    143             [
    144                 'name' => 'cb_counDown_text_typography',
    145                 'selector' => '{{WRAPPER}} .cb-countdown-timer p',
    146             ]
    147         );
    148 
    149         $this->add_control(
    150             'cb_coundown_text_color',
    151             [
    152                 'label' => esc_html__('Text Color', 'cb-countdown-timer'),
    153                 'type' => \Elementor\Controls_Manager::COLOR,
    154                 'selectors' => [
    155                     '{{WRAPPER}} .cb-countdown-timer p' => 'color: {{VALUE}}',
     33protected function register_controls() {
     34
     35    /**
     36     * CONTENT TAB
     37     */
     38    $this->start_controls_section(
     39        'cb-countdown-section_setting',
     40        [
     41            'label' => esc_html__( 'Countdown Settings', 'cb-countdown-timer' ),
     42            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
     43        ]
     44    );
     45
     46    $this->add_control(
     47        'cb_countDown_target_date',
     48        [
     49            'label'   => esc_html__( 'Date and Time', 'cb-countdown-timer' ),
     50            'type'    => \Elementor\Controls_Manager::DATE_TIME,
     51            'default' => '2033-05-31 00:00:00',
     52        ]
     53    );
     54
     55    $this->end_controls_section();
     56
     57    /**
     58     * STYLE TAB → VISIBILITY SWITCHES
     59     */
     60    $this->start_controls_section(
     61        'cb_countdown_switch',
     62        [
     63            'label' => esc_html__( 'Units Visibility', 'cb-countdown-timer' ),
     64            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     65        ]
     66    );
     67
     68    $this->add_control(
     69        'cb-month-switch',
     70        [
     71            'label'        => esc_html__( 'Months', 'cb-countdown-timer' ),
     72            'type'         => \Elementor\Controls_Manager::SWITCHER,
     73            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     74            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     75            'return_value' => 'yes',
     76            'default'      => 'yes',
     77        ]
     78    );
     79
     80    $this->add_control(
     81        'cb-days-switch',
     82        [
     83            'label'        => esc_html__( 'Days', 'cb-countdown-timer' ),
     84            'type'         => \Elementor\Controls_Manager::SWITCHER,
     85            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     86            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     87            'return_value' => 'yes',
     88            'default'      => 'yes',
     89        ]
     90    );
     91
     92    $this->add_control(
     93        'cb-hours-switch',
     94        [
     95            'label'        => esc_html__( 'Hours', 'cb-countdown-timer' ),
     96            'type'         => \Elementor\Controls_Manager::SWITCHER,
     97            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     98            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     99            'return_value' => 'yes',
     100            'default'      => 'yes',
     101        ]
     102    );
     103
     104    $this->add_control(
     105        'cb-minutes-switch',
     106        [
     107            'label'        => esc_html__( 'Minutes', 'cb-countdown-timer' ),
     108            'type'         => \Elementor\Controls_Manager::SWITCHER,
     109            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     110            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     111            'return_value' => 'yes',
     112            'default'      => 'yes',
     113        ]
     114    );
     115
     116    $this->add_control(
     117        'cb-seconds-switch',
     118        [
     119            'label'        => esc_html__( 'Seconds', 'cb-countdown-timer' ),
     120            'type'         => \Elementor\Controls_Manager::SWITCHER,
     121            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     122            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     123            'return_value' => 'yes',
     124            'default'      => 'yes',
     125        ]
     126    );
     127
     128    $this->end_controls_section();
     129
     130    /**
     131     * STYLE TAB → WRAPPER
     132     */
     133    $this->start_controls_section(
     134        'cb_countdown_wrapper_style',
     135        [
     136            'label' => esc_html__( 'Wrapper', 'cb-countdown-timer' ),
     137            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     138        ]
     139    );
     140
     141    $this->add_group_control(
     142        \Elementor\Group_Control_Background::get_type(),
     143        [
     144            'name'     => 'cb_wrapper_background',
     145            'label'    => esc_html__( 'Background', 'cb-countdown-timer' ),
     146            'types'    => [ 'classic', 'gradient' ],
     147            'selector' => '{{WRAPPER}} .cb-countdown-timer-widget-area',
     148        ]
     149    );
     150
     151    $this->add_responsive_control(
     152        'cb_wrapper_padding',
     153        [
     154            'label'      => esc_html__( 'Padding', 'cb-countdown-timer' ),
     155            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
     156            'size_units' => [ 'px', '%', 'em' ],
     157            'default'    => [
     158                'top'    => 40,
     159                'right'  => 24,
     160                'bottom' => 40,
     161                'left'   => 24,
     162                'unit'   => 'px',
     163            ],
     164            'selectors'  => [
     165                '{{WRAPPER}} .cb-countdown-timer-widget-area' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     166            ],
     167        ]
     168    );
     169
     170    $this->add_responsive_control(
     171        'cb_wrapper_radius',
     172        [
     173            'label'      => esc_html__( 'Border Radius', 'cb-countdown-timer' ),
     174            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
     175            'size_units' => [ 'px', '%' ],
     176            'default'    => [
     177                'top'    => 28,
     178                'right'  => 28,
     179                'bottom' => 28,
     180                'left'   => 28,
     181                'unit'   => 'px',
     182            ],
     183            'selectors'  => [
     184                '{{WRAPPER}} .cb-countdown-timer-widget-area' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     185            ],
     186        ]
     187    );
     188
     189    $this->end_controls_section();
     190
     191    /**
     192     * STYLE TAB → CIRCLES (NUMBER)
     193     */
     194    $this->start_controls_section(
     195        'cb_coundown_circle_style_section',
     196        [
     197            'label' => esc_html__( 'Circle / Number', 'cb-countdown-timer' ),
     198            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     199        ]
     200    );
     201
     202    // Circle size
     203    $this->add_responsive_control(
     204        'cb_circle_size',
     205        [
     206            'label'      => esc_html__( 'Circle Size', 'cb-countdown-timer' ),
     207            'type'       => \Elementor\Controls_Manager::SLIDER,
     208            'size_units' => [ 'px' ],
     209            'range'      => [
     210                'px' => [
     211                    'min' => 60,
     212                    'max' => 220,
    156213                ],
    157             ]
    158         );
    159 
    160         $this->add_group_control(
    161             \Elementor\Group_Control_Typography::get_type(),
    162             [
    163                 'name' => 'cb_counDown_number_typography',
    164                 'selector' => '{{WRAPPER}} .cb-countdown-timer p span',
    165             ]
    166         );
    167 
    168         $this->add_control(
    169             'cb_coundown_number_color',
    170             [
    171                 'label' => esc_html__('Number Color', 'cb-countdown-timer'),
    172                 'type' => \Elementor\Controls_Manager::COLOR,
    173                 'selectors' => [
    174                     '{{WRAPPER}} .cb-countdown-timer p span' => 'color: {{VALUE}}',
     214            ],
     215            'default'    => [
     216                'size' => 120,
     217                'unit' => 'px',
     218            ],
     219            'selectors'  => [
     220                '{{WRAPPER}} .cb-countdown-timer p' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
     221            ],
     222        ]
     223    );
     224
     225    // Outer circle background
     226    $this->add_control(
     227        'cb_circle_outer_bg',
     228        [
     229            'label'     => esc_html__( 'Outer Circle Color', 'cb-countdown-timer' ),
     230            'type'      => \Elementor\Controls_Manager::COLOR,
     231            'selectors' => [
     232                '{{WRAPPER}} .cb-countdown-timer p' => 'background: {{VALUE}};',
     233            ],
     234        ]
     235    );
     236
     237    // Inner circle background (pseudo-element)
     238    $this->add_control(
     239        'cb_circle_inner_bg',
     240        [
     241            'label'     => esc_html__( 'Inner Circle Color', 'cb-countdown-timer' ),
     242            'type'      => \Elementor\Controls_Manager::COLOR,
     243            'selectors' => [
     244                '{{WRAPPER}} .cb-countdown-timer p::before' => 'background: {{VALUE}};',
     245            ],
     246        ]
     247    );
     248
     249    // Circle shadow
     250    $this->add_group_control(
     251        \Elementor\Group_Control_Box_Shadow::get_type(),
     252        [
     253            'name'     => 'cb_circle_shadow',
     254            'selector' => '{{WRAPPER}} .cb-countdown-timer p',
     255        ]
     256    );
     257
     258    // Number typography
     259    $this->add_group_control(
     260        \Elementor\Group_Control_Typography::get_type(),
     261        [
     262            'name'     => 'cb_countdown_number_typography',
     263            'label'    => esc_html__( 'Number Typography', 'cb-countdown-timer' ),
     264            'selector' => '{{WRAPPER}} .cb-countdown-timer p',
     265        ]
     266    );
     267
     268    // Number color
     269    $this->add_control(
     270        'cb_countdown_number_color',
     271        [
     272            'label'     => esc_html__( 'Number Color', 'cb-countdown-timer' ),
     273            'type'      => \Elementor\Controls_Manager::COLOR,
     274            'selectors' => [
     275                '{{WRAPPER}} .cb-countdown-timer p' => 'color: {{VALUE}};',
     276            ],
     277        ]
     278    );
     279
     280    // Gap between circles (your existing control, kept here)
     281    $this->add_control(
     282        'cb_countdown_gap',
     283        [
     284            'label'   => esc_html__( 'Gap Between Circles (px)', 'cb-countdown-timer' ),
     285            'type'    => \Elementor\Controls_Manager::NUMBER,
     286            'min'     => 5,
     287            'max'     => 100,
     288            'step'    => 1,
     289            'default' => 24,
     290        ]
     291    );
     292
     293    $this->end_controls_section();
     294
     295    /**
     296     * STYLE TAB → LABELS (MONTH / DAYS / ETC.)
     297     */
     298    $this->start_controls_section(
     299        'cb_coundown_label_style_section',
     300        [
     301            'label' => esc_html__( 'Labels', 'cb-countdown-timer' ),
     302            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     303        ]
     304    );
     305
     306    $this->add_group_control(
     307        \Elementor\Group_Control_Typography::get_type(),
     308        [
     309            'name'     => 'cb_countdown_label_typography',
     310            'label'    => esc_html__( 'Label Typography', 'cb-countdown-timer' ),
     311            'selector' => '{{WRAPPER}} .cb-countdown-timer p span',
     312        ]
     313    );
     314
     315    $this->add_control(
     316        'cb_countdown_label_color',
     317        [
     318            'label'     => esc_html__( 'Label Color', 'cb-countdown-timer' ),
     319            'type'      => \Elementor\Controls_Manager::COLOR,
     320            'selectors' => [
     321                '{{WRAPPER}} .cb-countdown-timer p span' => 'color: {{VALUE}};',
     322            ],
     323        ]
     324    );
     325
     326    // Distance of label from circle bottom
     327    $this->add_responsive_control(
     328        'cb_label_offset',
     329        [
     330            'label'      => esc_html__( 'Label Offset', 'cb-countdown-timer' ),
     331            'type'       => \Elementor\Controls_Manager::SLIDER,
     332            'size_units' => [ 'px' ],
     333            'range'      => [
     334                'px' => [
     335                    'min' => -40,
     336                    'max' => 40,
    175337                ],
    176             ]
    177         );
    178         $this->add_control(
    179             'cb_countdown_gap',
    180             [
    181                 'label' => esc_html__('Gap', 'textdomain'),
    182                 'type' => \Elementor\Controls_Manager::NUMBER,
    183                 'min' => 5,
    184                 'max' => 100,
    185                 'step' => 5,
    186                 'default' => 15,
    187             ]
    188         );
    189 
    190         $this->end_controls_section();
    191     }
     338            ],
     339            'default'    => [
     340                'size' => -28,
     341                'unit' => 'px',
     342            ],
     343            'selectors'  => [
     344                '{{WRAPPER}} .cb-countdown-timer p span' => 'bottom: {{SIZE}}{{UNIT}};',
     345            ],
     346        ]
     347    );
     348
     349    $this->end_controls_section();
     350}
     351
    192352
    193353

  • cb-countdown-timer-widget-for-elementor/trunk/assets/style.css

    r3313690 r3407592  
    66    margin: 0;
    77}
     8/* Wrapper: gradient background like the design */
     9.cb-countdown-timer-widget-area {
     10    padding: 40px 24px;
     11    border-radius: 28px;
     12    background: linear-gradient(90deg, #ff7a18, #ff3a55, #ffb347, #35d6a8, #10a7b5);
     13    display: flex;
     14    justify-content: center;
     15}
     16
     17/* Layout of the items */
     18.cb-countdown-timer {
     19    display: flex;
     20    gap: 24px; /* will get overridden by your inline gap from Elementor */
     21    justify-content: center;
     22    align-items: flex-start;
     23    flex-wrap: wrap;
     24}
     25
     26/* Each unit (month / day / hour / etc.) */
     27.cb-countdown-timer p {
     28    position: relative;
     29    margin: 0;
     30    width: 120px;
     31    height: 120px;
     32    border-radius: 50%;
     33    display: flex;
     34    align-items: center;
     35    justify-content: center;
     36
     37    /* outer soft circle */
     38    background: rgba(255, 255, 255, 0.18);
     39    box-shadow:
     40        0 10px 18px rgba(0, 0, 0, 0.25),
     41        0 0 0 4px rgba(255, 255, 255, 0.15);
     42    font-weight: 700;
     43    font-size: 34px; /* main number size, Elementor typography can override */
     44    color: #1f2933;
     45    text-align: center;
     46}
     47
     48/* inner circle to create the double ring effect */
     49.cb-countdown-timer p::before {
     50    content: '';
     51    position: absolute;
     52    inset: 10px;
     53    border-radius: 50%;
     54    background: #f9fafb;
     55    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18);
     56    z-index: -1;
     57}
     58
     59/* Put the number above the inner circle */
     60.cb-countdown-timer p {
     61    z-index: 1;
     62}
     63
     64/* Label (MONTH / DAYS / etc.) */
     65.cb-countdown-timer p span {
     66    position: absolute;
     67    bottom: -28px;
     68    left: 50%;
     69    transform: translateX(-50%);
     70    display: block;
     71    margin: 0;
     72    font-size: 12px;
     73    font-weight: 600;
     74    letter-spacing: 0.18em;
     75    text-transform: uppercase;
     76    color: #f9fafb; /* Elementor text color control can override this */
     77}
     78
     79/* Optional: keep things responsive on smaller screens */
     80@media (max-width: 767px) {
     81    .cb-countdown-timer-widget-area {
     82        padding: 24px 16px;
     83    }
     84    .cb-countdown-timer p {
     85        width: 90px;
     86        height: 90px;
     87        font-size: 24px;
     88    }
     89    .cb-countdown-timer p span {
     90        bottom: -22px;
     91        font-size: 10px;
     92        letter-spacing: 0.12em;
     93    }
     94}

  • cb-countdown-timer-widget-for-elementor/trunk/config.php

    r3313690 r3407592  
    2121     * @var string The addon version.
    2222     */
    23     const VERSION = '1.1.0';
     23    const VERSION = '1.2.0';
    2424
    2525    /**

  • cb-countdown-timer-widget-for-elementor/trunk/countdown-widget.php

    r3313690 r3407592  
    33Plugin Name: CB Countdown Timer Widget for Elementor
    44Description: Custom widget for Elementor that displays a countdown timer.
    5 Version: 1.1.0
     5Version: 1.2.0
    66Author: Md Abul Bashar
    77Author URI: https://facebook.com/hmbashar

  • cb-countdown-timer-widget-for-elementor/trunk/readme.txt

    r3313690 r3407592  
    33Tags: elementor, countdown, timer
    44Requires at least: 4.7
    5 Tested up to: 6.8
    6 Stable tag: 1.1.0
     5Tested up to: 6.9
     6Stable tag: 1.2.0
    77License: GPLv2 or later
    88License URI: https://www.gnu.org/licenses/gpl-2.0.html
    9 Elementor tested up to: 3.29
    10 Elementor Pro tested up to: 3.15
     9Elementor tested up to: 3.33
     10Elementor Pro tested up to: 3.33
    1111Requires Plugins: elementor
     12Requires PHP: 7.4
     13
     14A customizable Elementor countdown widget to highlight upcoming events, sales, launches, and limited-time offers.
     15
    1216
    1317== Description ==
    … …  
    3741
    3842== Changelog ==
     43= 1.2.0 =
     44* Initial release.
     45
    3946= 1.0 =
    4047* Initial release.

  • cb-countdown-timer-widget-for-elementor/trunk/widget.php

    r3313690 r3407592  
    3131
    3232
    33     protected function register_controls()
    34     {
    35 
    36         // Content Tab Start
    37 
    38         $this->start_controls_section(
    39             'cb-countdown-section_setting',
    40             [
    41                 'label' => esc_html__('Countdown Settings', 'cb-countdown-timer'),
    42                 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    43             ]
    44         );
    45 
    46         $this->add_control(
    47             'cb_countDown_target_date',
    48             [
    49                 'label' => esc_html__('Date and Time', 'cb-countdown-timer'),
    50                 'type' => \Elementor\Controls_Manager::DATE_TIME,
    51                 'default' => '2023-05-31 00:00:00',
    52             ]
    53         );
    54 
    55         $this->end_controls_section();
    56 
    57         // Content Tab End
    58 
    59 
    60         // Style Tab Start
    61 
    62         $this->start_controls_section(
    63             'cb_countdown_switch',
    64             [
    65                 'label' => esc_html__('Switch', 'cb-countdown-timer'),
    66                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    67             ]
    68         );
    69 
    70         $this->add_control(
    71             'cb-month-switch',
    72             [
    73                 'label' => esc_html__('Months', 'cb-countdown-timer'),
    74                 'type' => \Elementor\Controls_Manager::SWITCHER,
    75                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    76                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    77                 'return_value' => 'yes',
    78                 'default' => 'yes',
    79             ]
    80         );
    81         $this->add_control(
    82             'cb-days-switch',
    83             [
    84                 'label' => esc_html__('Days', 'cb-countdown-timer'),
    85                 'type' => \Elementor\Controls_Manager::SWITCHER,
    86                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    87                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    88                 'return_value' => 'yes',
    89                 'default' => 'yes',
    90             ]
    91         );
    92         $this->add_control(
    93             'cb-hours-switch',
    94             [
    95                 'label' => esc_html__('Hours', 'cb-countdown-timer'),
    96                 'type' => \Elementor\Controls_Manager::SWITCHER,
    97                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    98                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    99                 'return_value' => 'yes',
    100                 'default' => 'yes',
    101             ]
    102         );
    103 
    104         $this->add_control(
    105             'cb-minutes-switch',
    106             [
    107                 'label' => esc_html__('Minutes', 'cb-countdown-timer'),
    108                 'type' => \Elementor\Controls_Manager::SWITCHER,
    109                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    110                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    111                 'return_value' => 'yes',
    112                 'default' => 'yes',
    113             ]
    114         );
    115 
    116         $this->add_control(
    117             'cb-seconds-switch',
    118             [
    119                 'label' => esc_html__('Seconds', 'cb-countdown-timer'),
    120                 'type' => \Elementor\Controls_Manager::SWITCHER,
    121                 'label_on' => esc_html__('On', 'cb-countdown-timer'),
    122                 'label_off' => esc_html__('Off', 'cb-countdown-timer'),
    123                 'return_value' => 'yes',
    124                 'default' => 'yes',
    125             ]
    126         );
    127 
    128 
    129         $this->end_controls_section();
    130 
    131         // Style Tab End
    132 
    133         $this->start_controls_section(
    134             'cb-coundown_style_section',
    135             [
    136                 'label' => esc_html__('Style', 'cb-countdown-timer'),
    137                 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    138             ]
    139         );
    140 
    141         $this->add_group_control(
    142             \Elementor\Group_Control_Typography::get_type(),
    143             [
    144                 'name' => 'cb_counDown_text_typography',
    145                 'selector' => '{{WRAPPER}} .cb-countdown-timer p',
    146             ]
    147         );
    148 
    149         $this->add_control(
    150             'cb_coundown_text_color',
    151             [
    152                 'label' => esc_html__('Text Color', 'cb-countdown-timer'),
    153                 'type' => \Elementor\Controls_Manager::COLOR,
    154                 'selectors' => [
    155                     '{{WRAPPER}} .cb-countdown-timer p' => 'color: {{VALUE}}',
     33protected function register_controls() {
     34
     35    /**
     36     * CONTENT TAB
     37     */
     38    $this->start_controls_section(
     39        'cb-countdown-section_setting',
     40        [
     41            'label' => esc_html__( 'Countdown Settings', 'cb-countdown-timer' ),
     42            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
     43        ]
     44    );
     45
     46    $this->add_control(
     47        'cb_countDown_target_date',
     48        [
     49            'label'   => esc_html__( 'Date and Time', 'cb-countdown-timer' ),
     50            'type'    => \Elementor\Controls_Manager::DATE_TIME,
     51            'default' => '2033-05-31 00:00:00',
     52        ]
     53    );
     54
     55    $this->end_controls_section();
     56
     57    /**
     58     * STYLE TAB → VISIBILITY SWITCHES
     59     */
     60    $this->start_controls_section(
     61        'cb_countdown_switch',
     62        [
     63            'label' => esc_html__( 'Units Visibility', 'cb-countdown-timer' ),
     64            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     65        ]
     66    );
     67
     68    $this->add_control(
     69        'cb-month-switch',
     70        [
     71            'label'        => esc_html__( 'Months', 'cb-countdown-timer' ),
     72            'type'         => \Elementor\Controls_Manager::SWITCHER,
     73            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     74            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     75            'return_value' => 'yes',
     76            'default'      => 'yes',
     77        ]
     78    );
     79
     80    $this->add_control(
     81        'cb-days-switch',
     82        [
     83            'label'        => esc_html__( 'Days', 'cb-countdown-timer' ),
     84            'type'         => \Elementor\Controls_Manager::SWITCHER,
     85            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     86            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     87            'return_value' => 'yes',
     88            'default'      => 'yes',
     89        ]
     90    );
     91
     92    $this->add_control(
     93        'cb-hours-switch',
     94        [
     95            'label'        => esc_html__( 'Hours', 'cb-countdown-timer' ),
     96            'type'         => \Elementor\Controls_Manager::SWITCHER,
     97            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     98            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     99            'return_value' => 'yes',
     100            'default'      => 'yes',
     101        ]
     102    );
     103
     104    $this->add_control(
     105        'cb-minutes-switch',
     106        [
     107            'label'        => esc_html__( 'Minutes', 'cb-countdown-timer' ),
     108            'type'         => \Elementor\Controls_Manager::SWITCHER,
     109            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     110            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     111            'return_value' => 'yes',
     112            'default'      => 'yes',
     113        ]
     114    );
     115
     116    $this->add_control(
     117        'cb-seconds-switch',
     118        [
     119            'label'        => esc_html__( 'Seconds', 'cb-countdown-timer' ),
     120            'type'         => \Elementor\Controls_Manager::SWITCHER,
     121            'label_on'     => esc_html__( 'On', 'cb-countdown-timer' ),
     122            'label_off'    => esc_html__( 'Off', 'cb-countdown-timer' ),
     123            'return_value' => 'yes',
     124            'default'      => 'yes',
     125        ]
     126    );
     127
     128    $this->end_controls_section();
     129
     130    /**
     131     * STYLE TAB → WRAPPER
     132     */
     133    $this->start_controls_section(
     134        'cb_countdown_wrapper_style',
     135        [
     136            'label' => esc_html__( 'Wrapper', 'cb-countdown-timer' ),
     137            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     138        ]
     139    );
     140
     141    $this->add_group_control(
     142        \Elementor\Group_Control_Background::get_type(),
     143        [
     144            'name'     => 'cb_wrapper_background',
     145            'label'    => esc_html__( 'Background', 'cb-countdown-timer' ),
     146            'types'    => [ 'classic', 'gradient' ],
     147            'selector' => '{{WRAPPER}} .cb-countdown-timer-widget-area',
     148        ]
     149    );
     150
     151    $this->add_responsive_control(
     152        'cb_wrapper_padding',
     153        [
     154            'label'      => esc_html__( 'Padding', 'cb-countdown-timer' ),
     155            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
     156            'size_units' => [ 'px', '%', 'em' ],
     157            'default'    => [
     158                'top'    => 40,
     159                'right'  => 24,
     160                'bottom' => 40,
     161                'left'   => 24,
     162                'unit'   => 'px',
     163            ],
     164            'selectors'  => [
     165                '{{WRAPPER}} .cb-countdown-timer-widget-area' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     166            ],
     167        ]
     168    );
     169
     170    $this->add_responsive_control(
     171        'cb_wrapper_radius',
     172        [
     173            'label'      => esc_html__( 'Border Radius', 'cb-countdown-timer' ),
     174            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
     175            'size_units' => [ 'px', '%' ],
     176            'default'    => [
     177                'top'    => 28,
     178                'right'  => 28,
     179                'bottom' => 28,
     180                'left'   => 28,
     181                'unit'   => 'px',
     182            ],
     183            'selectors'  => [
     184                '{{WRAPPER}} .cb-countdown-timer-widget-area' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     185            ],
     186        ]
     187    );
     188
     189    $this->end_controls_section();
     190
     191    /**
     192     * STYLE TAB → CIRCLES (NUMBER)
     193     */
     194    $this->start_controls_section(
     195        'cb_coundown_circle_style_section',
     196        [
     197            'label' => esc_html__( 'Circle / Number', 'cb-countdown-timer' ),
     198            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     199        ]
     200    );
     201
     202    // Circle size
     203    $this->add_responsive_control(
     204        'cb_circle_size',
     205        [
     206            'label'      => esc_html__( 'Circle Size', 'cb-countdown-timer' ),
     207            'type'       => \Elementor\Controls_Manager::SLIDER,
     208            'size_units' => [ 'px' ],
     209            'range'      => [
     210                'px' => [
     211                    'min' => 60,
     212                    'max' => 220,
    156213                ],
    157             ]
    158         );
    159 
    160         $this->add_group_control(
    161             \Elementor\Group_Control_Typography::get_type(),
    162             [
    163                 'name' => 'cb_counDown_number_typography',
    164                 'selector' => '{{WRAPPER}} .cb-countdown-timer p span',
    165             ]
    166         );
    167 
    168         $this->add_control(
    169             'cb_coundown_number_color',
    170             [
    171                 'label' => esc_html__('Number Color', 'cb-countdown-timer'),
    172                 'type' => \Elementor\Controls_Manager::COLOR,
    173                 'selectors' => [
    174                     '{{WRAPPER}} .cb-countdown-timer p span' => 'color: {{VALUE}}',
     214            ],
     215            'default'    => [
     216                'size' => 120,
     217                'unit' => 'px',
     218            ],
     219            'selectors'  => [
     220                '{{WRAPPER}} .cb-countdown-timer p' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
     221            ],
     222        ]
     223    );
     224
     225    // Outer circle background
     226    $this->add_control(
     227        'cb_circle_outer_bg',
     228        [
     229            'label'     => esc_html__( 'Outer Circle Color', 'cb-countdown-timer' ),
     230            'type'      => \Elementor\Controls_Manager::COLOR,
     231            'selectors' => [
     232                '{{WRAPPER}} .cb-countdown-timer p' => 'background: {{VALUE}};',
     233            ],
     234        ]
     235    );
     236
     237    // Inner circle background (pseudo-element)
     238    $this->add_control(
     239        'cb_circle_inner_bg',
     240        [
     241            'label'     => esc_html__( 'Inner Circle Color', 'cb-countdown-timer' ),
     242            'type'      => \Elementor\Controls_Manager::COLOR,
     243            'selectors' => [
     244                '{{WRAPPER}} .cb-countdown-timer p::before' => 'background: {{VALUE}};',
     245            ],
     246        ]
     247    );
     248
     249    // Circle shadow
     250    $this->add_group_control(
     251        \Elementor\Group_Control_Box_Shadow::get_type(),
     252        [
     253            'name'     => 'cb_circle_shadow',
     254            'selector' => '{{WRAPPER}} .cb-countdown-timer p',
     255        ]
     256    );
     257
     258    // Number typography
     259    $this->add_group_control(
     260        \Elementor\Group_Control_Typography::get_type(),
     261        [
     262            'name'     => 'cb_countdown_number_typography',
     263            'label'    => esc_html__( 'Number Typography', 'cb-countdown-timer' ),
     264            'selector' => '{{WRAPPER}} .cb-countdown-timer p',
     265        ]
     266    );
     267
     268    // Number color
     269    $this->add_control(
     270        'cb_countdown_number_color',
     271        [
     272            'label'     => esc_html__( 'Number Color', 'cb-countdown-timer' ),
     273            'type'      => \Elementor\Controls_Manager::COLOR,
     274            'selectors' => [
     275                '{{WRAPPER}} .cb-countdown-timer p' => 'color: {{VALUE}};',
     276            ],
     277        ]
     278    );
     279
     280    // Gap between circles (your existing control, kept here)
     281    $this->add_control(
     282        'cb_countdown_gap',
     283        [
     284            'label'   => esc_html__( 'Gap Between Circles (px)', 'cb-countdown-timer' ),
     285            'type'    => \Elementor\Controls_Manager::NUMBER,
     286            'min'     => 5,
     287            'max'     => 100,
     288            'step'    => 1,
     289            'default' => 24,
     290        ]
     291    );
     292
     293    $this->end_controls_section();
     294
     295    /**
     296     * STYLE TAB → LABELS (MONTH / DAYS / ETC.)
     297     */
     298    $this->start_controls_section(
     299        'cb_coundown_label_style_section',
     300        [
     301            'label' => esc_html__( 'Labels', 'cb-countdown-timer' ),
     302            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
     303        ]
     304    );
     305
     306    $this->add_group_control(
     307        \Elementor\Group_Control_Typography::get_type(),
     308        [
     309            'name'     => 'cb_countdown_label_typography',
     310            'label'    => esc_html__( 'Label Typography', 'cb-countdown-timer' ),
     311            'selector' => '{{WRAPPER}} .cb-countdown-timer p span',
     312        ]
     313    );
     314
     315    $this->add_control(
     316        'cb_countdown_label_color',
     317        [
     318            'label'     => esc_html__( 'Label Color', 'cb-countdown-timer' ),
     319            'type'      => \Elementor\Controls_Manager::COLOR,
     320            'selectors' => [
     321                '{{WRAPPER}} .cb-countdown-timer p span' => 'color: {{VALUE}};',
     322            ],
     323        ]
     324    );
     325
     326    // Distance of label from circle bottom
     327    $this->add_responsive_control(
     328        'cb_label_offset',
     329        [
     330            'label'      => esc_html__( 'Label Offset', 'cb-countdown-timer' ),
     331            'type'       => \Elementor\Controls_Manager::SLIDER,
     332            'size_units' => [ 'px' ],
     333            'range'      => [
     334                'px' => [
     335                    'min' => -40,
     336                    'max' => 40,
    175337                ],
    176             ]
    177         );
    178         $this->add_control(
    179             'cb_countdown_gap',
    180             [
    181                 'label' => esc_html__('Gap', 'textdomain'),
    182                 'type' => \Elementor\Controls_Manager::NUMBER,
    183                 'min' => 5,
    184                 'max' => 100,
    185                 'step' => 5,
    186                 'default' => 15,
    187             ]
    188         );
    189 
    190         $this->end_controls_section();
    191     }
     338            ],
     339            'default'    => [
     340                'size' => -28,
     341                'unit' => 'px',
     342            ],
     343            'selectors'  => [
     344                '{{WRAPPER}} .cb-countdown-timer p span' => 'bottom: {{SIZE}}{{UNIT}};',
     345            ],
     346        ]
     347    );
     348
     349    $this->end_controls_section();
     350}
     351
    192352
    193353
Note: See TracChangeset for help on using the changeset viewer.