# 🎨 Guia de Customização Visual - Tema DaggerRO

## 🎯 Customizações Mais Comuns

---

## 1. 🎨 Alterar Cores do Tema

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `:root {` no início do arquivo e altere as variáveis:

```css
:root {
    /* CORES PRINCIPAIS - ALTERE AQUI */
    --color-primary: #1e3a8a;        /* Azul principal */
    --color-secondary: #f97316;      /* Laranja */
    --color-gold: #fbbf24;           /* Dourado */
    --color-white: #ffffff;          /* Branco */
    --color-light: #f8fafc;          /* Cinza claro */
    --color-dark: #1e293b;           /* Cinza escuro */
    --color-gray: #64748b;           /* Cinza médio */
}
```

### Exemplos de Paletas Alternativas:

#### Paleta Vermelha e Preta
```css
--color-primary: #dc2626;        /* Vermelho */
--color-secondary: #1e293b;      /* Preto */
--color-gold: #fbbf24;           /* Dourado */
```

#### Paleta Verde e Dourada
```css
--color-primary: #059669;        /* Verde */
--color-secondary: #fbbf24;      /* Dourado */
--color-gold: #f59e0b;           /* Âmbar */
```

#### Paleta Roxa e Azul
```css
--color-primary: #7c3aed;        /* Roxo */
--color-secondary: #3b82f6;      /* Azul */
--color-gold: #fbbf24;           /* Dourado */
```

---

## 2. 🖼️ Alterar Logo

### Opção 1: Substituir Arquivo
1. Prepare sua logo em PNG (fundo transparente recomendado)
2. Redimensione para aproximadamente 200x60 pixels
3. Substitua o arquivo: `themes/daggerro/img/logo.png`

### Opção 2: Usar Logo Diferente
Edite `themes/daggerro/header.php`, linha ~148:
```php
<img src="<?php echo $this->themePath('img/logo.png') ?>" alt="...">
```

Altere para:
```php
<img src="<?php echo $this->themePath('img/minha-logo.png') ?>" alt="...">
```

### Ajustar Tamanho da Logo
Edite `themes/daggerro/css/daggerro.css`, procure por `.dagger-logo img`:
```css
.dagger-logo img {
    height: 60px;        /* Altere a altura aqui */
    width: auto;
    /* ... */
}
```

---

## 3. 📝 Alterar Textos da Página Inicial

### Arquivo: `themes/daggerro/main/index.php`

### Hero Section (Banner Principal)
```php
<h1>⚔️ Bem-vindo ao <?php echo Flux::config('SiteTitle') ?> ⚔️</h1>
<p>
    Embarque em uma jornada épica...  <!-- ALTERE AQUI -->
</p>
```

### Features (Características)
```php
<div class="dagger-feature-card">
    <span class="dagger-feature-icon">⚔️</span>  <!-- Emoji -->
    <h3>PvP Épico</h3>                          <!-- Título -->
    <p>Batalhas intensas...</p>                  <!-- Descrição -->
</div>
```

### Adicionar Nova Feature
Copie e cole um card existente:
```php
<div class="dagger-feature-card">
    <span class="dagger-feature-icon">🎯</span>
    <h3>Sua Feature</h3>
    <p>Descrição da sua feature aqui!</p>
</div>
```

---

## 4. 🔗 Configurar Links de Redes Sociais

### Arquivo: `themes/daggerro/main/index.php`

Procure por "Junte-se à Nossa Comunidade" e altere:

```php
<a href="https://facebook.com/seu-servidor" class="dagger-btn dagger-btn-secondary">
    📘 Facebook
</a>
<a href="https://discord.gg/seu-servidor" class="dagger-btn dagger-btn-secondary">
    💬 Discord
</a>
```

---

## 5. 🎨 Alterar Fontes

### Arquivo: `themes/daggerro/css/daggerro.css`

### Passo 1: Importar Nova Fonte
No início do arquivo, altere:
```css
@import url('https://fonts.googleapis.com/css2?family=SuaFonte:wght@400;600;700&display=swap');
```

### Passo 2: Aplicar Fonte
Procure por `:root {` e altere:
```css
:root {
    --font-heading: 'SuaFonte', serif;    /* Títulos */
    --font-body: 'OutraFonte', sans-serif; /* Corpo */
}
```

### Fontes Recomendadas:

#### Para Títulos (Medieval)
- Cinzel (atual)
- MedievalSharp
- UnifrakturMaguntia
- Almendra

#### Para Corpo (Legibilidade)
- Lato (atual)
- Open Sans
- Roboto
- Inter

---

## 6. 🎭 Alterar Animações

### Arquivo: `themes/daggerro/css/daggerro.css`

### Velocidade das Transições
Procure por `:root {` e altere:
```css
:root {
    --transition-fast: 150ms ease-in-out;    /* Rápido */
    --transition-base: 300ms ease-in-out;    /* Normal */
    --transition-slow: 500ms ease-in-out;    /* Lento */
}
```

### Desabilitar Animações
Adicione no final do arquivo:
```css
* {
    transition: none !important;
    animation: none !important;
}
```

---

## 7. 📐 Alterar Espaçamentos

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `:root {` e altere:
```css
:root {
    --spacing-xs: 0.25rem;   /* Extra pequeno */
    --spacing-sm: 0.5rem;    /* Pequeno */
    --spacing-md: 1rem;      /* Médio */
    --spacing-lg: 1.5rem;    /* Grande */
    --spacing-xl: 2rem;      /* Extra grande */
    --spacing-2xl: 3rem;     /* Muito grande */
}
```

