Tabla de contenido
CSS u hojas de estilo en cascada es el nombre de un lenguaje de diseño gráfico destinado a embellecer los sitios web, este se encuentra presente en prácticamente todos los sitios web modernos, la manera en la que funciona es que seleccionamos un elemento y le damos una instrucción a este, un ejemplo de como funciona es el siguiente:
"p { color:red;}"
En ese pequeño bloque de código estoy seleccionando un parrafo e indicandole que su color debe ser rojo, ¿Bastate simple, verdad?
También podemos seleccionar clases por medio del prefijo . cuando deseamos seleccionar un elemento específico.
Acá te brindamos varios bloques de código CSS para poder personalizar tu eCommerce
Por favor ten en mente que trabajar con código de CSS de manera incorrecta puede llevar a problemas con la visualización de tu sitio web, todo el código de CSS presente acá se ingresa en Diseño | Tema UMarket | Avanzado
En caso de que se presenten dificultades con la visualización de la página después de haber introducido código lo más recomendable es que lo borres.
Otro detalle muy importante a denotar es que los colores que se utilizan con el código CSS son hexadecimales, si deseamos buscar un color en especifico en línea hay diversas herramientas destinadas a facilitar esto. Dicho esto vamos a aprender a modificar diversos elementos de nuestra tienda virtual por medio de código.
Si se desea poner una imagen de fondo en el eCommerce, se debe reemplazar únicamente el URL entre el paréntesis y comillas, debemos tener en mente que todas las imágenes que utilizamos para decorar en nuestra tienda virtual las podemos encontrar en General | Biblioteca de Medios
/*Imagen en fonto total*/
body {
background-image: url("https://media.nidux.net/media/12345/FotoDeEjemploTutorial.png")!important;
background-repeat: repeat;}
.content {
background-color: none!important;}
También puedes colorear de un solo color el fondo total de tu eCommerce, en caso de preferirlo en comparación a una imagen
/*Color del fondo total*/
body {
background: #fffffff!important;}
En este y todos los casos relacionados a cambiar el color de un elemento únicamente debemos cambiar el valor hexadecimal por el del color que deseemos utilizar.
Podés establecer y cambiar el tamaño de tu logo desde el panel de administrador, en Cuenta | Mi Empresa y ajustarlo con CSS
/*Ajuste del logo*/
.logo {
margin-left: 20px!important;
height: auto!important;}
/*Tamaño de la barra normal*/
header.navbar-default {
height: 125px!important;}
/*Tamaño de la barra en scroll*/
header.navbar.navbar-small {
height: 85px !important; }
/*Logo en dispositivos móviles*/
@media (max-width: 800px){
header.navbar .fitThisOnMenu {
transform: scale(0.60);
position: absolute;
margin-top: -10px!important;
margin-left: -20px !important;}
} header.navbar-default {height: auto !important;}}
El siguiente código tiene la función de cambiar el color de fondo y texto del cintillo en los banners principales
/*Banners principales*/
/*Color de fondo*/
.owl-stage-outer .owl-text-overlay {
background-color: #ffffff}
/*Color de fondo en dispositivos móviles*/
@media (max-width: 767px) {
.owl-stage-outer .owl-text-overlay {
background-color: #fffffff !important;}}
/*Texto en los banners principales*/
.owl-stage-outer .owl-text-overlay h2{
color: #fffffff;}
Este código tiene la intención de eliminar la sombra o el cuadro que aparece por encima de las imagenes en las fajas de banners, junto al color del texto en caso de necesitarlo.
/*Sombra en las fajas de banners*/
.category-mask {
background-color: transparent;}
/*Color del texto*/
.category-title {
color: #fffffff!important;}
Este código está destinado a eliminar el pop-up que aparece cuando agregamos un Faceboo a nuestra tienda, el cual puede ser innecesario porque pudimos haber agregado con anterioridad una solución distinta a este como un botón de getbutton, un plugin de chat, entre muchos otros.
/*Eliminación de chat de Facebook*/
.chatterFb {display: none!important;}
Con el siguiente código podrás agregar el color que desees a la barra de arriba de tu eCommerce, donde tus usuarios tienen su panel de perfil.
/*Cintillo de arriba para Inicio de Sesión*/
/*Texto*/
.top-header .links a {
color: #fffffff;
}
.top-header {
background-color: #fffffff;
border: none;}
Con el siguiente código podrás cambiar y estilizar varios elementos del menú, dandole más personalidad al sitio web de tu negocio, desde cambiar colores por el de la empresa hasta crear paletas agradables para la vista, todo comienza por donde navegan tus usuarios
/*Menú principal*/
/*Fondo*/
header.navbar-default {
background-color: #fffffff!important;}
/*Texto*/
.navbar-nav li a {
color: #ffffff;}
Este es un ajuste que requiere de una configuración dedicada para dispositivos móviles, acá se encuentra la misma:
@media (max-width: 767px) {
.navbar-nav li a {color: #ffffff;} }
Con el siguiente código podrás modificar tu Footer de manera que el color de fondo de este se ajuste al de tu preferencia, y podrás modificar el color de las letras en los enlaces para que tengan legibilidad basada en el color que selecciones.
/*Footer*/
footer.navbar {
background-color: #ffffff;}
/*Textos en el footer*/
.footer-widget a {
color: #ffffff;}
/*Títulos*/
.footer-widget h3 {
color: #ffffff;}
/*íconos para contacto*/
.footer-widget-contacts ul li i {
color: #ffffff;
background-color: none;
border: 0x solid #000;}
El siguiente código está destinado a modificar el color de fondo en los ideales, para que puedas cambiar su fondo a uno que combine con la temática de tu tienda.
/*Color de fondo en los ideales*/
.services {
background-color: white;
border: none;}
Hay varias reglas de CSS que se pueden aplicar para embellecer, ajustar o eliminar elementos en la visualización del producto, como lo son las siguientes:
/*Página de productos*/
/*Ocultar el tag de SKU en la visualización del producto*/
.productSKUlabel {
display: none;}
/*Ocultar el tag de peso en un producto*/
.productWeightlabel {
display: none;}
/* Ocultar el tag de la marca en un producto*/
.productBrandlabel {
display:none;}