Para incluir una imagen de tu marca como parte del - josea6965/ProyectoTI GitHub Wiki

Para incluir una imagen de tu marca como parte del color principal en el diseño de tu portal Freshdesk, debes enfocarte en estos elementos clave:

1. Identificación del Color Principal

El color principal de tu marca debe reflejarse en:

  • Botones principales (ej: "Nuevo ticket", enlaces destacados).
  • Barra de navegación (fondo o bordes).
  • Encabezados y elementos interactivos (hover, selección).

En el código CSS que te compartí anteriormente, el color azul (#2a5caa) se usa como ejemplo. Reemplázalo con el código HEX/RGB de tu marca:

/* Ejemplo: Cambia #2a5caa por tu color principal (ej: #FF5733 para naranja) */
.nav-link:hover, 
.nav-item.active .nav-link {
  background: #TU_COLOR_PRINCIPAL; 
}

.new-ticket-btn {
  background: #TU_COLOR_PRINCIPAL !important;
}

2. Incluir tu Imagen de Marca

📍 Logo en el Header

El código ya incluye un espacio para tu logo (usando la variable {{ portal.logo_url }}). Para configurarlo:

  1. Ve a Admin > Portal > Branding.
  2. Sube tu imagen (recomendado: formato PNG transparente, altura máxima de 60px).

📍 Banner o Hero Image

Si quieres añadir una imagen destacada (ej: equipo, instalaciones), agrega este código debajo del header (en home.liquid o theme.liquid):

<div class="brand-hero" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('URL_DE_TU_IMAGEN'); background-size: cover; height: 300px; display: flex; align-items: center; justify-content: center;">
  <h1 class="text-white text-center">Bienvenidos a la Comunidad FIGA</h1>
</div>

3. Personalización Avanzada con CSS

Si tu imagen de marca incluye patrones o texturas, puedes usarlos como fondo:

/* Ejemplo: Textura sutil en el header */
.fw-nav-wrapper {
  background: #ffffff url('URL_TEXTURA') repeat-x;
  background-size: 200px;
}

4. Coherencia Visual

  • Paleta de colores: Usa herramientas como Coolors para generar una paleta armónica.
  • Tipografía: Si tu marca usa fuentes específicas (ej: Google Fonts), añádela en el CSS: 
    @import url('https://fonts.googleapis.com/css2?family=Tu+Fuente&display=swap');
body {
  font-family: 'Tu Fuente', sans-serif;
}

5. Ejemplo Práctico

Si tu color principal es verde (#4CAF50) y tu logo es un archivo llamado logo-figa.png, el CSS quedaría así:

.nav-link:hover, 
.nav-item.active .nav-link {
  background: #4CAF50; /* Verde */
}

.new-ticket-btn {
  background: #4CAF50 !important;
}

Y en Branding, subirías tu logo:

Configuración de Branding en Freshdesk

¿Dónde encuentro el color principal de mi marca?

  1. Manual de identidad corporativa (si tienes uno).
  2. Herramientas como:
    • Color Picker (extensión de Chrome o Photoshop).
    • Sitio web actual: Inspecciona el elemento con las DevTools (F12).

¿Necesitas ayuda para extraer el color exacto de tu logo o imagen? ¡Puedo guiarte paso a paso! 🎨

⚠️ **GitHub.com Fallback** ⚠️