Cambia el Color del Selector de Texto
Para hacer esto, lo primero que debes hacer es seleccionar los dos colores que vas a utilizar en el selector de texto.
- El primero será el color del sombreado
- El segundo el color del texto cuando se encuentre sombreado.
Para obtener los códigos hexadecimales, puedes instalar en tu navegador una extensión como ColorZilla o también puedes utilizar plataformas como Colors para ponerte un poco creativo.
Una vez que hayas instalado esta extensión, entra a tu sitio web y utiliza ColorZilla para identificar el código del color que necesites. En este ejemplo el color principal es un matiz de verde claro que tiene el código hexadecimal #80B918.
Lo siguiente que haremos es elegir el color del texto que vamos a utilizar. En este caso te recomendamos que sea un color opuesto dado que los colores similares dificultan la lectura de los usuarios. Para nuestra página de ejemplo usaremos el color blanco que tiene como código hexadecimal #FFFFFF.
Una vez determinados los colores debemos ingresar al escritorio de WordPress, ir a la pestaña de Apariencia > Personalizar y buscamos la opción de CSS Adicional.
Aquí debemos escribir el código CSS que vamos a usar para personalizar el selector de texto de nuestro sitio web, el código es el siguiente:
::-moz-selection {
background-color: #80B918;
color: #fff;
}
::selection {
background-color: #80B918;
color: #fff;
}A continuación, te explicamos qué significa cada una de estas reglas para que puedas comprender mejor el código y utilizarlo apropiadamente:
::-moz-selection: Es el selector del pseudo-elemento que aplica reglas a una porción de un documento que ha sido destacado, este código solo sirve para Mozilla Firefox.
::selection: Hace lo mismo que el anterior, pero en navegadores como Chrome, Opera y Safari.
Background-color: Es el encargado del color del sombreado.
Color: Es el encargado del color del texto.
Ten en cuenta que se deben usar las dos reglas de CSS para aplicar la personalización en todos los navegadores; caso contrario, el cambio solo se verá reflejado en algunos de ellos.
Una vez que escribas el código CSS en el campo y publiques la página, ya podrías ver los cambios reflejados en tu sitio web.
¿Hay otra forma de hacerlo?
Otra forma de hacerlo es ingresar al escritorio de WordPress y en la barra lateral seleccionar la opción Apariencia > Editor de temas, allí buscamos la hoja de estilo principal Style.css, agregamos el código anterior y finalizamos dando clic en actualizar archivo.
Este método solo lo recomendamos si estás utilizando un tema hijo, dado que si lo haces en el tema principal, perderás los cambios cuando descargues una actualización del tema.
Si quieres aprender sobre los beneficios de usar temas hijos, te invitamos a que leas cómo Instalar un tema hijo en WordPress.
¿Qué hacer si no funciona?
Este es un problema muy común y a la vez muy simple de resolver. En la mayoría de casos, si no funciona se debe a problemas de caché.
La solución es borrar el caché de tu navegador, lo cual puedes hacer apretando Ctrl + F5.
Si luego de borrar el cache de tu navegador el problema todavía persiste, entonces realiza los siguiente: Borra el cache de tus plugins (como por ejemplo WP Rocket) y luego borra el caché a nivel del servidor. Después de haber borrado todo el caché en tu navegador y en tu servidor, podrás ver los cambios reflejados en tu sitio web.
