Centro de Atención Nube Configura tu tienda Diseño Personalizar tu diseño Edición avanzada de CSS

Trend - Códigos CSS para personalizar el diseño

Códigos CSS para editar algunos de los elementos de la plantilla de diseño Trend de Tiendanube

Última actualización: 21/10/2022

Saltar a los Códigos CSS

Es posible realizar ciertas modificaciones en el diseño de una tienda mediante códigos CSS, un lenguaje de programación utilizado para definir la visualización de una página web.  

Desde el Administrador de tu Tiendanube, vas a poder incorporar los códigos que quieras siguiendo nuestro tutorial:

📝¿Cómo insertar un código CSS en mi Tiendanube?

En este artículo, te dejamos algunos de los códigos con los que puedes modificar el diseño Trend de tu Tiendanube. 

Estos códigos CSS solo funcionan en esta plantilla, por lo que es posible que pierdas las modificaciones si cambias de diseño. Conoce más en 📝¿Cómo cambiar mi plantilla de diseño y qué implica?.

Delete

Warning

Algunos códigos requieren de conocimiento básico de este lenguaje para que funcionen correctamente y puedan adaptarse a lo que necesitas (colores, medidas, etc.).

Delete

Info

En caso de que necesites ayuda para generar códigos CSS personalizados o quieras realizar cambios más profundos en el diseño de tu tienda, puedes contactar a uno de los 👉Tiendanube Especialistas.

Códigos CSS para Trend

Desplegando las siguientes opciones vas a poder ver el código correspondiente a cada una.

    Ocultar:

Ocultar las opciones de Registro e Inicio de sesión

div.col-sm-6.text-right {

    display: none;

}

Delete

Ocultar el newsletter

.row.home-widgets.m-top-double {

    display: none;

}"

Delete

Eliminar el efecto oscuro de los banners al pasar el mouse por encima

.textbanner-image:after {

    background: none;

}

Delete

Ocultar las flechas del carrusel de imágenes

.bx-controls {

    display: none;

}

Delete

Ocultar el botón "Mostrar todos los productos"

.text-center.p-left-half.p-right-half.full-width.d-inline-block.m-bottom.m-top {

    display: none;

}

Delete

Ocultar el filtro de variantes en la página de productos

div#filters-column {

    display: none;

}

.body > div.js-main-content.main-content > div:nth-child(3) > div.row.m-top.m-top-none-xs > div.col-sm-2.visible-when-content-ready.hidden-xs > div:nth-child(2) {

    display: none;

}

.full-width-container {    

    display: none;

}

Delete

Ocultar la opción de "Ordenar Por"

.row.category-controls.m-bottom-xs.p-bottom-half-xs {

    display: none;

}

Delete

Eliminar el zoom de las imágenes

.mousetrap {

    display: none;

}

Delete

Ocultar la etiqueta promocional en la página de productos

.label-primary {

display: none;

}

Delete

Ocultar la etiqueta de envío gratis

.label.label-circle.label-primary-dark.label-overlap{

display:none;

}

Delete

    Modificar:

Animar la barra de anuncios

.js-adbar.section-advertising {

animation: moveText linear 14s -3s forwards infinite;

}

@Keyframes moveText {

from { transform: translateX(100%); }

to { transform: translateX(-150%); }

}

Delete

Cambiar el tamaño del carrusel de imágenes para desktop (computador)

@media (min-width: 767px) { 

img.slide-img {

    width: 75%;

    margin-left: 150px;

}}

Delete

Cambiar la posición del menú principal (centralizar)

a.desktop-nav-link {

    text-align: center!important;

}

Delete

Cambiar el tamaño del logo

.logo-image img {

    max-height: 300px;

    max-width: 100%;

}

Delete

Disminuir el tamaño de las imágenes en el detalle del producto

img.thumb-image.lazyautosizes.blur-up.ls-is-cached.lazyloaded {

    width: 5vw!important;

}

Delete

Delete

Info

En caso de que no te guste el resultado o quieras deshacer los cambios, solo debes eliminar el código agregado (teniendo cuidado de no borrar otros códigos anteriores) y guardar los cambios.