Add documentation for parameter-based color customization
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
18
README.md
18
README.md
@@ -57,6 +57,7 @@ MokoCassiopeia is a modern, lightweight enhancement layer built on top of Joomla
|
|||||||
|
|
||||||
- **Dark Mode Support**: Built-in light/dark mode toggle with system preference detection
|
- **Dark Mode Support**: Built-in light/dark mode toggle with system preference detection
|
||||||
- **Color Palettes**: Standard, Alternative, and Custom color schemes
|
- **Color Palettes**: Standard, Alternative, and Custom color schemes
|
||||||
|
- **Parameter-Based Colors**: Edit key brand colors directly in template settings (no CSS files required)
|
||||||
- **Theme Persistence**: User preferences saved via localStorage
|
- **Theme Persistence**: User preferences saved via localStorage
|
||||||
- **Theme Control Options**: Switch, radio buttons, or hidden controls
|
- **Theme Control Options**: Switch, radio buttons, or hidden controls
|
||||||
- **Auto Dark Mode**: Optional automatic dark mode based on time/system settings
|
- **Auto Dark Mode**: Optional automatic dark mode based on time/system settings
|
||||||
@@ -69,6 +70,7 @@ MokoCassiopeia is a modern, lightweight enhancement layer built on top of Joomla
|
|||||||
- **Font Options**: Local and web fonts (Roboto, Fira Sans, Noto Sans)
|
- **Font Options**: Local and web fonts (Roboto, Fira Sans, Noto Sans)
|
||||||
- **Sticky Header**: Optional sticky navigation
|
- **Sticky Header**: Optional sticky navigation
|
||||||
- **Back to Top**: Floating back-to-top button
|
- **Back to Top**: Floating back-to-top button
|
||||||
|
- **400+ CSS Variables**: Complete control over colors, spacing, and styling
|
||||||
|
|
||||||
### Analytics & Tracking
|
### Analytics & Tracking
|
||||||
|
|
||||||
@@ -164,6 +166,22 @@ Access template configuration via **System → Site Templates → MokoCassiopeia
|
|||||||
- **Light Mode Palette**: Standard, Alternative, or Custom
|
- **Light Mode Palette**: Standard, Alternative, or Custom
|
||||||
- **Dark Mode Palette**: Standard, Alternative, or Custom
|
- **Dark Mode Palette**: Standard, Alternative, or Custom
|
||||||
|
|
||||||
|
**Custom Colors - Light Mode:**
|
||||||
|
- **Brand Primary Color**: Main brand color throughout the template
|
||||||
|
- **Accent Primary Color**: Accent color for highlights and interactive elements
|
||||||
|
- **Navigation Background**: Background color for the main navigation menu
|
||||||
|
- **Navigation Link Color**: Text color for navigation links
|
||||||
|
- **Body Background**: Main page background color
|
||||||
|
- **Body Text Color**: Default text color for body content
|
||||||
|
- **Link Color**: Color for regular hyperlinks
|
||||||
|
- **Link Hover Color**: Color for hyperlinks on hover
|
||||||
|
- **Bootstrap Primary Color**: Bootstrap primary color for buttons, alerts, and components
|
||||||
|
|
||||||
|
**Custom Colors - Dark Mode:**
|
||||||
|
- Same 9 color options as Light Mode, but optimized for dark backgrounds
|
||||||
|
|
||||||
|
> **Note**: Custom color parameters override values from color palette CSS files. Leave fields blank to use palette defaults. Changes apply immediately when you save the template.
|
||||||
|
|
||||||
**Typography:**
|
**Typography:**
|
||||||
- **Font Scheme**: Local (Roboto) or Web fonts (Fira Sans, Roboto+Noto Sans)
|
- **Font Scheme**: Local (Roboto) or Web fonts (Fira Sans, Roboto+Noto Sans)
|
||||||
|
|
||||||
|
|||||||
@@ -195,6 +195,58 @@ After running the workflow or script, you should:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Color Customization Methods
|
||||||
|
|
||||||
|
You now have **two ways** to customize colors for your client fork:
|
||||||
|
|
||||||
|
### Method 1: Parameter-Based Customization (Recommended for Simple Branding)
|
||||||
|
|
||||||
|
**Best for**: Quick brand color changes without editing CSS files
|
||||||
|
|
||||||
|
1. Log into Joomla admin
|
||||||
|
2. Navigate to System → Site Templates → MokoCassiopeia
|
||||||
|
3. Click on the template name to edit
|
||||||
|
4. Go to the "Theme" tab
|
||||||
|
5. Scroll to "Custom Colours - Light Mode" and "Custom Colours - Dark Mode" sections
|
||||||
|
6. Use the color pickers to set:
|
||||||
|
- Brand Primary Color
|
||||||
|
- Accent Primary Color
|
||||||
|
- Navigation Background & Link Color
|
||||||
|
- Body Background & Text Color
|
||||||
|
- Link & Link Hover Colors
|
||||||
|
- Bootstrap Primary Color
|
||||||
|
7. Save the template
|
||||||
|
|
||||||
|
**Advantages**:
|
||||||
|
- ✅ No CSS files to edit
|
||||||
|
- ✅ Visual color picker interface
|
||||||
|
- ✅ Changes apply immediately
|
||||||
|
- ✅ Easy to revert by clearing the fields
|
||||||
|
- ✅ No file management required
|
||||||
|
|
||||||
|
**Limitations**:
|
||||||
|
- Only 9 essential colors per theme can be customized
|
||||||
|
- For advanced customization, use Method 2
|
||||||
|
|
||||||
|
### Method 2: CSS File Customization (Advanced)
|
||||||
|
|
||||||
|
**Best for**: Complete control over all 400+ CSS variables
|
||||||
|
|
||||||
|
1. Edit `src/media/css/colors/light/colors_custom.css`
|
||||||
|
2. Edit `src/media/css/colors/dark/colors_custom.css`
|
||||||
|
3. Update any of the 400+ CSS variables
|
||||||
|
4. Commit and deploy the changes
|
||||||
|
|
||||||
|
**Advantages**:
|
||||||
|
- ✅ Complete control over all variables
|
||||||
|
- ✅ Can customize spacing, borders, shadows, etc.
|
||||||
|
- ✅ Supports complex color schemes
|
||||||
|
- ✅ Version controlled with your fork
|
||||||
|
|
||||||
|
**Note**: Parameter-based colors (Method 1) will override CSS file colors (Method 2) if both are set.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
### Workflow Fails with "CONFIRM" Error
|
### Workflow Fails with "CONFIRM" Error
|
||||||
|
|||||||
Reference in New Issue
Block a user