Custom Modules

The Custom Modules feature is a comprehensive system that allows users to customize the styling of various Jimdo modules (headers, images, buttons, dividers, spacing, and forms) through an intuitive popup interface. The system generates CSS rules dynamically and manages them within the Style Editor's CSS field.

Key Features

- Visual Popup Interface: User-friendly popups for each module type

- Dynamic CSS Generation: Automatically generates and manages CSS rules

- Module Tracking: Tracks customized modules and unused styles

- Cleanup Tools: "Removed" and "Remove All" buttons for managing styles

- Preselection Workflow: Intuitive border-radius selection with slider

- Mutual Exclusivity: Ensures only one tag per section can be active

- Persistent State: Remembers selected styles across popup reopens

In the MatrixConfig object set customModule: true

Module Detection

When a module is opened in admin mode, the system:

1. Checks if the opened module matches any configured selector

2. Shows the "Module Styles" button (slider icon).

3. Button click opens the module-specific popup

1. Opening a Module Popup:

- Open any customizable module

- Click the "Custom module" button (slider icon)

- The module-specific popup will appear

2. Applying Styles:

- Click tags to apply styles

- For border-radius: Click tag → adjust slider → click tag again to confirm

- Active tags show blue background

- Click the "Save" button in the custom module popup footer to save changes directly

- Changes are applied immediately

When a tag is clicked:

1. Extract module ID from the opened module element

2. Build CSS selector: `#cc-m-{moduleId} {cssSelector}`

3. Generate CSS rule with appropriate properties

In the footer section of a popup you typically see:

• Number of custom modules used on the page
• Number of removed custom modules

If a module was removed from the page but had custom CSS applied, that CSS might still exist in the Custom CSS area. This number shows how many of these “orphaned” custom modules exist.

• Remove link for all custom modules on the page

This allows you to delete all custom CSS associated with modules on the page, essentially cleaning up any leftover styles from removed modules.

• Save button

If you have encountered any bugs, errors, or unexpected behavior, module, please leave a comment below.