# Configurazione Colori Plugin Entourance

## Panoramica

Il plugin Entourance ora supporta la configurazione personalizzata dei colori primary e secondary attraverso l'interfaccia di amministrazione di WordPress.

## Funzionalità

### Colori Configurabili

- **Colore Primary**: Colore principale del tema utilizzato per bottoni, link e elementi di evidenziazione
- **Colore Secondary**: Colore secondario del tema utilizzato per elementi secondari e complementari

### Elementi Stilizzati

I colori configurati vengono applicati automaticamente a:

#### Bottoni
- `.btn-primary` - Bottoni primari
- `.btn-secondary` - Bottoni secondari
- `.btn-outline-primary` - Bottoni con bordo primario
- `.btn-outline-secondary` - Bottoni con bordo secondario

#### Testo
- `.text-primary` - Testo con colore primario
- `.text-secondary` - Testo con colore secondario

#### Sfondi
- `.bg-primary` - Sfondo con colore primario
- `.bg-secondary` - Sfondo con colore secondario

#### Bordi
- `.border-primary` - Bordi con colore primario
- `.border-secondary` - Bordi con colore secondario

#### Variabili CSS
- `--bs-primary` - Variabile CSS per il colore primario
- `--bs-secondary` - Variabile CSS per il colore secondario

## Come Configurare

### 1. Accesso alle Impostazioni

1. Accedi al pannello di amministrazione di WordPress
2. Vai su **Entourance** nel menu principale
3. Clicca su **Settings**

### 2. Configurazione Colori

1. Nella sezione **Configurazione Colori**:
   - Usa il selettore di colore per **Colore Primary**
   - Usa il selettore di colore per **Colore Secondary**
2. Clicca su **Salva Impostazioni**

### 3. CSS Personalizzato (Opzionale)

Nella sezione **Custom CSS** puoi aggiungere regole CSS personalizzate che verranno applicate dopo i colori configurati.

## Valori di Default

- **Primary**: `#0d6efd` (Blu Bootstrap)
- **Secondary**: `#6c757d` (Grigio Bootstrap)

## Esempi di Utilizzo

### CSS Personalizzato

```css
/* Personalizza elementi specifici */
.entourance-plugin .card-header {
    background-color: var(--bs-primary);
    color: white;
}

/* Aggiungi effetti hover personalizzati */
.entourance-plugin .btn-primary:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Personalizza componenti specifici */
.entourance-plugin .experience-card {
    border-left: 4px solid var(--bs-secondary);
}
```

### Utilizzo delle Variabili CSS

```css
.entourance-plugin .custom-element {
    color: var(--bs-primary);
    border: 2px solid var(--bs-secondary);
    background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary));
}
```

## Compatibilità

- Compatibile con Bootstrap 5.2.2
- Funziona con tutti i componenti del plugin Entourance
- Supporta temi WordPress personalizzati
- Responsive design mantenuto

## Note Tecniche

- I colori vengono applicati tramite CSS inline per garantire la massima priorità
- Le variabili CSS Bootstrap vengono sovrascritte automaticamente
- Il sistema include automaticamente variazioni di luminosità per gli stati hover
- Il CSS personalizzato dell'utente viene applicato dopo le regole generate automaticamente

## Risoluzione Problemi

### I colori non si applicano
1. Verifica che il plugin sia attivo
2. Controlla che i colori siano stati salvati nelle impostazioni
3. Svuota la cache del sito se utilizzata

### Conflitti con il tema
1. Usa il CSS personalizzato per sovrascrivere stili del tema
2. Aggiungi `!important` se necessario
3. Verifica la specificità dei selettori CSS

### Performance
- Il CSS viene generato dinamicamente ad ogni caricamento
- Per siti con molto traffico, considera l'uso di cache
- Il CSS personalizzato viene incluso solo se presente