# CraftForge – Customization Guide

## Theme Colors

All colors use CSS custom properties and can be changed from the Customizer:

**Appearance → Customize → CraftForge Theme → Theme Colors**

| Variable | Default | Usage |
|---|---|---|
| `--cf-primary` | `#6366F1` | Buttons, links, accents |
| `--cf-secondary` | `#EC4899` | Gradients, hover states |
| `--cf-accent` | `#14B8A6` | Badges, success states |
| `--cf-dark` | `#0F172A` | Dark backgrounds, text |
| `--cf-light` | `#F8FAFC` | Light backgrounds |

### Advanced CSS Overrides

Add custom CSS via **Appearance → Customize → Additional CSS**:

```css
:root {
    --cf-primary: #8B5CF6;
    --cf-secondary: #F472B6;
}
```

## Typography

The theme uses:
- **Inter** – Headings (loaded from Google Fonts)
- **DM Sans** – Body text (loaded from Google Fonts)

To change fonts, add custom CSS or use a plugin like "Custom Fonts":

```css
:root {
    --cf-font-heading: 'Your Heading Font', sans-serif;
    --cf-font-body: 'Your Body Font', sans-serif;
}
```

## Hero Section

Configure the front page hero at **Appearance → Customize → CraftForge Theme → Hero Section**:

- Title text
- Subtitle text
- CTA button 1 text + URL
- CTA button 2 text + URL
- Hero background image

## Portfolio

### Adding a Project

1. Go to **Portfolio → Add New**.
2. Enter the project title and content (case study details).
3. Set the **Featured Image** for the project card.
4. Fill in meta fields:
   - Client Name
   - Project URL
   - Project Date
   - Duration
   - Technologies (comma-separated)
   - Featured (check to show on front page)
5. Upload gallery images for the project gallery section.
6. Add a testimonial quote and author.
7. Assign Portfolio Categories and Tags.

### Portfolio Display Settings

**Appearance → Customize → CraftForge Theme → Portfolio Display**

- Projects per page (3–24)
- Grid columns (2, 3, or 4)

## Services

### Adding a Service

1. Go to **Services → Add New**.
2. Enter the service title and detailed description.
3. Set the **Featured Image**.
4. Fill in meta fields:
   - Icon (dashicon class, e.g., `dashicons-admin-customizer`)
   - Starting Price
   - Featured (check to highlight)
5. Assign a Service Category.

## WooCommerce

### Shop Settings

**Appearance → Customize → CraftForge Theme → WooCommerce Settings**

- Products per row (2–4)
- Show/hide shop sidebar

### Product Card Styling

Product cards automatically use the CraftForge styling with:
- Rounded corners (16px)
- Hover lift effect
- Gradient "Add to Cart" buttons
- Sale badge styling

## Elementor

CraftForge includes four custom Elementor widgets:

1. **Portfolio Grid** – filterable project gallery
2. **Services** – services from CPT
3. **Team** – repeater-based team cards
4. **Testimonials** – repeater-based testimonials

Find them under the "CraftForge" category in Elementor.

### Full-Width Elementor Pages

Use the **Full Width** page template to remove the header/footer padding and use Elementor over the entire page canvas.

## Child Theme

For extensive customizations, create a child theme:

```
craftforge-child/
├── style.css
└── functions.php
```

**style.css:**
```css
/*
Theme Name: CraftForge Child
Template: craftforge
*/
```

**functions.php:**
```php
<?php
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('craftforge-child-style',
        get_stylesheet_uri(),
        array('craftforge-style'),
        wp_get_theme()->get('Version')
    );
});
```

## Hooks and Filters

| Hook | Type | Location |
|---|---|---|
| `craftforge_before_header` | Action | Before header output |
| `craftforge_after_header` | Action | After header output |
| `craftforge_before_footer` | Action | Before footer output |
| `get_the_archive_title` | Filter | Archive title customization |
| `woocommerce_loop_add_to_cart_args` | Filter | Product button classes |

## Translation

1. Use a plugin like **Loco Translate** or Poedit.
2. The POT file is located at `languages/craftforge.pot`.
3. Create `.po` and `.mo` files for your language (e.g., `craftforge-de_DE.po`).
4. Place them in the `languages/` directory.