Cómo cambiar el color de las viñetas en WordPress

El color de las viñetas puede ayudar a que su contenido se destaque mejor. También puede convertirlo en una monstruosidad si los colores chocan.

En algunos de los sitios web más grandes en línea, las listas son prominentes, pero rara vez son los círculos negros redondos genéricos que se muestran como estándar cuando inserta una lista con viñetas en WordPress.

Se deben realizar ediciones para diseñar sus viñetas para que se vean como le gustaría que se vean. Tampoco tienen que codificarse directamente desde WordPress.



Puede usar caracteres Unicode para insertar símbolos, reemplazar viñetas con imágenes o, si su estilo existente está bien, continúe y agregue un elemento de estilo de color para cambiar solo el color.

A continuación se describen los pasos a seguir, los códigos a usar y las instrucciones para editar la hoja de estilo de su tema de WP o el personalizador de CSS para hacer que sus viñetas tengan el color, la forma, el carácter o la imagen que desee.

 

Cómo cambiar el color de las viñetas en WordPress

El método más sencillo es editar el personalizador de temas con CSS. Alternativamente, WP Style.css se puede cambiar para cambiar el color de la viñeta. Las listas de viñetas están controladas por elementos 'li'. Estos pueden tener colores y los estilos se pueden cambiar o eliminar para reemplazarlos con imágenes o caracteres Unicode.

 

Cambiar los colores de las viñetas editando la hoja de estilo del tema (Style.css)

Para encontrar la hoja de estilo de su tema, desplácese por el menú de la barra lateral izquierda, coloque el cursor sobre el elemento del menú 'apariencia' y seleccione la opción 'editor de temas'.

 

Cómo localizar el archivo style.css de WordPress

El archivo style.css es la hoja de estilo para el tema de WordPress. Si está utilizando un tema de marco como Génesis o Divi, es probable que haya un tema secundario.

Realice sus ediciones en el tema secundario y no en un tema principal, que consta de toda la codificación en un marco.

 

Identifique el nombre de la clase para editar

En cada plantilla de WordPress, el nombre de clase utilizado para controlar el estilo de las viñetas es diferente. La mayoría usa la cadena .entry-content ul li CSS, otros nombran los elementos de su lista con marcadores.

Para encontrar el nombre de la clase, coloque el cursor sobre una lista de viñetas, haga clic con el botón derecho y seleccione inspeccionar. Se abrirá una nueva pantalla que muestra la codificación detrás del contenido.

El nombre que se muestra en el inspector es el elemento de la hoja de estilo que se editará para cambiar el color de la viñeta o el estilo general.

Necesitará el nombre del elemento div para actualizar la hoja de estilo o editar el personalizador de WP. La única diferencia con la edición es dónde pones el código.

 

Edite los elementos para darle estilo a sus viñetas de WordPress

En la gran mayoría de hojas de estilo para plantillas de WordPress, las viñetas se añaden en una sección específica para “elementos”.

Esto controla las fuentes, los estilos de los elementos de la lista, el color del texto, los estilos de las comillas y el tamaño, la fuente y el peso de los encabezados.

Las viñetas son elementos de lista y se insertan como 'listas ordenadas' abreviadas en los códigos como 'ol', y 'listas desordenadas', abreviadas como 'ul'. Las listas ordenadas usan números. Las listas desordenadas usan viñetas. Busque la sección que controla los estilos de 'ul'.

La línea exacta de código es 'ul, li', generalmente separada con un salto de línea, luego se agrega el estilo de las viñetas después del código 'li'.

Como ejemplo, usar el personalizador de temas para sobrescribir esas configuraciones hace que la lista de viñetas y sus elementos sean azules.

 

Para cambiar el color de las viñetas, agregue lo siguiente al personalizador de CSS

.entry-content ul li {
list-style: square;
color: #2E89FF;
}

* cambie los números a cualquier valor de color hexadecimal. Si no conoce el código hexadecimal, busque cualquier selector de color en línea.

 

Cambiar el color de la viñeta sin cambiar el color del texto

El código anterior cambiará el color de la viñeta y el texto colocado dentro de una lista de viñetas.

Si prefiere que eso no suceda, puede usar el personalizador de CSS para ignorar el estilo de su tema y reemplazarlo con su propio CSS personalizado.

Vaya a su menú de apariencia, seleccione personalizar, luego use el código a continuación:

ul {list-style: none}
li::before {content: "➣"; color: blue;
display: inline-block; width: 1em;
margin-left: -1em}

El CSS anterior utiliza un carácter Unicode para reemplazar la viñeta estándar. Y dado que está usando contenido 'antes', solo la viñeta cambia de color.

El texto sigue siendo el mismo color y fuente. Solo cambia el estilo de viñeta.

