Para cerrar un mes con mucho trabajo (de ahí las pocas entradas compartidas en el blog), reanudamos la serie de tutoriales dedicados al tema estrella de ThemeIsle, Zerif Lite. En esta oportunidad veremos cómo usar bordes cuadrados en lugar de los circulares predeterminados.
Ya que solo haremos modificaciones de estilo no es necesario crear un tema hijo. Bastará con añadir los códigos en el recuadro CSS adicional del Personalizador.
La sección Nuestro enfoque se ve así:
En la hoja de estilos del tema hijo, o en el recuadro CSS adicional dentro del Personalizador, tenemos que pegar el siguiente código:
.focus-box .service-icon {
border-radius: 0;
}
.focus-box .service-icon .pixeden {
border-radius: 0;
}El resultado:
Para que las fotos de la sección Nuestro equipo también se vean cuadradas, pegaremos el siguiente código:
.team-member .profile-pic {
border-radius: 0;
}
Se transformará en:
Y por último, para los avatares de los testimonios:
.feedback-box .client-image {
border-radius: 0;
}
Se verá así:
Tutorial original en inglés: How to change circle into square in Zerif
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
- 🔥 Ofertas de WordPress 🛒Black Friday y Cyber Monday 2023 - 21 de noviembre de 2023
- 🎃 Ofertas de WordPress Halloween 2023 - 30 de octubre de 2023
Hola Ana muchas gracias por toda tu ayuda, ha sido súper útil para poder modificar mi página con el tema Zerif, traté de cambiarle a mis páginas la línea roja que aparece en el título con el siguiente código
ul.nav > li.current > a:before, li.current > a:before,
ul.nav > li.current_page_item > a:before,
ul.nav > li.current-menu-item > a:before {
background: #000000; /* Cambia el color */
height: 0; /* Suprime la línea */
}
No obstante; no se realizó ningún cambio y las líneas siguen de color rojo, aparte de esto me podrías ayudar a cambiar el color rojo en la parte de Contacto donde dice enviar mensaje.
Mil gracias.
Hola, Dayanna.
Los códigos para las últimas versiones de Zerif están en esta respuesta.
Saludos.
Hola, ya logré colocar los bordes cuadrados, mi pregunta es si se la misma manera puedo cambiar el color de los bordes y la linea de los títulos de cada uno gracias
Hola, Paola.
Para cambiar el color, fijate en esta respuesta. Y los bordes de las líneas:
#focus span:nth-child(4n+1) .focus-box .red-border-bottom:before { background: #000; } #focus span:nth-child(4n+2) .focus-box .red-border-bottom:before { background: #000; } #focus span:nth-child(4n+3) .focus-box .red-border-bottom:before { background: #000; } #focus span:nth-child(4n+4) .focus-box .red-border-bottom:before { background: #000; }Saludos.
mil gracias, funciona muy bien 🙂 y por último, como cambio el color de linea que subraya los títulos de su equipo y características
Hola, Paola.
Fijate en esta respuesta.
Saludos.
gracias, tengo otra inquietud ya cambié el color de los bordes de los circulos pero cuando paso el puntero sobre estas aparece otro color como cambio ese color gracias
La respuesta aquí. 🙂
Ya pude! Gracias
Hola Caribdis, intenté aplicar el código que muestras para cambiar las líneas que subrayan los elementos del menú al scrollear (quiero ponerlas en azul en vez del rojo que trae por defecto, lo mismo para el color de las letras cuando se marcan en el menú), pero sin embargo no me ha funcionado. Agregué el código en el archivo custom.css del tema hijo, cómo podría resolverlo? (Actualmente quité el código para que todo quede como estaba).
Gracias.
Hola, Verónica.
Aparentemente, en la versión 1.8.5.10+ cambiaron algo del código. La clases serían:
ul.nav > li.current > a:before, ul.nav > li.current_page_item.current > a:before, .page ul.nav > li.current-menu-item > a:before, .archive ul.nav > li.current-menu-item > a:before { background: #000000; /* Cambia el color */ height: 0; /* Suprime la línea */ } .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li.current > a { color: #000; /* Cambia el color del enlace */ }Saludos.
Gracias! Sólo me falta que al pasar el mouse sobre los elementos del menú también se vean en el color personalizado y no en rojo, es posible hacerlo?
Los códigos serían los siguientes:
/* Cambiar el color del enlace */ .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li.current > a { color: #000; } /* Cambiar el color del enlace al pasar el puntero */ .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #1990a4; } /* Cambiar el color de la línea */ ul.nav > li.current > a:before, ul.nav > li.current_page_item.current > a:before, .page ul.nav > li.current-menu-item > a:before, .archive ul.nav > li.current-menu-item > a:before { background: #1990a4; }Saludos.
Ahora me queda bien al pasar el mouse pero al scrollear cuando va llegando a los anclajes sólo cambia la línea, el texto queda igual. Qué podrá estar faltando?
Hola Ana,
En primer lugar agradecerte y también felicitarte por todos tus aportes y consejos que nos brindas en este blog!, también el tiempo de contestar a nuestras dudas y preguntas.. muchas gracias!
En cuanto a mi problema, es que apliqué el código de arriba (en el CCS adicional) para que al colocar el cursor sobre el link cambie al color que definí (un naranja). Lo hace en los links del menu (Home/ Productos/ Porque…), pero en los submenus no (ejemplo Productos> Modelos/ Manuales de Uso/ Garantía), que debo agregar??
Desde ya muchas gracias!
Hola, Matías.
Gracias por tu comentario. 🙂
Tendrías que agregar el siguiente código:
.navbar-inverse .navbar-nav ul.sub-menu li a:hover, .navbar-inverse .navbar-nav ul.sub-menu li:hover a { color: #F5821F; }Saludos.
Mil Gracias!!! Funcionó perfecto!!
Como hago para que las imagenes se muestren más grandes?
Hola, Facundo.
Tendrías que agregar valores en píxeles de
width(ancho) yheight(alto) a las clases detalladas en este tutorial.Saludos.
Hola Ana. Tus tutoriales en verdad que me han facilitado en mucho el poder construir mi página. Los sigo a cada paso. solo que he tenido en el camino un problema que no he podido resolver y es que las imágenes que cambié a cuadradas en el área de testimonios en los formatos para dispositivos móviles no se ven, en el ordenador si, pero en el formato de móviles no. Para la versión que tengo de Zerif que lleva unas comillas rojas enormes quise quitárselas con el siguiente código:
.feedback-box .quote {
color: white
}
Pensé que tal vez había sido eso, así que lo borre y no pasó nada. También quise cambiar la letra del nombre del cliente que viene por default en el testimonio, así que instalé el plugin Easy Google Font, mismo que desinstale para ver si así se arreglaba el problema y no pasa nada. Espero me puedas ayudar a resolverlo, en verdad te lo agradecería mucho.
Saludos.
Hola, Christopher.
Gracias por tu comentario.
Las imágenes de los testimonios se ocultan en dispositivos móviles; lo podés comprobar en la demo.
Para mostrarlas, tendrías que usar el siguiente código:
.client-image.hidden-xs { display: block !important; }Muchas gracias Ana. En verdad que me has salvado la vida. Ahora si no es molestia quisiera preguntarte como podría cambiar las letras del menú principal a negritas y si es posible cambiar la linea roja que se pone debajo de cada titulo de las paginas a otro color o bien quitarlas.
Saludos.
Hola Ana en verdad que me has ayudado mucho, te agradezco enteramente. Ahora si no es molestia quisiera saber si es posible cambiar las letras del menú principal a negritas y cual seria el procedimiento. Asimismo me gustaría que me orientaras para poder cambiar el color de la linea roja que aparece debajo del titulo de cada pagina o bien quitarla.
Saludos.
Hola, Christopher.
El código sería el siguiente:
.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li.current > a { font-weight: bold; /* Enlaces en negrita */ } ul.nav > li.current > a:before, li.current > a:before, ul.nav > li.current_page_item > a:before, ul.nav > li.current-menu-item > a:before { background: #000000 !important; /* Cambia el color */ height: 0; /* Suprime la línea */ }Saludos.
Hola Ana, muchas gracias por tu pronta respuesta y tu paciencia. Te cuento que he aplicado los códigos, solo que los de las lineas ya sea para cambiar el color o suprimir la línea no generan ningún cambio, a que crees que se deba?
El código funciona, fijate si tenés los valores redeclarados en alguna otra parte de la hoja de estilos.
Acabo de actualizar el zerif lite, (yo tengo en funcionamiento un tema hijo, responsive boat) y en la sección nuestro enfoque, que tenía los cuadraditos divinos, se me acaban de desaparecer!!! Cómo los puedo restaurar?
Si entro en la parte de personalización, todo sigue igual, solo que ahora no los muestra. Quizás el código que pones arriba funcione, pero no me queda claro en que parte del style.css lo tendría que poner…
Gracias por la ayuda!!!
No entiendo… si entro desde el cel o desde chrome sin iniciar sesión en wordpress, me los muestra bien… será un problema que solo se muestra en la edición?
Hola, Serena.
La verdad, no sabría decirte bien; la actualización del tema padre no debería modificar nada del tema hijo, pero es probable que si hubo algún cambio de código, y el navegador tiene guardado un código viejo en caché, se presente alguna inconsistencia. Fijate limpiando caché y cookies del navegador y volviendo a iniciar sesión.
Saludos.
perfecto!! funcionó! gracias!!
buenas tardes,, sabes como puedo borrar las lineas que aparecen en la seccion de caracteristicas y equipo…o hacerlas al tamaño del texto.
Estoy usando el Zerius, como hijo del Zerif, claro. El caso es que no me funcionan los efectos al pasar el ratón por los círculos de “Nuestro enfoque”. Si vuelvo a poner como tema el Zerif sí que funciona. ¿No sabrías cómo arrglarlo?
Muchas gracias de antemano.
Hola, Juan.
Zerius tiene desactivados esos efectos. Para activarlos, abrí el archivo
style.css, y eliminá la declaración!importantde la siguiente línea:.focus-box .service-icon { border: 10px solid #cecece !important; }Espero que te sirva.
Saludos.
Funcionó perfecto. ¡Eres un sol!
Un saludo
muchas gracias por el aporte me quedaron muy padres