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

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

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

Última actualización: 29/07/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 Silent 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 Silent

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

    Ocultar:

Ocultar los iconos de las redes sociales de la página del producto 

.twitter{    display: none;}.google{    display: none;}.facebook{    display: none;}.js-desktop-pinterest-share{    display: none;}
Delete

Ocultar las categorías principales

.pill{ 

display:none; 

}

Delete

Ocultar el campo de suscripción al newsletter en el footer

#container > div.js-main-content.main-content > footer > div.footer > div > div > div:nth-child(3) > div:nth-child(2) {

display:none;

}

Delete

Ocultar las opciones de Registro e Iniciar sesión

Para Desktop💻

/*WEB*/

.user-access {

display:none;

}

Delete

Para Mobile📱

/*MOBILE*/

.mobile-accounts {

display:none;

}

Delete
Delete

Ocultar las etiquetas de promociones

.label-primary{

display:none;

}

Delete

    Modificar:

.svg-icon-text {

    fill: #f1f100;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?.
Delete

Barra de búsqueda: cambiar los colores del texto y el fondo

Para Desktop💻

/*WEB*/

.js-search-input.header-input.form-control.form-control-xs {

    background-color: #F1F100;

    color: #ff0000;

}

Delete

Para Mobile📱

/*MOBILE*/

.js-search-input.header-input.p-left-half.form-control.form-control-xs {

    background-color: #F1F100;

    color: #ff0000;

}

Delete


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?

Ten en cuenta que Background-color es el color de fondo y Color es el color del texto.

Delete

Cambiar el color de la barra de navegación

.js-desktop-nav.desktop-nav.hidden-phone.font-small{

       background-color:#ff0000;

}

.desktop-nav-item {

    background-color: #ff0000;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?.

Delete

Cambiar el tamaño del logo

Para Desktop💻

.logo-img {

height: 400px;

}

Delete

Para Mobile📱

.theme-wide .mobile-logo-home .logo-img {

    max-height: 90px;

}

Delete


❗ Para definir el tamaño, solo es necesario cambiar el valor junto a 'px'. Por ejemplo, puedes cambiar 90px por 80px.

Delete

Cambiar el color del menú de navegación (Inicio, Productos, Contacto, etc.)

".desktop-nav-link {

color: #ff0000;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?.
Delete

Cambiar el color del botón de compra rápida

.btn.font-small-extra {

background-color: #ff0000;

color: #000000;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?

Ten en cuenta que Background-color es el color de fondo y Color es el color del texto.
Delete

Cambiar el color de fondo del footer

.footer{

background-color: #ff0000;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?
Delete

Cambiar el color de los links del footer

.footer a{

    color: #ff0000!important;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?.
Delete

Cambiar el color de los títulos del footer (Navegación, Contacto, Newsletter, etc.)

.footer-title.font-body.text-uppercase {

    color: #ff0000;

}


❗ Para elegir y obtener el código de color deseado, te recomendamos ver el tutorial 👉¿Qué colores puedo usar para las variantes de producto y en el diseño de mi tienda?.
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.