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

El color de los puntos principales puede ayudar a que su contenido se destaque mejor. También puede ser deslumbrante si los colores chocan.

Las listas se destacan en algunos de los sitios en línea más grandes, pero rara vez aparecen los habituales círculos negros redondos que aparecen como estándar al insertar listas de caracteres principales en WordPress.

Es necesario editar para diseñar las viñetas para que se vean como usted desea. Tampoco necesitan ser encriptados directamente por WordPress.

Puede usar caracteres Unicode para insertar caracteres, reemplazar puntos iniciales con imágenes o, si sus estilos existentes son buenos, continúe y agregue elementos de estilo de color para cambiar solo los colores.

A continuación, se encuentran los pasos que debe seguir, el código que debe usar y las instrucciones para editar su tema WP con estilos o la herramienta de personalización 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

La forma más fácil es editar la herramienta de personalización del tema con CSS. Alternativamente, WP Style.css se puede modificar para cambiar color de punto Las listas de caracteres principales están controladas por el elemento "li". Se pueden colorear y los estilos se pueden cambiar o eliminar para reemplazarlos con imágenes o caracteres Unicode.

Cambie el color de los caracteres principales editando la hoja de estilo del tema (Style.css)

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

Cómo encontrar el archivo style.css de WordPress

El archivo style.css es la hoja de estilo para el tema de WordPress. Si usa un tema de marco como Genesis o Divi, es posible que tenga temas secundarios.

Las ediciones se realizan en el tema secundario en lugar del tema principal, que consta de toda la codificación en el marco.

Especifique el nombre de la clase de edición.

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

Para encontrar el nombre de la clase, mantenga el cursor del mouse sobre la lista de caracteres principales, haga clic con el botón derecho y seleccione Verificar. 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 desea 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. Edición La única diferencia es dónde pones tu código.

Editar elementos de estilo para los buques insignia de WordPress

En la mayoría de las hojas de estilo en las plantillas de WordPress, se agregan viñetas a la sección "elementos".

Controla la fuente, el estilo del elemento de la lista, el color del texto, el estilo de las comillas en bloque y el tamaño del título, la fuente y el peso.

Las viñetas son elementos de lista que se insertan en el código como "listas ordenadas", abreviadas como "ol", y "listas desordenadas", abreviadas como "ul". Las listas ordenadas usan números. Las listas desordenadas utilizan caracteres principales. Busque la sección que controla el estilo "ul".

La línea exacta de código es "ul, li", generalmente separada por una nueva línea y luego estilizada para agregar una viñeta después del código "li".

Por ejemplo, reemplazar esta configuración con la herramienta de personalización de temas hace que una lista de caracteres principales y sus elementos se vuelvan 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;
}

* Cambiar el número 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 los caracteres principales y el texto colocado en la lista de caracteres principales.

Si no desea que esto suceda, puede usar el Personalizador de CSS para ignorar los estilos de su tema y reemplazarlos con su propio CSS personalizado.

Vaya al menú Apariencia, seleccione Personalizar y use el siguiente código:

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

El CSS anterior usa caracteres Unicode para reemplazar las viñetas estándar. Y debido a que usa contenido "antes", solo las viñetas cambiarán de color.

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

Para usar solo caracteres iniciales estándar en diferentes colores en lugar de caracteres Unicode, copie y pegue los caracteres iniciales estándar (círculos, cuadrados o cualquier forma) en lugar de los caracteres Unicode.

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

Diseña viñetas de WordPress a tu gusto

Muchos elementos se pueden modificar para que sus viñetas tengan el estilo que desee.

Puede cambiar el relleno para aumentar o disminuir la sangría, cambiar la fuente, el peso de la fuente y el estilo de los caracteres principales.

Los estilos de lista de caracteres pueden ser:

• circulo
• cuadrado
• CD
• decimal

Se puede utilizar una lista de números.

• Ceros decimales a la izquierda (01. lista 1, 02. lista 2, etc.)
• Bajo romano (es decir, lista 1, ii., elemento de lista 2, etc.)
• Romano superior (I. para el punto 1, II, para el punto 2 de la lista, etc.)
• Ninguno (más sobre esto más adelante)

Así es como se ve el cambio.

Tiene como objetivo intercambiar imágenes.

De los estilos enumerados anteriormente, es posible que se sorprenda al ver "Ninguno" como opción. ¿Por qué incluir una lista de personajes principales solo para ocultar las viñetas?

también aprenderás Cómo sangrar el texto en WordPress.

La opción sin estilo es lo que debe configurar cuando desea mostrar la imagen de fondo.

Los tamaños de imagen de viñeta funcionan mejor cuando son 16 px por 16 px o 20 px por 20 px. Más grande, deberá aumentar la distancia entre las líneas para alinear el texto correctamente.

Para usar una imagen como viñeta, primero cárguela 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 utilizado es

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

Asegúrese de cambiar el tamaño de la imagen antes de cargarla. De lo contrario, tendrá que agregar más código CSS para reducir la imagen y la calidad de la imagen no será excelente.

Ignorar imágenes con caracteres Unicode

Los caracteres Unicode son como emojis. Hay miles de personajes, pero no todos son caras sonrientes.

Hay opciones de Corazones para hacer una lista de personajes principales con tus alimentos bajos en carbohidratos favoritos o una lista de personajes principales que no debes hacer.

Para encontrarlos, busque en la web "caracteres Unicode". Hay algunos sitios web que admiten sus bibliotecas exclusivamente. Algunos son como directorios de nicho.

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

El código debe dividirse en dos partes para mostrar la parte "antes" del glifo y cierta distancia entre el glifo y el símbolo de texto.

Primero ingrese CSS para cambiar la lista de caracteres principales:

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

Luego agregue una nueva pestaña para agregar caracteres antes del elemento de la lista.

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

El resultado debería verse así:

Según el tipo de símbolo Unicode, algunos pueden cambiar de color. En el ejemplo anterior, el símbolo del corazón es negro mientras que el color cambia a rojo.

Sin embargo, esto depende del dispositivo en el que se muestra el objeto. Algunas personas no reconocen el mismo Unicode y pueden mostrar caracteres en su formato de color original.

Preguntas frecuentes sobre cómo cambiar el color de Bullet Point en WordPress

¿Es mejor editar el tema o usar WP Customizer para darle estilo a la esencia?

Las actualizaciones de los temas de WP pueden rechazar las ediciones que realice en las plantillas de archivos. El personalizador de temas admite cambios. Recuerde que solo es necesario editar los subtemas. No es el tema principal. Después de cada actualización, la hoja de estilo debe actualizarse para deshacer los cambios. Los cambios en WP Customizer vendrán con actualizaciones de WP.

¿Puede cambiar el color de un elemento de carácter principal y utilizar un color de texto diferente?

Cuando codificas con color un elemento en un CSS, se aplica a todos los elementos de la lista, por lo que solo se puede aplicar un color. Uso del tipo de estilo de lista: elemento Ninguno; se puede agregar una imagen y luego se aplicará un color al texto. Esto le permite usar cualquier imagen en color y color de fuente personalizado para los elementos de la lista.