¿Cuál es la mejor manera de personalizar el formato del texto del enlace?

Desarrollador
1

¿Cuál es la mejor manera de personalizar el formato del texto del enlace? Parece que editar el CSS no es la mejor opción, ya que los cambios se perderán cuando el plugin se actualice.

40
401738×632 42.5 KB

Me gustaría hacerlo en negrita y cambiar el color del texto para que coincida con el tema del sitio, lo que ayudará a que se integre mejor.

En este momento, el enlace se ve así:

03
03778×104 16.7 KB

Y me gustaría que se viera así:

39
39802×114 16.2 KB

Sería útil poder personalizar el texto según el tema también. Tengo un tema oscuro y un tema claro con diferentes colores de fuente para cada uno. Me gustaría establecer el color del texto para que coincida con el tema.

2

Necesitas crear un nuevo componente de tema con tus cambios y luego agregarlo en el mismo tema principal donde se encuentra Custom Header Links.

3

¡Gracias! Ya lo hice y funcionó perfectamente.

Por curiosidad, ¿cómo decide el sitio qué CSS utilizar? Si el componente del tema estándar contiene CSS que establecerá el color de la fuente en $header_primary -

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

¿entonces cómo sabe que debe usar el CSS de mi nuevo componente en su lugar?

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}
4

Hola @Johani: ¿sigue siendo así? Mi instancia parece reacia a adoptar el color $header_primary, y curiosamente, incluso cuando establezco $primary en el color que deseo (blanco), se mantiene obstinadamente negro :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

5

Probablemente esté relacionado con el cambio de SCSS a variables CSS para las declaraciones de color. Asignar $header_primary en CSS personalizado no funciona, pero si usas

.custom-header-links .headerLink a {
    color: var(--header_primary);
}

el color se detecta correctamente.

6

No logré que esta solución funcionara para mí. ¿Estás agregando esto al CSS personalizado del tema?

7

Sí, efectivamente. El componente ahora utiliza la propiedad personalizada de CSS; esto debería solucionar el problema para ti, @Daniel_R. Solo necesitas actualizar el componente.