En vous promenant sur Beamreactor, nous stockons votre IP 48h pour des raisons de sécurité.

Lecteur Markdown

skin_generator Documentation › SKIN_GENERATOR_DOCUMENTATION_FR

Skin Generator Documentation Fr

Skin Generator Plugin for BeamReactor CMS #

Overview #

The Skin Generator plugin allows administrators to create custom skins for BeamReactor CMS by extracting colors from the current skin's core.css and generating new skin configurations with customizable layouts, menus, and logos.

Features #

  • Color Palette Extraction: Automatically extracts CSS variables from the current skin's core.css file
  • Custom Color Editing: Modify all CSS variables including primary, secondary, success, error, and info colors
  • Logo Upload: Upload and integrate custom logos into new skins
  • Menu Configuration: Choose between left menu, right menu, both, or none
  • Link Management: Add and manage links for top and bottom menus
  • Layout Copying: Automatically copies the default layout structure to new skins
  • Live Preview: Preview color changes in real-time before generating the skin
  • Skin Generation: Creates complete skin packages with core.css and skinconfig.php
  • Alternating Colors: Automatically generates alternating colors for list rows (key1 and key2)

Installation #

1. Copy the skin_generator folder to your plugins/ directory

2. The plugin will be automatically loaded by BeamReactor

3. Access the plugin via the control interface or directly at ?obj=skin_generator.php

File Structure #

text
plugins/skin_generator/
├── skin_generator.php			  # Main plugin file
├── conf/
│   └── skin_generator.conf.inc.php # Plugin configuration
├── css/
│   └── skin_generator.css		  # Plugin styles
├── js/
│   └── skin_generator.js		   # JavaScript functionality
├── handlers/
│   └── skin_generator.mod.php	  # AJAX handlers
├── lib/
│   └── skin_generator.lib.inc.php  # Core library functions
├── locale/
│   ├── skin_generator.en.inc.php   # English translations
│   └── skin_generator.fr.inc.php   # French translations
└── README.md					   # This file

Configuration #

Plugin Configuration (conf/skin_generator.conf.inc.php) #

  • $basedatadisplay: Display in control interface ('yes' or 'no')
  • $basedisplevel: Access level (default: BASE_LEVEL_USER)
  • $ftype: Plugin family (3 = Tools)
  • $is_public: Public access (1 = yes, 0 = no)

Access Levels #

The plugin uses BeamReactor's security levels:

  • SKIN_GENERATOR_LEVEL_USER: Basic user access
  • SKIN_GENERATOR_LEVEL_HIGHUSER: High user access
  • SKIN_GENERATOR_LEVEL_MODERATOR: Moderator access
  • SKIN_GENERATOR_LEVEL_ADMIN: Admin access
  • SKIN_GENERATOR_LEVEL_OVERMIND: Overmind access

Usage #

Creating a New Skin #

1. Navigate to the Skin Generator plugin

2. Review and modify the color palette as needed

3. Enter a unique skin name

4. Optionally upload a logo (max 1MB, JPG/PNG/GIF)

5. Configure menu options (left, right, both, or none)

6. Add links for top and bottom menus

7. Click "Generate Skin" to create the skin

Color Variables #

The following CSS variables can be customized:

  • --primary-color: Primary action color
  • --primary-hover: Primary hover color
  • --secondary-color: Secondary action color
  • --success-color: Success message color
  • --error-color: Error message color
  • --info-color: Information message color
  • --body-bg-start: Body background gradient start
  • --body-bg-middle: Body background gradient middle
  • --body-bg-end: Body background gradient end
  • --card-bg: Card background color
  • --frame-bg: Frame background color
  • --bubble-bg: Bubble background color
  • --sidebar-bg: Sidebar background color
  • --text-primary: Primary text color
  • --text-secondary: Secondary text color
  • --text-muted: Muted text color
  • --text-gray: Gray text color
  • --link-color: Link color
  • --link-hover: Link hover color
  • --link-visited: Visited link color
  • --key1: Alternating row color 1
  • --key2: Alternating row color 2

Generated Files #

When a skin is generated, the following files are created in the skin folder:

1. core.css: Contains all CSS variables and basic styles

2. skinconfig.php: Contains skin configuration including:

- Skin name

- Logo path

- Menu configuration (left/right)

- Top menu links

- Bottom menu links

- Button configurations

Links should be formatted as:

  • Name: Display text for the link
  • Target: Page target in the format page.dta (will be converted to $cfg[0].'?obj=page.dta')

API #

AJAX Endpoints #

All AJAX requests should be sent to ?handler=skin_generator.mod.php

Actions #

1. generate: Generate a new skin

- Parameters: action=generate, skin_name, colors, menu config, links, logo

- Returns: JSON with success status and skin information

2. preview: Preview color changes

- Parameters: action=preview, color values

- Returns: JSON with color palette

3. validate_name: Validate skin name

- Parameters: action=validate_name, skin_name

- Returns: JSON with validation status

4. get_colors: Get current skin colors

- Parameters: action=get_colors

- Returns: JSON with color palette

Security #

  • All user input is sanitized using Parser::sanitize() with appropriate data types
  • File uploads are validated for size (max 1MB) and type (JPG, PNG, GIF)
  • Access is restricted based on user security levels
  • Skin names are validated to prevent directory traversal and conflicts

Translations #

The plugin supports multiple languages through locale files:

  • English: locale/skin_generator.en.inc.php
  • French: locale/skin_generator.fr.inc.php

To add a new language:

1. Create a new locale file: locale/skin_generator.{lang}.inc.php

2. Copy the structure from existing locale files

3. Translate all $dialskin_generator array values

4. Update the $js_translations array for JavaScript translations

Troubleshooting #

Skin Already Exists #

If you receive an error that a skin already exists:

  • Choose a different skin name
  • Or delete the existing skin folder manually

Logo Upload Fails #

If logo upload fails:

  • Ensure the file is under 1MB
  • Verify the file type is JPG, PNG, or GIF
  • Check that the data directory has write permissions

Colors Not Applying #

If colors don't apply correctly:

  • Clear your browser cache
  • Verify the core.css file was generated correctly
  • Check that CSS variables are properly defined

Requirements #

  • BeamReactor CMS
  • PHP 7.0 or higher
  • GD library (for image processing)
  • Fileinfo extension (for file type validation)

License #

This plugin is part of BeamReactor CMS and follows the same license terms.

Support #

For issues or questions:

  • Check the BeamReactor documentation
  • Review the plugin code comments
  • Contact the BeamReactor development team

Changelog #

Version 1.0.0 #

  • Initial release
  • Color palette extraction and editing
  • Logo upload functionality
  • Menu configuration (left/right/both/none)
  • Link management for top/bottom menus
  • Layout copying from default skin
  • Live preview functionality
  • English and French translations
  • AJAX-based form handling
  • Security validation and sanitization
de en fr