En este, el noveno tutorial sobre el tema gratuito Zerif Lite, aprenderemos cómo cambiar el color de los círculos de las “habilidades”. Este componente se ha hecho muy popular en las secciones que presentan los servicios o los conocimientos de los miembros de una empresa, y por lo general incluyen un número o porcentaje, una barra de progreso (en ocasiones animada), junto con un título y una descripción breve para enumerar los puntos principales que se intentan destacar.
Zerif Lite incluye esta opción en el panel Quiénes somos, desde el cual se pueden añadir hasta cuatro características o habilidades, que se muestran del lado derecho de la sección. Las opciones de estilo están limitadas a los colores predeterminados del tema, pero con un par de modificaciones en el código podemos asignarle los colores de nuestra preferencia.
El primer paso es crear un tema hijo, para que los cambios no se pierdan al actualizar el tema. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
Luego, en la carpeta del tema hijo, deberá crear una carpeta llamada /js/. En esa carpeta deberá crear un archivo que va a contener el código JavaScript necesario. Podemos llamar este archivo zerif-child.js. Abrimos este archivo con un editor de texto y pegamos el siguiente código:
jQuery(function() {
jQuery(".skill1").knob({
'max':100,
'width': 64,
'readOnly':true,
'inputColor':' #FFFFFF ',
'bgColor':' #222222 ',
'fgColor':' #e96656 '
});
jQuery(".skill2").knob({
'max':100,
'width': 64,
'readOnly':true,
'inputColor':' #FFFFFF ',
'bgColor':' #222222 ',
'fgColor':' #34d293 '
});
jQuery(".skill3").knob({
'max': 100,
'width': 64,
'readOnly': true,
'inputColor':' #FFFFFF ',
'bgColor':' #222222 ',
'fgColor':' #3ab0e2 '
});
jQuery(".skill4").knob({
'max': 100,
'width': 64,
'readOnly': true,
'inputColor':' #FFFFFF ',
'bgColor':' #222222 ',
'fgColor':' #E7AC44 '
});
});Los valores fgColor son los predeterminados. Lo que deberá hacer aquí es editar los códigos hexadecimales con los correspondientes a los colores que desee. También puede cambiar el color de fondo del círculo (la porción que no está cubierta por el porcentaje seleccionado), reemplazando el valor de bgColor.
Por último, tendremos que darle al navegador la orden de que cargue el archivo personalizado zerif-child.js, y esto lo haremos desde el archivo functions.php. Allí, a continuación de la línea wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ) ); pegaremos wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) );:
Con lo cual el código completo de nuestro archivo functions.php quedará de la siguiente manera:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 99);
function child_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/custom.css', array( $parent_style ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) );
}
if ( get_stylesheet() !== get_template() ) {
add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
update_option( 'theme_mods_' . get_template(), $value );
return $old_value; // prevent update to child theme mods
}, 10, 2 );
add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
return get_option( 'theme_mods_' . get_template(), $default );
} );
}
}
?>Veamos un ejemplo gráfico:
Aquí reemplazamos los colores predeterminados por un naranja, un azul verdoso, un fucsia y un verde oscuro, y también aclaramos el fondo a un gris. El código sería el siguiente:
jQuery(function() {
jQuery(".skill1").knob({
'max':100,
'width': 64,
'readOnly':true,
'inputColor':' #FFFFFF ',
'bgColor':' #666666 ',
'fgColor':' #ff7200 '
});
jQuery(".skill2").knob({
'max':100,
'width': 64,
'readOnly':true,
'inputColor':' #FFFFFF ',
'bgColor':' #666666 ',
'fgColor':' #1990A4 '
});
jQuery(".skill3").knob({
'max': 100,
'width': 64,
'readOnly': true,
'inputColor':' #FFFFFF ',
'bgColor':' #666666 ',
'fgColor':' #ee1a56 '
});
jQuery(".skill4").knob({
'max': 100,
'width': 64,
'readOnly': true,
'inputColor':' #FFFFFF ',
'bgColor':' #666666 ',
'fgColor':' #438458 '
});
});También podemos experimentar con el color del número y el ancho del círculo, si modificamos los valores de los atributos inputColor y width respectivamente. Para el siguiente ejemplo, reemplazamos los valores del color por los mismos de la barra, y los valores del ancho por 90:
Tutorial original en inglés: How to change skill circles’ color 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.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
hola seria que me pueden dar una mano quiero cambiar los color del over en los menus y el color del icono de menu para moviles
Hola, Jossua.
La primera respuesta está aquí, y la segunda, aquí.
Saludos.
Hola!!
Te quisiera pedir tu ayuda ya que no puedo cambiar el color al pasar el mouse sobre el título del formulario, sin tocarlo está en blanco pero al pasar el mouse cambia a naranja. Es posible?
Mil gracias!!!
Hola, Miranda.
No me queda claro a qué título te referís. Si es el de la sección Contáctenos, no es un enlace, así que no debería cambiar de color al pasar el mouse. Si eso sucede, puede ser que lo veas así como usuario conectado si no has hecho modificaciones y guardado los cambios desde el personalizador.
Saludos.
Excelente tutorial, gracias, pregunta: quiero que aparezcan los circulos con los colores predeterminados y llenos (o sea como si fuera 100%) pero que no indique el porcentaje, se puede hacer?
Hola, Diego.
Fijate en esta respuesta (solo el primer código).
Saludos.
Hola, Pablo.
Tendrías que agregar los siguientes códigos:
/* Botón de llamado a la acción */ .purchase-now .red-btn { background: #000; } /* Botón de llamado a la acción al posar el puntero */ .purchase-now .red-btn:hover { background: #f00; } /* Botón de formulario */ button.pirate-forms-submit-button { background: #000; box-shadow: 1px 1px 5px #000; /* Sombra */ } /* Botón de formulario al posar el puntero */ button.pirate-forms-submit-button:hover { background: #000 !important; }Cambiá los valores de color por los que necesites.
Saludos.
Hola! Muchas gracias por tus aportes.
¿Cómo hago para cambiar el color de la fuente del menú?
Muchas gracias.
Sds,
Hola, Pablo.
Fijate en esta respuesta.
Saludos.
Muchas gracias por tu pronta respuesta.
1- ¿Como cambiar el color de la flecha roja que aparece en el menú y el color sombreado en rojo que aparece cuando clickeo encima del menú?
2- Cómo cambiar el color de fondo de las secciones (vi como hacelo con el formulario de contacto) inclusive la sección de widgets y el pie de página.
Muchas gracias.
cordiales saludos.
Hola, Pablo.
Para el primer punto, fijate en esta respuesta.
Y para el segundo, en esta y esta otra.
Saludos.
Gracias por tu respuesta.
1-¿Cómo hago para cambiar el color y si es posible que quede sombreado el botón de enviar msje del formulario de contacto?
2 – ¿ Cómo cambiar el color del botón de la derecha de la sección Llamada a la acción?
Muchas gracias.
Sds cordiales.
Hola, estoy teniendo algunos problemas con este paso, a la hora de darle al navegador la orden de que cargue el archivo personalizado. Mi archivo functions.php no es como tu muestras, he intentado copiar la solucion que tu propones “tal cual” pero entonces la página no se abre.
Te escribo mi codico de functions.php para que te hagas una idea:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED – Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'zerif_bootstrap_style','zerif_fontawesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
if ( !function_exists( 'child_theme_configurator_css' ) ):
function child_theme_configurator_css() {
wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','zerif_style','zerif_responsive_style' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );
// END ENQUEUE PARENT ACTION
Muchas gracias por tu tiempo!
Hola, Manu.
La línea
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) );pegala a continuación dewp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','zerif_style','zerif_responsive_style' ) );antes del cierre de la}.Saludos.
Hola Ana como estas? quisiera saber donde puedo corregir esto que anda mal con estas metas en que parte de wordpress o la plantilla creo que muchos nos gustaria saberlo, Ayudame porfavor:
meta description was not found. Example:
og:title was not found. Example:
og:description was not found. Example:
og:image was not found. Example:
favicon was not found. Example:
Saludos cordiales un seguidor de cada paso tuyo
Lucian
Hola, Lucian.
Cuando hayas activado el plugin de SEO tenés que completar los títulos y descripciones meta y asignar una imagen destacada. El plugin va a generar esas etiquetas automáticamente. En cuanto al favicon, podés asignarlo desde el personalizador > Identidad del sitio > Icono del sitio.
Saludos.
Funciona perfecto, muchisimas gracias!
Hola. Gracias por sus aportaciones, me han servido de mucho.
Disculpa, aprovechando el mensaje, me gustaría cambiar el fondo gris de esa sección donde están las habilidades, crees que se pueda?
De antemano muchísimas gracias por la ayuda. Saludos!
Hola, Alex.
Fijate en esta respuesta.
Saludos.
Efectivamente, allí estaba la solución. Muchas gracias de verdad! Saludos.
Buena vibra para todos. DLB!
Hola, en primer lugar queria agradecerte por los tutoriales, me sirvieron muchisimo. Mi consulta es si se pueden cambiar los colores de los circulos en la seccion “nuestro enfoque” ya que le quiero dar un color acorde a mi sitio. Muchas gracias.
Hola, Mauricio.
Fijate en esta respuesta.
Saludos.
Hola, Cómo hago para cambiar las letras plomas por blancas de esa sección a través de “simple css”
Hola, Anthony.
El código es:
.skills .skill .section-legend { color: #ffffff; }Reemplazá
#ffffffpor el valor de color que necesites.Saludos.
Hola,
He estado leyendo esta web para aprender un poco, pues acabo de crear un blog con este tema y la verdad que me ha sido de gran ayuda y he conseguido personalizar algunas cosas a pesar de mis nulos conocimientos de programación.
Ante todo quiero agradecer la información aportada y me gustaría que me pudieras echar una mano para cambiar los colores del tema.
Principalmente querría cambiar el blanco de la cabecera de la web, es decir de la barra superior donde se encuentra el menú y el logo del sitio. Siguiendo tus consejos para el asunto de la opacidad he descargado Simple CSS ¿a través de ese plugin podría también cambiar ese color blanco por verde? ¿Cómo sería en tal caso?
Muchísimas gracias de antemano, espero haberme explicado bien.
Hola, Jesús.
Gracias por tu comentario.
En efecto, el plugin Simple CSS te sirve, y el código que tendrías que usar es:
.navbar { background: #1990A4; }Reemplazá
#1990A4por el valor de color que necesites.Saludos.
Me ha funcionado, muchísimas gracias!
He seguido probando y he conseguido también cambiar el fondo de otras secciones 🙂
Hola,
Muchas gracias por el esfuerzo de ayudar a los que estamos empezando.
He seguido tus indicaciones creando un tema hijo, pero seguro que hay algo que no realizo bien pues me da el siguiente error:
Cannot modify header information – headers already sent by (output started at ../wp-content/themes/zerif-child/functions.php:1) in ../wp-content/plugins/wpclef/includes/lib/wp-session/class-wp-session.php on line 130
Gracias de antemano por toda tu ayuda.
Hola, Mar.
Gracias por tu comentario.
Fijate que es un error causado por el plugin Clef. Desactivalo y probá de nuevo.
Saludos.
Hola, Noelia.
Gracias por comentar. Zerif Lite no es mío, es de ThemeIsle, yo solo publico aquí los tutoriales traducidos al español. 🙂
En primer lugar, para que el formulario envíe los mensajes de manera predeterminada, tu servidor tiene que tener la función de PHP
mailhabilitada. Si esto no fuera así, tendrás que configurar el envío mediante SMTP. En los ajustes del plugin Pirate Forms vas a la pestaña SMTP, marcás ¿Usar SMTP para enviar los mensajes? y completás todos los campos con los datos que correspondan a tu servidor.Saludos.
Buenas tardes,
he instalado vuestro tema en wordpress, pero tengo problemas con el formulario de contacto. Una vez rellanas los datos dice que se ha enviado correctamente pero no llega ningún mail al mail que he indicado en la configuración.,