> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Cómo establecer CSS personalizado para tarjetas de confianza > ℹ️ **Note:** Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo. ¿Quieres un control completo sobre cómo tu Trust Badges mira en tu escaparate? 🎨 Mientras que la pestaña Diseño ofrece amplias opciones de personalización, **Custom CSS** le da la flexibilidad para hacer ajustes avanzados de estilo que van más allá de la configuración estándar. Ya sea que esté refinando el espaciado, coincidiendo con las estrictas directrices de marca, añadiendo efectos visuales personalizados, o resolviendo conflictos de estilos específicos para temas, Custom CSS proporciona control creativo completo sobre su diseño de Trust Badge. --- # **⚠️ Antes de empezar** Antes de utilizar CSS personalizado: * Asegúrate de que ya has creado una Insignia de confianza. * Tener una comprensión básica de CSS o acceso a un desarrollador. * Comprende que Custom CSS puede anular los ajustes de diseño estándar. 💡 Si aún no ha creado una Insignia de confianza, cree una antes de proceder con esta guía. --- # **🛠️ Paso 1 - Abra la pestaña de diseño** Abrir el **Hoppy Trust Badges** app y navegar a la Trust Badge que quieres personalizar. Entonces: ➡️ Haga clic en **Diseño** tab. Desplazarse hasta que encuentres **Custom CSS** sección. Esta sección contiene todas las herramientas necesarias para añadir y administrar estilo personalizado. --- # **🎨 Paso 2 - Abra la Sección de CSS Personalizada** Dentro del **Custom CSS** sección que encontrará: * Un editor de CSS * A **View Guide** botón * An **Aplicar** botón * Una plantilla CSS de inicio La plantilla de arranque contiene los selectores disponibles que se pueden personalizar para su Trust Badge. Esto hace que sea más fácil comenzar el estilo sin necesidad de inspeccionar los elementos del escaparate manualmente. --- # **✍️ Paso 3 - Agregue su CSS personalizado** El editor incluye varios selectores preconfigurados que apuntan elementos específicos de Trust Badge. ### **Selectores disponibles** #### **Container** Selector Descripción `.futureblink-trust-badge` Entire Trust Badge container --- #### **Título** Selector Descripción `.futureblink-trust-badge .fb-title` Texto del título principal `.futureblink-trust-badge.mobile .fb-title` Movil título de estilo 💡 Para insignias flotantes, el selector de título utiliza `.title` en lugar de `.fb-title`. --- #### **Subheading** Selector Descripción `.futureblink-trust-badge .subheading` Descripción del texto `.futureblink-trust-badge.mobile .subheading` Estilo de la descripción móvil --- #### **Iconos** Selector Descripción `.futureblink-trust-badge .icon` Iconos de insignia `.futureblink-trust-badge.mobile .icon` Movil icono de estilo --- #### **Call-To-Action Button** Selector Descripción `.futureblink-trust-badge .cta-button` CTA botón `.futureblink-trust-badge.mobile .cta-button` Botón móvil CTA --- ### **Ejemplo CSS** Para añadir padding al contenedor de placa y personalizar el título: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 Puede agregar selectores adicionales de CSS, consultas de medios, animaciones y reglas de estilo según sea necesario. --- # **📱 Paso 4 - Añadir Mobile-Specific Styling** Para apuntar dispositivos móviles específicamente, utilice `.mobile` variación de los selectores. Ejemplo: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` La aplicación se envuelve automáticamente `.mobile` selectores dentro de una consulta de medios móviles al renderizarlos en su escaparate. Si prefieres escribir tus propias consultas mediáticas, se conservarán exactamente como entraron. --- # **✅ Paso 5 - Aplica tu CSS** Una vez añadido su CSS: ➡️ Haga clic **Aplicar**. Las actualizaciones de la vista previa en vivo automáticamente, lo que le permite revisar sus cambios de estilo inmediatamente. Si desea eliminar su estilo personalizado más adelante: ➡️ Haga clic **Reset**. Esto elimina su CSS personalizado y restaura la configuración de diseño estándar. --- # **👀 Paso 6 - Revisar la vista previa** Después de aplicar su CSS: ➡️ Revisa la vista previa del escritorio. ➡️ Revisa la vista previa móvil. Verificar que: * El texto aparece correctamente. * Los íconos permanecen debidamente alineados. * El espaciamiento parece consistente. * Los botones se muestran como se esperaba. Si se requieren ajustes: ➡️ Actualice el CSS. ➡️ Haga clic **Aplicar** otra vez. La vista previa se actualiza automáticamente después de cada cambio. --- # **💾 Paso 7 - Guardar y publicar** Una vez satisfecho con el diseño: ➡️ Haga clic **Guardar**. ➡️ Haga clic **Publish**. ⚠️ Salvar solo no actualiza el escaparate. La insignia de confianza también debe publicarse antes de que los clientes puedan ver los cambios. --- # **⚠️ Notas importantes** ### **CSS personalizado anula los ajustes estándar** Custom CSS tiene precedencia sobre la mayoría de la configuración de la pestaña Diseño. Si un color, un espaciado o un ajuste de tipografía parece ser ignorado, es probable que sea superado por su CSS. --- ### **Manejo automático !importante** La aplicación añade automáticamente `!important` prioridad a las declaraciones de CSS al hacer estilos en el escaparate. Usted no necesita añadir `!important` manualmente. --- ### **Estilizado** Personalizado CSS se ve automáticamente en la asignación de confianza específica que se está editando. Esto ayuda a prevenir conflictos de estilo con: * Otras insignias de confianza * Elementos temáticos * Otros componentes del almacén --- ### **Se permiten Selectores Empty** Usted no necesita utilizar cada selector proporcionado en la plantilla. Sólo añadir estilos a los elementos que desea personalizar. --- ### **CSS Validation** El editor no valida la sintaxis CSS. Si un estilo no se aplica correctamente: ➡️ Compruebe los nombres del selector. ➡️ Verifica los frenos y los semicolons. ➡️ Revise el CSS para errores de sintaxis. --- # **❓ Solución de problemas** Si tus estilos no aparecen correctamente: ➡️ Confirmar que **Aplicar** ha sido pinchado. ➡️ Verificar la insignia de confianza ha sido **Guardado** y **Publicado**. ➡️ Compruebe que los nombres de selector coinciden exactamente con la plantilla proporcionada. ➡️ Prueba en una ventana Incognito o navegador privado. ➡️ Refresca el escaparate a los estilos de caché claros. --- # **🎉 Resultado final** ✅ Su Insignia de confianza se puede personalizar más allá de la configuración de diseño estándar. ✅ Marcar, espaciar, tipografía y estilo de icono se puede controlar más precisamente. ✅ Los diseños de escritorio y móviles se pueden estilo independientemente. ✅ Los estilos personalizados permanecen aislados a la señal de confianza seleccionada. Custom CSS proporciona una manera flexible de crear una experiencia de fideicomiso más pulida y coherente al tiempo que conserva la simplicidad de las herramientas de diseño incorporadas de la aplicación. ✨