feat: added info

css/style.css

@@ -1,11 +1,20 @@
 /* css/style.css */
+.elementor-category-grid .category-card {
+  position: relative;
+  overflow: hidden;
+}
+
+/* pseudo-élément overlay */
+.elementor-category-grid .category-card::before {
+  content: "";
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-color: transparent;
+  transition: opacity .3s ease;
+  pointer-events: none; /* laisse passer le clic */
+}
 
 /* 1) Mise en place de la grille */
-/* .elementor-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-} */
 .elementor-category-grid {
   display: grid;
   gap: 1rem;
@@ -25,7 +34,7 @@
   overflow: hidden;
   height: 0;
   padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
-  border-radius: 8px;
+  /* border-radius: 8px; */
 }
 
 /* 3) Image pleine carte */

elementor-category-grid-widget.php

@@ -1,15 +1,20 @@
 <?php
-/**
- * Plugin Name: Elementor Category Grid Widget
- * Description: Custom Elementor widget to display a grid of post categories with images.
- * Version:     1.2.0
- * Author:      MrRaph_
+ /**
+ * Plugin Name:     Elementor Category Grid Widget
+ * Plugin URI:      https://git.mrraph.fr/WordPress/elementor-category-grid-widget
+ * Description:     Grille responsive de catégories d’articles avec image pour Elementor.
+ * Version:         1.2.1
+ * Author:          MrRaph_
+ * Author URI:      https://mrraph.photo
+ * Requires at least: 5.8
+ * Requires PHP:      7.0
  * Text Domain: category-grid-widget
  * Requires Plugins: elementor
- * Elementor tested up to: 3.25.0
- * Elementor Pro tested up to: 3.25.0
+ * License:           GPLv2 or later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  */
 
+
 if ( ! defined( 'ABSPATH' ) ) {
     exit; // Sécurité : empêche l'accès direct.
 }
@@ -36,7 +41,7 @@ function ccgw_enqueue_media_uploader( $hook_suffix ) {
         'ccgw-category-image',
         plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js',
         [ 'jquery' ],
-        '1.2.0',
+        '1.2.1',
         true
     );
 
@@ -172,7 +177,7 @@ function ccgw_enqueue_front_styles() {
             'ccgw-category-grid-style',
             plugin_dir_url( __FILE__ ) . 'css/style.css',
             [],
-            '1.2.0'
+            '1.2.1'
         );
     }
 }

readme.txt

@@ -0,0 +1,56 @@
+=== Elementor Category Grid Widget ===
+Contributors: mrraph
+Donate link: https://your-site.example/donate
+Tags: elementor, category, grid, widget, posts
+Requires at least: 5.8
+Tested up to: 6.8.1
+Requires PHP: 7.0
+Stable tag: 1.2.1
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Responsive grid of post categories with images for Elementor.
+Allows manual selection of categories to display, inclusion of subcategories, hiding categories without images, and control over number of columns, image sizes, style settings, and hover effects.
+
+== Description ==
+**Elementor Category Grid Widget** adds a simple yet powerful widget to Elementor for displaying your post categories in a grid:
+- Manual selection of categories to display
+- Option to show subcategories
+- Option to hide categories without an image
+- Configurable number of columns (1–6)
+- Choice of image size (thumbnail, medium, large, full)
+- **Style** tab: spacing, card background & border, typography, shadow
+- **Hover** tab: customizable overlay (color & opacity), title color on hover
+- Each card is clickable and links to the category archive page
+
+The widget uses WordPress’s native category image feature (a “Category Image” field added in the admin).
+
+== Installation ==
+1. Upload the `elementor-category-grid-widget` folder to `/wp-content/plugins/`.
+2. Activate **Elementor Category Grid Widget** in the **Plugins** menu.
+3. In Elementor, add the **Category Grid** widget to your layout.
+4. Configure: select categories, columns, style, and hover effects.
+
+== Screenshots ==
+1. Elementor editor: widget settings panel  
+2. 4-column grid with hover overlay  
+3. Mobile: responsive single column  
+4. Advanced options in the Style tab  
+
+== Frequently Asked Questions ==
+= How do I assign an image to a category? =
+When creating or editing a category, a “Category Image” field appears in the admin. Click “Select Image” to set it.
+
+= Can I hide categories without an image? =
+Yes, enable the **“Hide categories without image”** option in the widget’s Content tab.
+
+= How do I customize the hover effect? =
+Open the **Style » Hover** tab: choose the overlay color & opacity, and the title color on hover.
+
+== Changelog ==
+= 1.2.1 =
+* Initial release  
+* Manual category and subcategory selection  
+* Configurable number of columns and image size  
+* Option to hide categories without image  
+* Added Style and Hover tabs for advanced customization  

widgets/category-grid-widget.php

