Breadcrumbs Uncomplicated hereda cada decisión visual de su tema - color de enlace, color del texto, fuente, comportamiento al pasar el cursor, espaciado. El trabajo de la aplicación es añadir la propia ruta de navegación, no imponer un estilo sobre el diseño existente. Si la ruta renderizada no se ve como espera, casi siempre es porque su tema no estableció ese estilo en los enlaces o el texto, y la aplicación está heredando ese vacío con fidelidad. Cada anulación de las siguientes es un ajuste de un clic en el bloque del tema; la vía de escape CSS al final cubre el resto.
Heredar los colores del tema (el valor por defecto)
De forma predeterminada, la ruta de navegación hereda los colores de enlace, texto y hover de su tema - el bloque no emite ningún CSS de color a menos que se lo pida. En la mayoría de los temas esto es exactamente lo correcto: la ruta toma el mismo color de acento que el resto de su navegación, y los estados de visitado / hover coinciden con el resto del sitio.
Si los colores heredados no encajan (porque su tema usa esquemas de color con ámbito a los que el bloque queda fuera, o porque el tema usa colores de texto transparentes que se ven mal sobre una imagen), marque Anular los colores del tema y la aplicación expondrá tres selectores de color: Color del texto del enlace, Color del separador y Color del título del producto. Desactive la anulación y vuelve la herencia.
Espaciado - arriba, abajo y entre elementos
El espacio vertical alrededor de la ruta de navegación es el margen que aporte la sección padre de su tema. Si necesita otro ritmo:
- Establecer el espaciado anterior - un control deslizante, de -60 a +60 px en pasos de 5 px, aplicado como
margin-topal nav de la ruta de navegación. - Establecer el espaciado a continuación - mismo rango y paso, aplicado como
margin-bottom. - Establecer el espaciado entre las migas de pan - un selector Pequeño/Medio/Grande (0.3em / 0.6em / 1.0em) que controla el hueco alrededor de cada separador.
No hay ajuste de margen izquierdo - la alineación horizontal se hereda de la sección que envuelva el bloque. Si un tema sangra los bloques de aplicación de manera distinta, consulte el ajuste avanzado Clase de envoltura.
Alineación con la imagen del producto
En algunos temas la ruta de navegación va sobre una imagen de producto a todo el ancho, pero la propia ruta está restringida a la columna de contenido más estrecha, por lo que parece desalineada. Es una decisión del tema: la ruta hereda el ancho de la sección en la que esté colocada.
No hay un interruptor de “ancho completo” en el bloque. La solución es trasladar el bloque de ruta de navegación a la misma sección que su galería de imágenes (para que tome el mismo page-width), o añadir un bloque de Liquid Personalizado con una anulación <style> que saque el nav a ancho completo.
Separadores personalizados
El valor por defecto es › (comilla angular derecha simple, ›), elegida porque resulta visualmente discreta en todos los temas. El ajuste Separador de migas de pan ofrece cuatro opciones: flecha (›), barra inclinada (/), barra invertida (\) y barra vertical (|). Un carácter personalizado o un SVG no es una opción integrada - para eso necesita la vía de escape CSS (apunte a .breadcrumb__sep y reemplace su contenido), tratada más abajo.
Mayúsculas y subrayado
La ruta de navegación toma su capitalización y subrayado de su tema por defecto. Cuando quiera un comportamiento distinto:
- Capitalización - Tema predeterminado, Todo en mayúsculas, Todo en minúsculas, Escribe en mayúsculas cada palabra, o Poner en mayúscula la primera palabra.
- Subrayado de enlaces - Tema predeterminado, Añadir subrayado, Eliminar subrayado, o Subrayar solo al pasar el cursor.
No hay ajuste de negrita en el bloque - para negrita querrá el fragmento CSS de abajo.
Cuando sí necesita CSS
Para las necesidades menos comunes - peso en negrita, una anulación específica del tema, estados hover, separadores animados - la aplicación asigna a cada elemento de la ruta un nombre de clase estable. El nav tiene el id #uncomplicated-breadcrumbs y la clase .category-breadcrumbs; cada enlace que no es hoja es a.breadcrumb__branch; el elemento final opcional solo-texto es span.breadcrumb__leaf; cada separador es span.breadcrumb__sep.
El ajuste más solicitado es ocultar la ruta de navegación en pantallas pequeñas, donde el espacio vertical es escaso:
@media (max-width: 900px) {
#uncomplicated-breadcrumbs { display: none; }
}
El sitio más limpio donde poner ese fragmento es un bloque de Liquid Personalizado en el Editor de Temas de Shopify, envuelto en etiquetas <style>. Este screencast explica cómo insertar uno:
Qué no hacer
No pegue CSS directamente en el código de su tema para anular la ruta de navegación. Póngalo en un bloque de Liquid Personalizado (como arriba), en un recurso CSS personalizado, o en el campo CSS personalizado del editor de temas, para que las actualizaciones del tema no lo borren.
Resumen
Los valores predeterminados son deliberados: la aplicación hereda todo de su tema para que la ruta de navegación se sienta nativa sin necesidad de configuración. Cada ajuste en esta página es una vía de escape opcional para los casos en los que los valores predeterminados del tema no son lo que quiere.