WIP: Add parameter-based color customization to template backend #80

2026-02-20T10:40:18Z

Copilot commented

2026-02-20 10:40:18 +00:00

(Migrated from github.com)

Pull Request

Purpose

Eliminate the need to manually create/edit colors_custom.css files for basic branding. Users can now customize key template colors directly through Joomla admin interface.

Change Summary

Template Parameters (templateDetails.xml)

Added 18 color picker fields (9 per light/dark theme):
- Brand primary/accent colors
- Navigation background/link colors
- Body background/text colors
- Link/hover colors
- Bootstrap primary color

CSS Generation (index.php)

Sanitizes color inputs (hex, rgb/rgba, hsl/hsla, 40+ named colors)
Generates inline CSS only when parameters set:

:root[data-bs-theme='light'] {
	--color-primary: #007bff;
	--body-bg: #ffffff;
}

Helper functions eliminate code duplication
Validates format via regex, relies on CSS for value clamping

Language Files

Added labels/descriptions for en-GB and en-US

Documentation

Updated README.md and CLIENT_FORK_WORKFLOW.md
Documented two customization methods (parameters vs CSS files)

Testing Evidence

PHP/XML syntax validation passed
Security tests confirm injection attempts blocked
CSS output formatting verified with proper indentation
Backward compatibility confirmed with existing colors_custom.css files

Risk and Rollback

Risk: Low. Feature is additive and backward compatible.

Parameters optional (blank = use defaults)
Existing CSS files continue to work
Parameters override CSS files when both present

Rollback: Clear parameter values in template settings or revert commits.

Checklist

Follows Conventional Commits
Tests added or updated
Documentation updated if required
License header present where applicable
Linked issue(s) referenced

Reviewer Notes

Security Considerations

Review sanitization logic in index.php (lines 130-156)
Format validation prevents injection; CSS handles range clamping
Named colors limited to 40 common values (expandable if needed)

Code Quality

Helper functions reduce duplication
Inline documentation explains design decisions
Tab indentation matches CSS conventions

UX Impact

Color pickers appear in Theme tab under "Custom Colours" sections
Changes immediate upon save
No file management required for simple branding

Review and Approval

Files changed: 6 files, 301 insertions(+)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

# Pull Request ## Purpose Eliminate the need to manually create/edit `colors_custom.css` files for basic branding. Users can now customize key template colors directly through Joomla admin interface. ## Change Summary **Template Parameters (`templateDetails.xml`)** - Added 18 color picker fields (9 per light/dark theme): - Brand primary/accent colors - Navigation background/link colors - Body background/text colors - Link/hover colors - Bootstrap primary color **CSS Generation (`index.php`)** - Sanitizes color inputs (hex, rgb/rgba, hsl/hsla, 40+ named colors) - Generates inline CSS only when parameters set: ```css :root[data-bs-theme='light'] { --color-primary: #007bff; --body-bg: #ffffff; } ``` - Helper functions eliminate code duplication - Validates format via regex, relies on CSS for value clamping **Language Files** - Added labels/descriptions for en-GB and en-US **Documentation** - Updated README.md and CLIENT_FORK_WORKFLOW.md - Documented two customization methods (parameters vs CSS files) ## Testing Evidence - PHP/XML syntax validation passed - Security tests confirm injection attempts blocked - CSS output formatting verified with proper indentation - Backward compatibility confirmed with existing colors_custom.css files ## Risk and Rollback **Risk**: Low. Feature is additive and backward compatible. - Parameters optional (blank = use defaults) - Existing CSS files continue to work - Parameters override CSS files when both present **Rollback**: Clear parameter values in template settings or revert commits. ## Checklist - [x] Follows Conventional Commits - [x] Tests added or updated - [x] Documentation updated if required - [x] License header present where applicable - [x] Linked issue(s) referenced ## Reviewer Notes **Security Considerations** - Review sanitization logic in `index.php` (lines 130-156) - Format validation prevents injection; CSS handles range clamping - Named colors limited to 40 common values (expandable if needed) **Code Quality** - Helper functions reduce duplication - Inline documentation explains design decisions - Tab indentation matches CSS conventions **UX Impact** - Color pickers appear in Theme tab under "Custom Colours" sections - Changes immediate upon save - No file management required for simple branding ## Review and Approval Files changed: 6 files, 301 insertions(+)  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs.

jmiller-moko (Migrated from github.com) reviewed 2026-02-20 10:40:18 +00:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoCassiopeia#80