Fix README and add missing skills
- Fixed missing command names in README (Prometheus 6 commands, Dexto 12 commands) - Fixed hooks section with all 14 hook names listed - Added bw-article-designer skill (article styling with black/white theme) - Added ralph-system-prompts skill collection (101 system prompts from system_prompts_leaks) - Updated skill count from 291 to 359 - Updated badges and documentation Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
uroma
781
skills/bw-article-designer/skill.md
Normal file
781
skills/bw-article-designer/skill.md
Normal file
@@ -0,0 +1,781 @@
|
||||
# Black & White Article Designer
|
||||
|
||||
Professional article styling with clean black/white theme and WCAG AAA compliant contrast ratios.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when:
|
||||
- Creating or styling WordPress articles with professional appearance
|
||||
- Fixing contrast and readability issues on blog posts
|
||||
- Applying consistent dark/white theme to article content
|
||||
- Need high-contrast, accessible article design
|
||||
|
||||
## Color Scheme
|
||||
|
||||
### Backgrounds
|
||||
- **Black**: `#000000` - Hero sections, CTAs
|
||||
- **White**: `#ffffff` - Cards, features, main content
|
||||
- **Light Gray**: `#fafafa` - Section backgrounds
|
||||
|
||||
### Text Colors
|
||||
- **White**: `#ffffff` - On dark backgrounds
|
||||
- **Very Dark Gray**: `#1a1a1a` - Headings on light backgrounds
|
||||
- **Medium-Dark Gray**: `#333333` - Body text on light backgrounds
|
||||
- **Dark Purple**: `#5b21b6` - Stat numbers, accent elements
|
||||
|
||||
## CSS Template
|
||||
|
||||
```css
|
||||
<style>
|
||||
/* ===== CLEAN BLACK/WHITE THEME ===== */
|
||||
|
||||
/* Base Colors */
|
||||
:root {
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
--color-gray-50: #fafafa;
|
||||
--color-gray-100: #f5f5f5;
|
||||
--color-gray-200: #e5e5e5;
|
||||
--color-gray-300: #d4d4d4;
|
||||
--color-gray-800: #262626;
|
||||
--color-text-dark: #1a1a1a;
|
||||
--color-text-medium: #333333;
|
||||
--color-text-light: #666666;
|
||||
--color-accent: #5b21b6;
|
||||
}
|
||||
|
||||
/* Hero Section - BLACK BG, WHITE TEXT */
|
||||
.daw-hero {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
padding: 4rem 2rem;
|
||||
border-radius: 1rem;
|
||||
margin: 2rem 0;
|
||||
border: 1px solid #333333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.daw-hero h1,
|
||||
.daw-hero h2,
|
||||
.daw-hero h3,
|
||||
.daw-hero h4,
|
||||
.daw-hero p,
|
||||
.daw-hero span,
|
||||
.daw-hero strong,
|
||||
.daw-hero li,
|
||||
.daw-hero a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
.daw-badge {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.daw-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.daw-stat-card {
|
||||
background: #ffffff !important;
|
||||
padding: 2rem;
|
||||
border-radius: 0.75rem;
|
||||
text-align: center;
|
||||
border: 2px solid #e5e5e5 !important;
|
||||
}
|
||||
|
||||
.daw-stat-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.daw-stat-label {
|
||||
color: #666666 !important;
|
||||
font-weight: 500;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Hero stat cards override - dark purple numbers */
|
||||
.daw-stat-card .daw-stat-number {
|
||||
color: #5b21b6 !important;
|
||||
}
|
||||
|
||||
.daw-stat-card .daw-stat-label {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
/* Feature Boxes - WHITE BG, DARK TEXT */
|
||||
.daw-feature {
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-left: 4px solid #000000;
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.daw-feature h2,
|
||||
.daw-feature h4 {
|
||||
color: #1a1a1a !important;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.daw-feature p,
|
||||
.daw-feature li {
|
||||
color: #333333 !important;
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.daw-feature strong {
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Cards - WHITE BG, DARK TEXT */
|
||||
.daw-card {
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
border: 2px solid #e5e5e5;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.daw-card:hover {
|
||||
border-color: #000000;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.daw-card h4 {
|
||||
color: #1a1a1a !important;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.daw-card p {
|
||||
color: #333333 !important;
|
||||
margin: 0.5rem 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Section - LIGHT GRAY BG, DARK TEXT */
|
||||
.daw-section {
|
||||
background: #fafafa !important;
|
||||
color: #1a1a1a !important;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 1rem;
|
||||
margin: 3rem 0;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.daw-section h2,
|
||||
.daw-section h3,
|
||||
.daw-section h4 {
|
||||
color: #1a1a1a !important;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.daw-section p {
|
||||
color: #333333 !important;
|
||||
margin: 0.5rem 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* CTA Section - BLACK BG, WHITE TEXT */
|
||||
.daw-cta {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
padding: 4rem 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
|
||||
.daw-cta h1,
|
||||
.daw-cta h2,
|
||||
.daw-cta h3,
|
||||
.daw-cta h4,
|
||||
.daw-cta p,
|
||||
.daw-cta span,
|
||||
.daw-cta strong,
|
||||
.daw-cta em,
|
||||
.daw-cta li,
|
||||
.daw-cta a,
|
||||
.daw-cta div {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.daw-btn-primary {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.daw-btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.daw-btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
background: transparent !important;
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.daw-btn-secondary:hover {
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.daw-code {
|
||||
background: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #333333;
|
||||
margin: 1rem 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.daw-code code {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Inline Code */
|
||||
code {
|
||||
background: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* Context-specific inline code */
|
||||
.daw-card code,
|
||||
.daw-feature code,
|
||||
.daw-section code {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.daw-hero code,
|
||||
.daw-cta code {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Compare Boxes */
|
||||
.daw-compare {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #e5e5e5;
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.daw-compare h3 {
|
||||
color: #1a1a1a !important;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.daw-compare p {
|
||||
color: #333333 !important;
|
||||
margin: 0.5rem 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.daw-compare strong {
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.daw-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.daw-list li {
|
||||
color: #333333 !important;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.daw-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.daw-list strong {
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.daw-link {
|
||||
color: #1a1a1a !important;
|
||||
text-decoration: underline;
|
||||
transition: color 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.daw-link:hover {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
/* Grid Layout */
|
||||
.daw-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.daw-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
.daw-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.daw-hero {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.daw-section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.daw-cta {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.daw-hero h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.daw-stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.daw-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## HTML Structure Template
|
||||
|
||||
```html
|
||||
<!-- Hero Section -->
|
||||
<div class="daw-hero">
|
||||
<div class="daw-badge">✨ Badge Text</div>
|
||||
<h1>Article Title</h1>
|
||||
<p>Article subtitle or description...</p>
|
||||
|
||||
<div class="daw-stats">
|
||||
<div class="daw-stat-card">
|
||||
<div class="daw-stat-number">281</div>
|
||||
<div class="daw-stat-label">Custom Skills</div>
|
||||
</div>
|
||||
<div class="daw-stat-card">
|
||||
<div class="daw-stat-number">43</div>
|
||||
<div class="daw-stat-label">AI Agents</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Box -->
|
||||
<div class="daw-feature">
|
||||
<h2>Feature Title</h2>
|
||||
<ul class="daw-list">
|
||||
<li><strong>Item 1:</strong> Description</li>
|
||||
<li><strong>Item 2:</strong> Description</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Section with Cards -->
|
||||
<div class="daw-section">
|
||||
<h2>Section Title</h2>
|
||||
<div class="daw-grid">
|
||||
<div class="daw-card">
|
||||
<h4>Card Title</h4>
|
||||
<p><strong>Subtitle</strong></p>
|
||||
<p>Card description...</p>
|
||||
</div>
|
||||
<div class="daw-card">
|
||||
<h4>Another Card</h4>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Block -->
|
||||
<div class="daw-code">
|
||||
code here
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="daw-cta">
|
||||
<h2>Call to Action Title</h2>
|
||||
<p>Description text...</p>
|
||||
<div style="margin-top: 2rem;">
|
||||
<a href="#" class="daw-btn-primary">Primary Button</a>
|
||||
<a href="#" class="daw-btn-secondary">Secondary Button</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## WordPress Theme Stylesheet Method
|
||||
|
||||
When WordPress filters `<style>` tags from post content, add this CSS to the theme's stylesheet (e.g., `outstanding-enhancements.css`):
|
||||
|
||||
```css
|
||||
/* ========================================
|
||||
* BLACK/WHITE ARTICLE THEME CSS
|
||||
* Add to: /wp-content/themes/YOUR_THEME/outstanding-enhancements.css
|
||||
* ======================================== */
|
||||
|
||||
/* ===== TABLE FIXES - CRITICAL ===== */
|
||||
/* WordPress wraps tables in .table-container - this causes specificity issues */
|
||||
.table-container thead,
|
||||
.table-container thead tr,
|
||||
.table-container thead th {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.table-container tbody,
|
||||
.table-container tbody tr,
|
||||
.table-container tbody td {
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
-webkit-text-fill-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* Maximum specificity for table headers */
|
||||
.table-container thead th,
|
||||
.table-container thead th *,
|
||||
.daw-section .table-container thead th,
|
||||
.daw-feature .table-container thead th,
|
||||
.daw-card .table-container thead th,
|
||||
.daw-compare .table-container thead th,
|
||||
.daw-stat-card .table-container thead th,
|
||||
.pricing-card .table-container thead th,
|
||||
table thead th[style*=color],
|
||||
.table-container table thead th[style*=color],
|
||||
.daw-section table thead th[style*=color],
|
||||
.daw-feature table thead th[style*=color] {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Maximum specificity for table body */
|
||||
.table-container tbody td,
|
||||
.table-container tbody td *,
|
||||
.daw-section .table-container tbody td,
|
||||
.daw-feature .table-container tbody td,
|
||||
.daw-card .table-container tbody td,
|
||||
.daw-compare .table-container tbody td,
|
||||
.daw-stat-card .table-container tbody td,
|
||||
.pricing-card .table-container tbody td,
|
||||
table tbody td[style*=color],
|
||||
.table-container table tbody td[style*=color],
|
||||
.daw-section table tbody td[style*=color],
|
||||
.daw-feature table tbody td[style*=color] {
|
||||
background: #ffffff !important;
|
||||
color: #1a1a1a !important;
|
||||
-webkit-text-fill-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
/* ===== CTA BUTTON FIXES ===== */
|
||||
/* Primary CTA button - black background, white text */
|
||||
a.cta-button.primary,
|
||||
a.cta-button.primary:link,
|
||||
a.cta-button.primary:visited,
|
||||
a.cta-button[style*="background: #000"],
|
||||
a.cta-button[style*="background: #000000"] {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Secondary CTA button - white background, black text */
|
||||
a.cta-button.secondary,
|
||||
a.cta-button.secondary:link,
|
||||
a.cta-button.secondary:visited,
|
||||
a.cta-button[style*="background: #fff"],
|
||||
a.cta-button[style*="background: #ffffff"] {
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
-webkit-text-fill-color: #000000 !important;
|
||||
border: 2px solid #000000 !important;
|
||||
}
|
||||
|
||||
/* CTA buttons with inline color styles */
|
||||
a.cta-button[style*="color"],
|
||||
a.cta-button[style*="color"] * {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Secondary buttons keep dark text */
|
||||
a.cta-button.secondary[style*="color"],
|
||||
a.cta-button.secondary[style*="color"] * {
|
||||
color: #000000 !important;
|
||||
-webkit-text-fill-color: #000000 !important;
|
||||
}
|
||||
|
||||
/* ===== HERO SECTION FIXES ===== */
|
||||
.daw-hero {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.daw-hero *,
|
||||
.daw-hero *::before,
|
||||
.daw-hero *::after {
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Stat numbers - PURPLE on white cards */
|
||||
.daw-hero .daw-stat-card .daw-stat-number,
|
||||
.daw-hero .daw-stat-number {
|
||||
color: #5b21b6 !important;
|
||||
background: transparent !important;
|
||||
-webkit-text-fill-color: #5b21b6 !important;
|
||||
}
|
||||
|
||||
/* Stat labels - DARK GRAY on white cards */
|
||||
.daw-hero .daw-stat-card .daw-stat-label,
|
||||
.daw-hero .daw-stat-label {
|
||||
color: #333333 !important;
|
||||
background: transparent !important;
|
||||
-webkit-text-fill-color: #333333 !important;
|
||||
}
|
||||
|
||||
/* ===== CONTENT SECTIONS ===== */
|
||||
/* Light backgrounds → DARK text */
|
||||
.daw-card:not(.daw-hero):not(.daw-cta),
|
||||
.daw-feature:not(.daw-hero):not(.daw-cta),
|
||||
.daw-section:not(.daw-hero):not(.daw-cta),
|
||||
.daw-compare:not(.daw-hero):not(.daw-cta),
|
||||
.daw-stat-card:not(.daw-hero):not(.daw-cta),
|
||||
.pricing-card:not(.daw-hero):not(.daw-cta) {
|
||||
color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.daw-card p,
|
||||
.daw-card li,
|
||||
.daw-section p,
|
||||
.daw-section li,
|
||||
.daw-feature p,
|
||||
.daw-feature li {
|
||||
color: #333333 !important;
|
||||
}
|
||||
|
||||
/* Links - purple accent */
|
||||
a, a:link, a:visited {
|
||||
color: #5b21b6 !important;
|
||||
}
|
||||
|
||||
/* Force cache refresh after updating this file */
|
||||
/* Run: touch /path/to/outstanding-enhancements.css */
|
||||
```
|
||||
|
||||
## Applying to WordPress
|
||||
|
||||
### Method 1: Direct Database Update
|
||||
|
||||
```bash
|
||||
# SSH to server
|
||||
ssh user@server
|
||||
|
||||
# Get MySQL config
|
||||
cat > /tmp/mysql.cnf << EOF
|
||||
[client]
|
||||
user=wpuser
|
||||
password="yourpassword"
|
||||
host=localhost
|
||||
database=wordpress
|
||||
EOF
|
||||
|
||||
# Read post content
|
||||
mysql --defaults-file=/tmp/mysql.cnf --batch --skip-column-names \
|
||||
-e "SELECT post_content FROM wp_posts WHERE ID=POST_ID"
|
||||
|
||||
# Update post (wrap CSS in <style> tags)
|
||||
mysql --defaults-file=/tmp/mysql.cnf --batch \
|
||||
-e "UPDATE wp_posts SET post_content='<style>CSS_HERE</style>HTML_HERE' WHERE ID=POST_ID"
|
||||
```
|
||||
|
||||
### Method 2: WordPress Admin
|
||||
|
||||
1. Edit post in WordPress admin
|
||||
2. Switch to "Code Editor" mode
|
||||
3. Add `<style>` block at the top with CSS
|
||||
4. Add HTML content below
|
||||
5. Update/save post
|
||||
|
||||
## Key Classes
|
||||
|
||||
| Class | Purpose |
|
||||
|-------|---------|
|
||||
| `.daw-hero` | Hero section with black background |
|
||||
| `.daw-stats` | Stats grid container |
|
||||
| `.daw-stat-card` | Individual stat card (white bg) |
|
||||
| `.daw-feature` | Feature box (white bg, dark text) |
|
||||
| `.daw-card` | Content card (white bg, dark text) |
|
||||
| `.daw-section` | Section with light gray bg |
|
||||
| `.daw-cta` | Call-to-action (black bg, white text) |
|
||||
| `.daw-code` | Code block (dark bg, white text) |
|
||||
| `.daw-grid` | Responsive grid layout |
|
||||
| `.daw-list` | Styled list |
|
||||
| `.daw-link` | Styled link |
|
||||
| `.daw-btn-primary` | Primary button (white bg, dark text) |
|
||||
| `.daw-btn-secondary` | Secondary button (transparent, white text) |
|
||||
|
||||
## WCAG AAA Compliance
|
||||
|
||||
All color combinations meet WCAG AAA standards (7:1+ contrast ratio):
|
||||
|
||||
| Background | Text | Contrast | WCAG |
|
||||
|------------|------|----------|------|
|
||||
| Black (#000000) | White (#ffffff) | 21:1 | AAA |
|
||||
| White (#ffffff) | Very Dark (#1a1a1a) | 15.3:1 | AAA |
|
||||
| White (#ffffff) | Medium Dark (#333333) | 12.6:1 | AAA |
|
||||
| White (#ffffff) | Dark Purple (#5b21b6) | 7.2:1 | AAA |
|
||||
| Dark Gray (#1a1a1a) | White (#ffffff) | 15.3:1 | AAA |
|
||||
|
||||
## Common Issues & Fixes
|
||||
|
||||
### Issue: Stat numbers invisible
|
||||
**Cause:** White text on white stat cards
|
||||
**Fix:** Add `.daw-stat-card .daw-stat-number { color: #5b21b6 !important; }`
|
||||
|
||||
### Issue: CSS showing as raw text
|
||||
**Cause:** Missing `<style>` tags
|
||||
**Fix:** Wrap CSS in `<style>CSS_HERE</style>`
|
||||
|
||||
### Issue: Text not visible
|
||||
**Cause:** Wrong color combination
|
||||
**Fix:** Check background vs text color, ensure proper contrast
|
||||
|
||||
### Issue: Inline styles overriding CSS
|
||||
**Cause:** WordPress editor adding inline styles
|
||||
**Fix:** Use `!important` declarations or remove inline styles
|
||||
|
||||
### Issue: Table headers showing white text on white background
|
||||
**Cause:** WordPress theme wraps tables in `.table-container` with conflicting CSS
|
||||
**Fix:** Add maximum specificity CSS rules targeting `.table-container thead th` with both background and color:
|
||||
```css
|
||||
.table-container thead th,
|
||||
.daw-section .table-container thead th,
|
||||
.daw-feature .table-container thead th,
|
||||
.daw-card .table-container thead th,
|
||||
table thead th[style*=color],
|
||||
.table-container table thead th[style*=color] {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Issue: CTA button text invisible (e.g., "Visit Z.AI Platform")
|
||||
**Cause:** Theme CSS classes like `.cta-button`, `.primary` override inline styles
|
||||
**Fix:** Add specific CSS targeting these classes with `-webkit-text-fill-color`:
|
||||
```css
|
||||
a.cta-button.primary,
|
||||
a.cta-button.primary:link,
|
||||
a.cta-button.primary:visited,
|
||||
a.cta-button[style*="background: #000"],
|
||||
a.cta-button[style*="background: #000000"] {
|
||||
background: #000000 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
```
|
||||
|
||||
### Issue: WordPress filters `<style>` tags from post content
|
||||
**Cause:** WordPress content filters automatically remove style tags
|
||||
**Fix:** Add CSS to theme stylesheet instead (e.g., `/wp-content/themes/THEME/outstanding-enhancements.css`)
|
||||
|
||||
## Critical WordPress Integration Lessons
|
||||
|
||||
### 1. Table Styling with `.table-container`
|
||||
WordPress automatically wraps tables in `.table-container` div. This causes CSS specificity issues:
|
||||
- Inline styles on `<thead>` may be overridden by theme CSS
|
||||
- Need maximum specificity selectors targeting `.table-container thead th`
|
||||
- Include `-webkit-text-fill-color` for browser compatibility
|
||||
|
||||
### 2. Theme Stylesheet vs Inline Styles
|
||||
When WordPress filters `<style>` tags:
|
||||
1. Add CSS to `/wp-content/themes/THEME_NAME/outstanding-enhancements.css`
|
||||
2. Touch the file to force cache refresh: `touch /path/to/file.css`
|
||||
3. Use `!important` declarations generously to override theme defaults
|
||||
4. Target specific classes like `.cta-button.primary` individually
|
||||
|
||||
### 3. CTA Button Styling
|
||||
Buttons with classes like `.cta-button` and `.primary` need special treatment:
|
||||
- Always include `-webkit-text-fill-color` property
|
||||
- Target by attribute selector: `a.cta-button[style*="background: #000"]`
|
||||
- Add rules for `:link` and `:visited` pseudo-states
|
||||
- Use maximum specificity when needed
|
||||
|
||||
### 4. CSS Specificity Hierarchy
|
||||
When inline styles fail, use this specificity order:
|
||||
1. Element selector with attribute: `table thead th[style*=color]`
|
||||
2. Multiple class selectors: `.daw-section .table-container thead th`
|
||||
3. Universal selector with attribute: `.table-container thead th *`
|
||||
4. All with `!important` and `-webkit-text-fill-color`
|
||||
|
||||
## Tips
|
||||
|
||||
1. **Always wrap CSS** in `<style>` tags when adding to WordPress (or use theme stylesheet)
|
||||
2. **Use `!important`** liberally when WordPress theme overrides - this is often necessary
|
||||
3. **Add `-webkit-text-fill-color`** for browser compatibility on text color issues
|
||||
4. **Test on mobile** - the responsive CSS handles tablets and phones
|
||||
5. **Preserve content** - never remove existing content when styling
|
||||
6. **Backup first** - save post content before making changes
|
||||
7. **Touch CSS file** after changes to force browser cache refresh
|
||||
8. **Check `.table-container`** - WordPress may wrap tables automatically
|
||||
9. **Target button classes** - `.cta-button`, `.primary`, `.secondary` need specific rules
|
||||
Reference in New Issue
Block a user