Muy importante: NIDUX no da soporte por errores en css, si alguno de estos códigos le presenta algún error debe de borrar inmediatamente el mismo y buscar ayuda de alguien que tenga conocimiento en los mismo. Bajo ningún motivo pueden incluirse en otros lados, por lo que te aconsejamos que si por alguna razón visualizas un error después de poner un código, es mejor que lo elimines totalmente.
Aquí te dejamos estos códigos CSS para personalizar más tu eCommerce. Te brindamos una serie de códigos CSS para que apliques en tu eCommerce y puedas personalizarlo un poco más.
El código CSS es muy utilizado en la estética y usabilidad de todas las webs en internet. Muchas de estas personalizaciones puedes apreciarlas en www.bolsosycarteras.com.
Recuerda que trabajar con códigos es algo sumamente delicado, por favor utilízalos únicamente a como se indican aquí. Todos los códigos deben incluirse únicamente en DISEÑO | TEMA UMARKET | AVANZADO
Todos los códigos deben de copiarse exactamente como se muestran acá, si faltara un signo, dará error. Ser cuidadosos, pueden haber diferencias entre los estilos del tema.
Los colores en la web en css son hexadecimales y se componen de un signo numeral y 6 caracteres alfanuméricos (#ffffff) . Puedes encontrar los que necesites aquí:
Colores Hexadecimales para CSS
1. IMAGEN DE FONDO
Si se desea poner una imagen de fondo en el eCommerce. Se debe de reemplazar únicamente el url por la imagen que el cliente desea, recordemos que todas las imágenes que se utilizan, para “decorar” van en el menú de GENERAL | Biblioteca de Medios.
/* imagen en fondo total */
body {
background-image: url("https://media.nidux.net/media/12556/Background Mamá Ding clear.png")
!important; background-repeat:repeat;
}
.content {
background-color: none!important;
}
Tambien puedes colorear de un solo tono el fondo total de tu ecommerce: /*fondo total */
body {
background: #234234!important;
}
2. TAMAÑO DEL LOGO
Podés cambiar el tamaño del logo desde el 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 móvil*/
@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;
} }
3. CINTILLO EN BANNER PRINCIPALES
Cambia el color de fondo y el color del texto del cintillo en los banners principales.
/* BANNERS PRINCIPALES */
/*Color de Fondo*/
.owl-stage-outer .owl-text-overlay {
background-color: rgba(0,0,0,.90) !important; }
/*Color de Fondo en móvil*/ @media (max-width: 767px){ .owl-stage-outer .owl-text-overlay {
background-color:rgba(0,0,0,.70) !important;
} }
/*Texto Banners Principales*/
.owl-stage-outer .owl-text-overlay h2{ font-size: 270%;
color: #ffffff;
}
4. SOMBRA GRIS EN FAJA DE BANNERS
Elimina el cuadro gris encima de las imágenes de la faja de banners y el color del texto sobre las imágenes. Así mismo podés modificar el color del texto.
/* Sombra en categoría fajas de banners*/ .categories .category .category-mask {
background-color: transparent!important;
}
/*Color de Texto*/
.categories .category .category-title {
text-align: center;
color: #ffffff !important;
}
5. ELIMINA EL CHAT AZUL DE FACEBOOK
/*chat default azul de facebook*/
.chatterFb { display: none !important; }
6. PON COLOR A LA BARRA DE ARRIBA DE INICIO DE SESIÓN
Con este código puedes poner un color específico a la barra de arriba del ecommerce.
/*cintillo de arriba INICIO SESION*/
/*Texto*/
#page-wrapper > div.top-header.hidden-xs > div > div > div.col-sm-10.text-right > ul > li > a {
background:none!important; font-weight: 800!important; color: #386037!important;
}
/*Color de Fondo*/
#page-wrapper > div.top-header.hidden-xs {
background-color: #2f2f2f!important; border:none!important;
}
7. TAMBIEN PUEDES PONER COLOR A LA BARRA DEL MENÚ SUPERIOR Y A LAS LETRAS DEL MENÚ.
/*MENÚ PRINCIPAL */
/*Fondo*/ header.navbar-default {
background-color: #A9C94B !important;
border:none!important; }
/*Texto*/
header.navbar .navbar-nav>li>a {
color: #ffffff!important; font-weight: 600;
}
No debes olvidar cambiar el color de las letras del menú en móvil si aparecen en blanco.
@media (max-width: 767px)
{
header.navbar .navbar-nav>li>a
{
color: #386037!important; }
}
8. PUEDES CAMBIAR EL COLOR DEL FOOTER Y EL COLOR DEL TEXTO
/*FOOTER*/
footer.navbar { background-color: black;
}
/*Textos*/ .footer-widget a {
color: #ffffff !important; text-transform: capitalize;
} /*Títulos*/
.footer-widget h3 {
color: #ffffff !important;
}
/*Íconos de contacto*/
.footer-widget-contacts ul li i {
color: #ffffff!important; background-color: none!important; border: 0px solid #000000;
}
/*FIN DEL FOOTER*/
9. PUEDES PONER EL FONDO BLANCO EN LOS IDEALES.
/*Colores en ideales*/
.services { background-color: white; border: none;
}
10. CSS PARA PRODUCTOS
/*PRODUCTO*/
/*Oculta el SKU del producto*/ .productSKUlabel
{ display: none }
/*Oculta el Peso del producto*/ .productWeightlabel
{ display: none }
/*Oculta la Marca del producto*/ .productBrandlabel
{ display: none }
11. CSS sombra en banners principales
/*Sombra banner principal*/
.owl-text-overlay {
background: #0f53b7!important;
opacity: 0.8;
}