Tema Phoenix aplicar CSS
Si tiene conocimientos en CSS puede en el menú a mano izquierda
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 desarrollo web o bien, en aplicar códigos de CSS básicos. 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 y verifica si estás agregando el código correctamente, que no hayan duplicados los códigos e incompletos, o que estos hagan falta carecteres o las llavecitas de apertura y cierre del código.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 Phoenix | 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
Homepage
1. Menú superior
/*menu inicio sesion homepage*/
.bg-black {
--bs-bg-opacity: 1;
background-color: #001b47 !important;
}
2. Alinear la vista de los productos en el homepage.
/* Inicio Para alinear el boton agregar al carrito en tarjeta de producto*/
.product-card-8 {
margin-bottom: 24px;
}
.product-card-8 .product-card-info {
display: flex;
flex-direction: column;
height: 236px;
}
.product-card-8 .product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card-8 .product-cart-btn {position:absolute;bottom:13px;}
/*Fin alinear botón agregar al carrito*/
3. Fondos
1. /*background color faja de banners*/
.bg-gray-100 {
background-color: #0a0a0a;
}
2. /*background color toda la tienda*/
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
font-color: #ffffff;
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: #080808;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
/*botones y backgrounds blanco*/
.bg-white {
--bs-bg-opacity: 1;
background-color: rgb(255 255 255 / 62%) !important;
}
/* imagen en fondo total */
body {
background-image: url("IMAGEN DEBE DE ESTAR AGREGADA EN BIBLIOTECA DE MEDIOS Y PEGAR LA URL AQUÍ");
background-size: cover;
webkit-background-size: cover;
moz-background-size: cover;
background-size: cover;
background-size: cover;
}
4. Letras
1. /*Todas las letras principales*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
margin-bottom: .5rem;
font-family: rubik, sans-serif;
font-weight: 600;
line-height: 1.2;
color: #e9a516;
}
5. Botones en mobile banners principales
/*botones en mobile banner principal estilo 7*/.btn-outline-white { color: #650460; border-color: #fff; background-color: #F78C00;}
6. Ajustes estéticos en textos
/*linea color debajo de texto encabezados home estilo 7*/
.section-heading-01:after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100px;
height: 3px;
background: #c50200;
}
Plugins
Filtro Avanzado
#ais-SearchBox-preview .cat_name {
color: #3e460e;
}
#ais-SearchBox-preview .cat_hit {
color: #3e460e;
}
Checkout
Recuerda cambiar los colores con los códigos hexadecimales.
.text-success {
color: #2d2d2d!important;}
#masterButton {
background-color: #BA1051;
border: none;}
.btn-warning {
background-color: #ffffff;
color: #2d2d2d;
border-color: #4d4d4d}
.btn-warning:hover {
background-color: #BA1051;
color: #fff;
border: none;
box-shadow: none;}
#shipItButton {
background-color: #6F7E0D;
border: none;}
#shipItButton:hover {
box-shadow: 5px 5px 15px 0px rgba(111,126,13,0.75)}
.totalLine > td:nth-child(2) > span:nth-child(2) {
color: #BA1051}
.btn.btn-danger.push-left {
background-color: #979797; border-color: #979797;}
.btn.btn-danger.push-left:hover {
box-shadow: none;
}
.processTargetAddress {background-color: #6F7E0D!important; border-color: #6F7E0D!important;}
.btn-success.processTargetAddress:hover{box-shadow: 5px 5px 15px 0px rgba(111,126,13,0.75)!important}
.input-group-text {
color: #6F7E0D;
}
#restartShipping {
background: #6F7E0D;
border-color: #6F7E0D;}
#restartShipping:hover {
box-shadow: 5px 5px 15px 0px rgba(111,126,13,0.75)}
.swal2-icon.swal2-info.swal2-icon-show {color: #6F7E0D;
border-color: #6F7E0D;}
.app-footer {
background-color: #6f7e0d}
Related Articles
Estilo 06 Tema Phoenix
Estilo 06 Tema Phoenix Colores claros con listillo superior ¿Cómo se mirará el home de mi tienda virtual si activo el tema 6 de Phoenix? Hemos recreado una tienda virtual demo para que puedas ver el estilo 06 y tambien te adjuntamos el infograma para ...Estilo 02 Tema Phoenix
Estilo 02 Tema Phoenix Estilo Navegación Transparente ¿Cómo se mirará el home de mi tienda virtual si activo el tema 2 de Phoenix? Hemos recreado una tienda virtual demo para que puedas ver el estilo 02 y tambien te adjuntamos el infograma para que ...Estilo 07 Tema Phoenix
Estilo 07 Tema Phoenix Barra de Navegación colorida ¿Cómo se mirará el home de mi tienda virtual si activo el tema 7de Phoenix? Hemos recreado una tienda virtual demo para que puedas ver el estilo 07 y tambien te adjuntamos el infograma para que ...Estilo 03 Tema Phoenix
Estilo 03 Tema Phoenix Estilo Galería de Banners ¿Cómo se mirará el home de mi tienda virtual si activo el tema 3 de Phoenix? Hemos recreado una tienda virtual demo para que puedas ver el estilo 03 y tambien te adjuntamos el infograma para que puedas ...Estilo 01 Tema Phoenix
Estilo 01 Tema Phoenix Estilo por Defecto ¿Cómo se mirará el home de mi tienda virtual si activo el tema 1 de Phoenix? Hemos recreado una tienda virtual demo para que puedas ver el estilo 01 y tambien te adjuntamos el infograma para que puedas ...