Share
Sé que los tres artículos anteriores parecen estar cargados con demasiada información, y puede que te haya resultado difícil seguir algunos de los pasos. Pero la buena noticia es que hemos terminado con la parte difícil ahora, y el resto de esta serie de temas de desarrollo se verá relativamente fácil en comparación con los artículos anteriores, porque en su mayoría repetiremos las mismas técnicas una y otra vez, lo cual He aprendido en esos artículos..
Hemos completado el diseño de la página de inicio hasta ahora, y en este último artículo sobre la página de inicio solucionaremos algunos problemas de estilo. Si has seguido todos los pasos de los artículos anteriores, deberías tener una página de inicio parecida a esto:
Aunque tiene todos los componentes necesarios en los lugares correctos, algunos estilos están desactivados. Para comenzar a corregir estos estilos, comenzaremos desde la parte superior de la página y corregiremos primero los estilos de encabezado. Si observa detenidamente el encabezado actual, encontrará un par de fallas.
En primer lugar, los iconos de la esquina superior izquierda tienen algunos problemas de relleno, el logotipo no está alineado en el centro, ya que está en HTML, y la barra de menú necesita un poco más de estilo. Otra cosa, que no es un problema de estilo pero es necesario, es el texto de bienvenida en la esquina superior izquierda.
Ya que arreglar el texto de bienvenida es el más fácil, manejaremos este primero. Para arreglar esto, estaremos editando el texto de bienvenida de Sistema> Configuración> General> Diseño> Encabezado, y vamos a cambiar eso Llámanos ahora texto como se muestra en nuestro HTML.
A continuación, veremos el Inspector de Chrome para verificar el estilo de los diferentes componentes uno por uno y comenzar a editarlos..
Comenzaremos por editar los iconos de la parte superior derecha y alinear en el centro el logotipo. Para eso, crea un nuevo archivo CSS, styles.css, vincúlalo desde el archivo header.phtml y comienza a agregar estas líneas de código en él:
/ ***************** Header Styles ************************ / ul li.dorpdown a img display: inline; padding-top: 3px; ul.usermenu li a img display: inline; padding-top: 3px; div.logo margen: 0; div.logoBox ancho: 100%; text-align: center; margen: 40px 0; div.logoBox .logo display: inline; float: none; div.logoBox .logo .large display: inline;
Esto solucionará el problema de relleno de los iconos y alineará el logotipo en el centro. Luego necesitamos personalizar el estilo de la barra de navegación y el cuadro de búsqueda. Como puedes ver, así es como debería verse nuestra barra de búsqueda:
Pero actualmente se ve así:
Para corregir el cuadro de búsqueda y la barra de navegación, agregaremos estas líneas de estilo en nuestro archivo CSS recién creado.
/ ***************** Estilos de la barra de menú ************************ / div.search margen: 2px 0; div.search # header-search display: block; posición: relativa; arriba: 0; derecha: 0; ancho: auto; altura: auto; padding: 0; .search-button: antes de background-image: none! important; #search_mini_form .search-button background: url (… /images/searchButton.jpg) center center no-repeat! important;. nav-primary li.level0 ul border: 1px solid # b39a64! important; .nav-primary li.level1 a border-bottom: 1px solid # b39a64! important; color: # 333; peso de la fuente: 300; línea de altura: 20px; font-size: 13px; relleno: 7px 12px; .nav-primary li.level1 a: hover color: # b39a64; .nav-primary li.level0> a font-size: 15px; color: # 888; text-transform: mayúsculas; .nav-primary li.level0> a: hover, .nav-primary li.level0> a: focus text-decoration: none; color de fondo: #eeeeee; / * font-weight: negrita; * / color: # 333; .nav-primary li.active> a background: none; color: # 000; .nav-primary li: last-child> a border-bottom: none! important;
Con suerte, cuando agregue estos estilos, su cuadro de búsqueda y barra de navegación se verán bien ahora:
Aunque el control deslizante de la página de inicio se ve bien, si observamos de cerca, hay una pequeña falla en esta diapositiva:
El texto está demasiado hacia la izquierda en nuestra página de inicio; Debe tener un aspecto como este:
Para colocar el texto en el lugar correcto, agregaremos estas líneas de código en nuestro archivo CSS:
/ ***************** Slider Styles ************************ / #sequence> .sequence -canvas li .secondSlideText left: 150px; #sequence> .sequence-canvas li .secondSlideImg float: right;
Luego viene nuestro último carrusel de productos. Todo se ve bien aquí, excepto el color del precio, que debe ser negro..
Para arreglar eso, agregaremos esta línea al archivo CSS..
/ ***************** Product Slider Styles ************************ / .item .products .price-box .price color: # 000;
Ahora el problema debería solucionarse y deberíamos tener un excelente carrusel de productos nuevos. Me gusta esto:
El pie de página también tiene algunos problemas de estilo, especialmente el cuadro de suscripción y la sección de enlaces.
Usaremos estos estilos para corregir estos problemas:
/ ***************** Footer Styles ************************ / .wrapper .footer borde superior: ninguno; padding-top: 0; .featured-products, .our-brand padding-top: 0! important; .copyright-info .newsletter input [type = text] width: 322px! important; margen izquierdo: 23px; altura: 33px! importante; tamaño de fuente: 12px; .footer .copyright-info .newsletter .button background-color: # b39a64; .footer .footer-info p img display: inline; .footer .footer-info .support li línea de altura: 28px; tamaño de fuente: 12px;
Ahora debería verse así:
Estas son todas las correcciones de estilo que necesitamos para que nuestra página de inicio se vea lo más cerca posible de los requisitos de diseño HTML. Si has seguido todos estos pasos, la página de inicio debería verse así:
Si ha seguido con éxito todos estos pasos, y su página de inicio se parece a la captura de pantalla anterior, entonces, felicitaciones, ha hecho un gran avance en la personalización de su primer tema de Magento..
Personalizar la primera página es la tarea más desalentadora para crear cualquier tema nuevo, ya que en el resto de las páginas se utilizará la mayoría de los componentes como encabezado, pie de página, barra de menú, etc., y solo cambiaremos el estilo de la sección de contenido. . Por lo tanto, es mucho más fácil cambiar otras páginas una vez que haya completado el estilo de la página de inicio.
Mientras diseñamos la página de inicio, hemos utilizado casi todas las técnicas que usaremos para personalizar el resto del tema. Todas estas técnicas, como usar Chrome Inspector, determinar el archivo phtml responsable del diseño de una parte particular de la página, modificar CSS, PHP, HTML y XML en archivos relevantes, crear nuevas páginas y bloques estáticos, y registrar esos bloques estáticos a través de XML , deberían ser lecciones muy valiosas para ti.
A continuación en nuestro tema, comenzaremos a modificar la página de listado de categorías. Como hemos completado las secciones de encabezado, pie de página y barra de navegación, solo necesitamos personalizar la sección de listado de productos y la sección de barra lateral. Personalizaremos ambos en dos artículos separados..
Antes de comenzar a realizar cambios en las páginas de categorías, le recomendamos encarecidamente que compruebe el código de la página de categorías de nuestro diseño HTML y que, al habilitar sugerencias de plantillas, compruebe qué archivos son responsables del diseño de la página de categorías en Magento. . Intente modificar esas plantillas de página de categoría por su cuenta, haciendo coincidirlas con la página HTML. No olvide copiar esos archivos primero en nuestro nuevo tema, y haga copias de seguridad, ya que no queremos meternos con los archivos de tema del tema real de RWD.
Te dejo con esta tarea por ahora. Una vez que esté listo, comience la edición real de las páginas de categorías siguiendo el siguiente tutorial.
Accentsconagua