@@ -3,6 +3,10 @@ if (!defined('ABSPATH')) {
     exit; // Empêche l'accès direct.
 }
 
+use Elementor\Controls_Manager;
+use Elementor\Group_Control_Typography;
+use Elementor\Group_Control_Box_Shadow;
+
 /**
  * Classe Elementor_Category_Grid_Widget.
  *
@@ -61,6 +65,205 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
     {
         return ['category', 'catégorie', 'grid', 'grille'];
     }
+    protected function register_style_controls()
+    {
+        // 1) Styles de la grille (espacement)
+        $this->start_controls_section(
+            'section_style_grid',
+            [
+                'label' => esc_html__('Grille', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_responsive_control(
+            'grid_gap',
+            [
+                'label' => esc_html__('Espacement (gap)', 'category-grid-widget'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['px', 'em', '%'],
+                'range' => [
+                    'px' => ['min' => 0, 'max' => 100],
+                    'em' => ['min' => 0, 'max' => 10],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .elementor-category-grid' => 'gap: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->end_controls_section();
+
+        // 2) Styles des cartes (fond, bordure, ombre)
+        $this->start_controls_section(
+            'section_style_card',
+            [
+                'label' => esc_html__('Carte', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_control(
+            'card_bg_color',
+            [
+                'label' => esc_html__('Fond de la carte', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+        $this->add_control(
+            'card_border_radius',
+            [
+                'label' => esc_html__('Border radius', 'category-grid-widget'),
+                'type' => Controls_Manager::DIMENSIONS,
+                'size_units' => ['px', '%'],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            \Elementor\Group_Control_Box_Shadow::get_type(),
+            [
+                'name' => 'card_box_shadow',
+                'label' => esc_html__('Ombre de la carte', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card',
+            ]
+        );
+        $this->end_controls_section();
+
+        // 3) Styles du titre (couleur, arrière-plan du badge)
+        $this->start_controls_section(
+            'section_style_title',
+            [
+                'label' => esc_html__('Titre', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 3.1) Switcher pour désactiver le fond
+        $this->add_control(
+            'disable_title_bg',
+            [
+                'label' => esc_html__('Désactiver le fond du titre', 'category-grid-widget'),
+                'type' => Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Oui', 'category-grid-widget'),
+                'label_off' => esc_html__('Non', 'category-grid-widget'),
+                'return_value' => 'yes',
+                'default' => 'no',
+                'selectors' => [
+                    // Quand activé => on rend le fond totalement transparent
+                    '{{WRAPPER}} .category-card-name' => 'background-color: transparent !important;',
+                ],
+            ]
+        );
+
+        // 3.2) Couleur du texte
+        $this->add_control(
+            'title_text_color',
+            [
+                'label' => esc_html__('Couleur du texte', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 3.3) Couleur de fond du titre, **uniquement si** le fond n'est pas désactivé
+        $this->add_control(
+            'title_bg_color',
+            [
+                'label' => esc_html__('Fond du titre', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.4)',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'background-color: {{VALUE}};',
+                ],
+                'condition' => [
+                    // n'affiche ce picker que si disable_title_bg != 'yes'
+                    'disable_title_bg!' => 'yes',
+                ],
+            ]
+        );
+
+        // 3.4) Typographie du titre
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+
+        $this->end_controls_section();
+
+        // 4) Section Hover
+        $this->start_controls_section(
+            'section_style_hover',
+            [
+                'label' => esc_html__('Hover', 'category-grid-widget'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 4.1) Couleur de l'overlay
+        $this->add_control(
+            'hover_overlay_color',
+            [
+                'label' => esc_html__('Couleur de l’overlay', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.3)',
+                'selectors' => [
+                    // sur l’élément ::before (défini en CSS ci-dessous)
+                    '{{WRAPPER}} .category-card::before' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 4.2) Opacité de l'overlay
+        $this->add_control(
+            'hover_overlay_opacity',
+            [
+                'label' => esc_html__('Opacité de l’overlay', 'category-grid-widget'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['%'],
+                'range' => [
+                    '%' => ['min' => 0, 'max' => 100],
+                ],
+                'default' => ['size' => 30],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card::before' => 'opacity: 0;',
+                    '{{WRAPPER}} .category-card:hover::before' => 'opacity: {{SIZE}}%;',
+                ],
+            ]
+        );
+
+        // 4.3) Couleur du titre au hover
+        $this->add_control(
+            'title_hover_color',
+            [
+                'label' => esc_html__('Couleur du titre au hover', 'category-grid-widget'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card:hover .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        $this->end_controls_section();
+    }
 
     /**
      * Enregistrer les contrôles du widget (champs configurables dans Elementor).
@@ -198,6 +401,8 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         );
 
         $this->end_controls_section();
+
+        $this->register_style_controls();
     }
 
     /**