Zerif Lite: ¿Cómo cambiar el color de los círculos de las habilidades?

31 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 24 de enero de 2016

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.

Zerif Lite - Colores predeterminados

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:

Zerif Lite - Colores personalizados

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

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

31 Comentarios

  1. jossua

    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

    • Caribdis Diseño Web

      Hola, Jossua.

      La primera respuesta está aquí, y la segunda, aquí.

      Saludos.

  2. Miranda

    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!!!

    • Caribdis Diseño Web

      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.

  3. Diego

    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?

    • Caribdis Diseño Web

      Hola, Diego.

      Fijate en esta respuesta (solo el primer código).

      Saludos.

  4. Caribdis Diseño Web

    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.

  5. Pablo

    Hola! Muchas gracias por tus aportes.
    ¿Cómo hago para cambiar el color de la fuente del menú?
    Muchas gracias.
    Sds,

    • Caribdis Diseño Web

      Hola, Pablo.

      Fijate en esta respuesta.

      Saludos.

      • Pablo

        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.

        • Caribdis Diseño Web

          Hola, Pablo.

          Para el primer punto, fijate en esta respuesta.

          Y para el segundo, en esta y esta otra.

          Saludos.

          • Pablo

            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.

  6. Manu Gallardo

    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!

    • Caribdis Diseño Web

      Hola, Manu.

      La línea wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/zerif-child.js', array( 'jquery' ) ); pegala a continuación de 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' ) ); antes del cierre de la }.

      Saludos.

      • Lucian

        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

        • Caribdis Diseño Web

          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.

    • Manu Gallardo

      Funciona perfecto, muchisimas gracias!

  7. Alex

    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!

    • Caribdis Diseño Web

      Hola, Alex.

      Fijate en esta respuesta.

      Saludos.

      • Alex

        Efectivamente, allí estaba la solución. Muchas gracias de verdad! Saludos.

        Buena vibra para todos. DLB!

  8. Mauricio

    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.

    • Caribdis Diseño Web

      Hola, Mauricio.

      Fijate en esta respuesta.

      Saludos.

  9. Anthony

    Hola, Cómo hago para cambiar las letras plomas por blancas de esa sección a través de “simple css”

    • Caribdis Diseño Web

      Hola, Anthony.

      El código es:

      .skills .skill .section-legend {
          color: #ffffff;
      }
      

      Reemplazá #ffffff por el valor de color que necesites.

      Saludos.

  10. Jesús González

    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.

    • Caribdis Diseño Web

      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á #1990A4 por el valor de color que necesites.

      Saludos.

      • Jesús González

        Me ha funcionado, muchísimas gracias!
        He seguido probando y he conseguido también cambiar el fondo de otras secciones 🙂

  11. Mar Rguez

    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.

    • Caribdis Diseño Web

      Hola, Mar.

      Gracias por tu comentario.

      Fijate que es un error causado por el plugin Clef. Desactivalo y probá de nuevo.

      Saludos.

  12. Caribdis Diseño Web

    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 mail habilitada. 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.

  13. Noelia

    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.,

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!