---
title: "Zerif Lite: ¿Cómo cambiar el color de los círculos de las habilidades?"
url: https://caribdis.net/2016/01/24/zerif-lite-como-cambiar-el-color-de-los-circulos-de-las-habilidades/
date: 2016-01-24
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 511
---

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

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](//caribdis.net/wp-content/uploads/2016/01/Zerif-skills-predeterminado-1024x473.png)](https://caribdis.net/wp-content/uploads/2016/01/Zerif-skills-predeterminado.png)

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](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

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](//caribdis.net/wp-content/uploads/2016/01/Zerif-skills-personalizado-1024x473.png)](https://caribdis.net/wp-content/uploads/2016/01/Zerif-skills-personalizado.png)

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`:

[![](//caribdis.net/wp-content/uploads/2016/01/Zerif-skills-predeterminado2-1024x473.png)](https://caribdis.net/wp-content/uploads/2016/01/Zerif-skills-predeterminado2.png)

**Tutorial original en inglés: [How to change skill circles' color in Zerif](http://docs.themeisle.com/article/67-zerif-changing-skill-circles-color)**