Best way to customise the formatting of the link text?

Разработка
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

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;
  }
}
4

Привет, @Johani! Всё ещё так? Мой экземпляр почему-то не хочет принимать цвет $header_primary, и, что любопытно, даже когда я устанавливаю $primary в нужный мне цвет (белый), он упорно остаётся чёрным :upside_down_face:!

Screenshot 2021-02-06 at 14.16.12

5

Скорее всего, это связано с переходом от SCSS к CSS-переменным для объявления цветов. Присваивание $header_primary в пользовательском CSS не работает, но если вы используете

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

то цвет применяется корректно.

6

Это решение у меня не сработало. Вы добавляете это в пользовательский CSS темы?

7

Да, всё верно. Компонент теперь использует пользовательское свойство CSS, это должно решить вашу проблему, @Daniel_R. Вам просто нужно обновить компонент.