Guía de Estilizado Personalizado

Cómo personalizar los estilos del widget de comentarios

Puedes personalizar el estilo del widget de comentarios de dos maneras:

Opción 1: Mediante el parámetro customCSS

Pasa tu CSS personalizado como una cadena al parámetro customCSS al inicializar el widget:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

Opción 2: A través del panel de administración

1. Ve a la página de personalización del widget en tu panel de administración
2. Desplázate hasta la sección "CSS personalizado" dentro de "Avanzado"
3. Introduce tu CSS personalizado
4. Haz clic en "Guardar"

Tu CSS personalizado se aplicará a todos los widgets de comentarios en tu sitio.

Consejos

• Usa !important para sobrescribir los estilos predeterminados si es necesario
• Apunta a selectores específicos para evitar afectar otras partes de tu sitio
• Prueba tu CSS en diferentes navegadores para comprobar la compatibilidad
• El widget usa CSS estándar: no se requieren preprocesadores especiales

El borde alrededor del cuadro de comentarios está formado por el propio borde del área de texto más algunas líneas finas que el widget dibuja a su alrededor. Para cambiar su color o la redondez de las esquinas, establezca estas variables CSS en lugar de aplicar estilos directamente al textarea. Las variables restilizan cada parte del borde a la vez, por lo que las esquinas y los colores siempre coinciden.

Agregue el CSS al cuadro Custom CSS en la página de personalización del widget, o páselo con la opción customCSS. Solo necesita establecer las variables que desea cambiar.

También puede usar el asistente Comment box border justo debajo del cuadro Custom CSS, que genera este CSS por usted.

Cambiar el color del borde

Color del borde

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5

Cambiar el color del borde mientras escribe

Color del borde mientras escribe

Copy

1

2:root {

3 --fc-input-border-color-focus: #2563eb;

4}

5

Redondear las cuatro esquinas

Por defecto la esquina superior izquierda es cuadrada. Establezca ambas variables de radio para redondear las cuatro esquinas de la misma manera:

Redondear las cuatro esquinas

Copy

1

2:root {

3 --fc-input-border-radius: 12px;

4 --fc-input-border-start-start-radius: 12px;

5}

6

Esquinas cuadradas

Esquinas cuadradas

Copy

1

2:root {

3 --fc-input-border-radius: 0;

4}

5

Coincidir con su marca

Colores y esquinas de la marca

Copy

1

2:root {

3 --fc-input-border-color: #c7d2fe;

4 --fc-input-border-color-focus: #4f46e5;

5 --fc-input-border-radius: 8px;

6 --fc-input-border-start-start-radius: 8px;

7}

8

Colores diferentes en modo oscuro

Cuando el widget está en modo oscuro tiene la clase dark, por lo que puede establecer valores diferentes para el modo oscuro:

Colores del borde en modo oscuro

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5.dark {

6 --fc-input-border-color: #444;

7 --fc-input-border-color-focus: #aaa;

8}

9

¿Por qué no estilizar directamente el área de texto?

El widget dibuja parte del borde del cuadro de comentarios por sí mismo, alrededor del área de texto. Si establece border-color o border-radius solo en el textarea, esas líneas mantienen el estilo predeterminado y el borde se ve desalineado, por ejemplo una línea cuadrada que atraviesa una esquina redondeada. Las variables anteriores cambian ambos a la vez.