Para usar solo la viñeta estándar en un color diferente, en lugar de un carácter Unicode, copie y pegue una viñeta estándar (el círculo, el cuadrado o cualquier forma) en lugar del carácter Unicode.

li::before {content: "•"; color: blue;

 

Estilo de viñetas de WordPress a su preferencia

Se pueden cambiar numerosos elementos para hacer que sus viñetas tengan el estilo que desee.

Puede cambiar el relleno del margen para aumentar o disminuir la sangría, modificar la fuente, el grosor de la fuente y el estilo de la viñeta.

El estilo de lista para viñetas puede ser:

  • Circulo
  • Cuadrado
  • Desct
  • Decimal

Las listas numéricas se pueden cambiar con

  • Cero decimal inicial (01. elemento de lista 1, 02. elemento de lista 2, etc.)
  • Bajo romano (i. elemento de lista 1, ii., elemento de lista 2, etc.)
  • Romano superior (I. para el elemento de lista 1, II, para el elemento de lista 2, etc.)
  • Ninguno (más sobre esto más adelante)

Así es como se ven los cambios.

 

Cambiando las viñetas por imágenes

En los estilos enumerados anteriormente, es posible que se sorprenda al ver 'ninguno' como opción. ¿Por qué querría incluir una lista de viñetas solo para ocultar las viñetas?

Estarías bien aprendiendo sobre Cómo sangrar el texto en WordPress .

La opción sin estilo es cómo configurarla cuando desee mostrar una imagen de fondo en su lugar.

El tamaño de las imágenes que se usarán para las viñetas funciona mejor en 16 px por 16 px o 20 px por 20 px. Si es más grande, deberá aumentar el espacio entre líneas para que el texto se alinee correctamente.

Para usar una imagen como viñeta, cárguela primero en su biblioteca de medios de WordPress y luego copie la URL de la imagen.

En la captura de pantalla a continuación, el icono se ha redimensionado a 20 x 20.

El código a utilizar es

.entry-content ul li {
list-style-image:url(http:www.yoursite.com/wp-uploads/image-title.png);
}

Recuerde cambiar el tamaño de su imagen antes de cargarla. De lo contrario, deberá agregar más código CSS para reducir la imagen y no será de gran calidad.

 

Ignorar imágenes mediante el uso de caracteres Unicode

Los caracteres Unicode son como emojis. Hay miles de personajes y no todos son caritas sonrientes.

Hay opciones de corazones de amor que podrían usarse para hacer una lista con viñetas de sus alimentos bajos en carbohidratos favoritos o cruces para hacer listas con viñetas de cosas que no se deben hacer.

Para encontrarlos, busque en la web 'caracteres Unicode'. Hay sitios dedicados a mantener bibliotecas de ellos. Algunos son como directorios de nicho.

Para usarlos, no necesita codificación, ya que los caracteres se pueden copiar y pegar directamente en el personalizador de temas de WordPress.

El código debe dividirse en dos para que haya una sección 'antes' para que se muestren los caracteres de la imagen y algún espacio entre el carácter de la imagen y los caracteres del texto.

Comience ingresando el CSS para modificar la lista de viñetas:

.entry-content ul li {
list-style-type: none;
}

Luego agregue una nueva sección para agregar el carácter antes de los elementos de la lista.

.entry-content ul li:before {
content: "♥";
padding-right: 10px;
color: red;
}

El resultado debería verse así:

Dependiendo del tipo de carácter Unicode, algunos pueden cambiar de color. En el ejemplo anterior, el carácter del corazón era negro antes de que el color cambiara a rojo.

Sin embargo, dependerá del dispositivo que muestre los objetos. Algunos no reconocen Unicode de la misma manera y pueden mostrar el carácter en su formato de color original.

 

Preguntas frecuentes relacionadas con cómo cambiar el color de las viñetas en WordPress

 

¿Es mejor editar el tema o usar el personalizador de WP para diseñar viñetas?

Las actualizaciones de temas de WP pueden descartar las ediciones que realice en las plantillas de archivos. El personalizador de temas mantiene los cambios. Tenga en cuenta que solo se deben editar los temas secundarios. No es el tema principal. Después de cada actualización, será necesario actualizar la hoja de estilo para restaurar los cambios. Los cambios en el personalizador de WP se transfieren con las actualizaciones de WP.

 

¿Puede cambiar el color de los elementos de la lista de viñetas y tener un color de texto diferente?

Cuando establece el código de color para los elementos de la lista en CSS, se aplica a todos los elementos de la lista, por lo que solo se puede aplicar un color. Usando el tipo de estilo de lista: ninguno; elemento, se pueden agregar imágenes, entonces el color único se aplicaría al texto. Hacer esto le permite usar cualquier color de imagen y un color de fuente personalizado para los elementos de la lista.