---

## 8. 🔘 Personalizar Botões

### Arquivo: `themes/daggerro/css/daggerro.css`

### Botão Primary (Laranja)
Procure por `.dagger-btn-primary`:
```css
.dagger-btn-primary {
    background: var(--gradient-secondary);  /* Altere aqui */
    color: var(--color-white);
    /* ... */
}
```

### Botão Secondary (Dourado)
Procure por `.dagger-btn-secondary`:
```css
.dagger-btn-secondary {
    background: var(--gradient-gold);  /* Altere aqui */
    color: var(--color-dark);
    /* ... */
}
```

### Criar Novo Estilo de Botão
Adicione no final do arquivo:
```css
.dagger-btn-custom {
    background: linear-gradient(135deg, #sua-cor 0%, #outra-cor 100%);
    color: #ffffff;
    /* copie outras propriedades de .dagger-btn */
}
```

---

## 9. 🌈 Alterar Gradientes

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `:root {` e altere:
```css
:root {
    --gradient-primary: linear-gradient(135deg, #cor1 0%, #cor2 100%);
    --gradient-secondary: linear-gradient(135deg, #cor1 0%, #cor2 100%);
    --gradient-gold: linear-gradient(135deg, #cor1 0%, #cor2 100%);
    --gradient-dark: linear-gradient(135deg, #cor1 0%, #cor2 100%);
}
```

### Gerador de Gradientes
Use: https://cssgradient.io/

---

## 10. 📱 Ajustar Breakpoints Mobile

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `@media (max-width: 768px)` e altere:
```css
@media (max-width: 992px) {  /* Altere o valor aqui */
    /* Estilos mobile */
}
```

Valores comuns:
- 480px - Mobile pequeno
- 768px - Tablet
- 992px - Tablet grande
- 1200px - Desktop pequeno

---

## 11. 🎨 Alterar Sombras

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `:root {` e altere:
```css
:root {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
```

### Remover Sombras
Altere todos para:
```css
--shadow-sm: none;
--shadow-md: none;
/* ... */
```

---

## 12. 🔄 Alterar Bordas Arredondadas

### Arquivo: `themes/daggerro/css/daggerro.css`

Procure por `:root {` e altere:
```css
:root {
    --radius-sm: 0.25rem;   /* Pequeno */
    --radius-md: 0.5rem;    /* Médio */
    --radius-lg: 0.75rem;   /* Grande */
    --radius-xl: 1rem;      /* Extra grande */
}
```

### Bordas Quadradas
Altere todos para `0`:
```css
--radius-sm: 0;
--radius-md: 0;
/* ... */
```

---

## 13. 📊 Personalizar Estatísticas

### Arquivo: `themes/daggerro/main/index.php`

### Alterar Ícones
```php
<span class="dagger-stat-number">
    <?php /* código PHP */ ?>
</span>
<span class="dagger-stat-label">Seu Texto</span>  <!-- Altere aqui -->
```

### Adicionar Nova Estatística
```php
<div class="dagger-stat-card">
    <span class="dagger-stat-number">999</span>
    <span class="dagger-stat-label">Sua Estatística</span>
</div>
```

---

## 14. 🎯 Alterar Favicon

1. Crie um favicon.ico (16x16 ou 32x32 pixels)
2. Substitua: `favicon.ico` na raiz do FluxCP
3. Ou edite `header.php`:
```php
<link rel="icon" type="image/x-icon" href="./seu-favicon.ico" />
```

---

## 15. 📝 Alterar Título do Site

### Arquivo: `config/application.php`

```php
'SiteTitle' => 'DaggerRO',  // Altere aqui
```

Isso afeta:
- Título da aba do navegador
- Logo text (se usado)
- Textos automáticos

---

## 💡 Dicas Importantes

### Antes de Customizar:
1. ✅ Faça backup dos arquivos originais
2. ✅ Teste em ambiente de desenvolvimento
3. ✅ Use um editor de código (VS Code, Sublime)
4. ✅ Valide o CSS: https://jigsaw.w3.org/css-validator/

### Depois de Customizar:
1. ✅ Limpe o cache do navegador (Ctrl+F5)
2. ✅ Teste em diferentes navegadores
3. ✅ Teste em diferentes dispositivos
4. ✅ Verifique o console (F12) por erros

### Ferramentas Úteis:
- **Cores**: https://coolors.co/
- **Gradientes**: https://cssgradient.io/
- **Fontes**: https://fonts.google.com/
- **Ícones**: https://emojipedia.org/
- **Imagens**: https://unsplash.com/

---

## 🎨 Exemplos de Temas Customizados

### Tema Dark (Escuro)
```css
:root {
    --color-primary: #3b82f6;
    --color-secondary: #f59e0b;
    --color-gold: #fbbf24;
    --color-white: #1e293b;
    --color-light: #0f172a;
    --color-dark: #f8fafc;
}
```

### Tema Minimalista
```css
:root {
    --color-primary: #000000;
    --color-secondary: #ffffff;
    --color-gold: #808080;
    --shadow-sm: none;
    --shadow-md: none;
    --radius-sm: 0;
    --radius-md: 0;
}
```

### Tema Vibrante
```css
:root {
    --color-primary: #ec4899;
    --color-secondary: #8b5cf6;
    --color-gold: #fbbf24;
}
```

---

**Boa customização!** 🎨⚔️
