Best way to customise the formatting of the link text?

dev
1

What’s the best way to customise the formatting of the link text? It looks like editing the CSS isn’t the best approach because the changes will be lost when the plugin’s updated.

40
401738×632 42.5 KB

I’d like to make it bold & change the text colour to match the site’s theme which will help it blend in.

At the moment the link looks like this -

03
03778×104 16.7 KB

& I’d like it to look like this -

39
39802×114 16.2 KB

It’d be useful to be able to customise the text depending on the theme too. I have a dark theme & a light theme with different colour fonts for each. I’d like to set the colour of the text to match the theme.

2

You need to create a new theme component with your changes and then add it in the same main themes where is the Custom Header Links

8 Likes
3

Thanks! I’ve done that now & it worked like a charm.

Out of interest, how does the site choose which CSS to use? If the standard theme component contains CSS that will set the font colour to $header_primary -

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

then how does it know to use the CSS from my new component instead?

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

Hi @Johani - is this still the case? My instance seems reluctant to adopt the $header_primary colour, and curiously even when I set $primary to the colour I want (white), it remains stubbornly black :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

3 Likes
5

It’s probably related to the switch from SCSS to CSS variables for color declarations. Assigning $header_primary in custom css doesn’t work, but if you use

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

the color gets picked up correctly.

4 Likes
6

I didn’t get this solution to work for me. Are you adding this to the theme’s custom CSS?

1 Like
7

Yes, it was indeed. The component now uses the CSS custom property, it should fix the issue for you @Daniel_R, you just need to update the component.

4 Likes