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 변수로 전환한 것과 관련이 있을 것입니다. 커스텀 CSS에서 $header_primary를 할당하면 작동하지 않지만, 다음을 사용하면

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

색상이 올바르게 적용됩니다.

6

저는 이 해결책이 작동하지 않았습니다. 테마의 사용자 정의 CSS에 이 내용을 추가하고 계신 건가요?

7

네, 맞습니다. 이제 해당 컴포넌트는 CSS 사용자 정의 속성(CSS custom property)을 사용하므로, @Daniel_R 님의 문제를 해결할 수 있을 것입니다. 컴포넌트를 업데이트해 주시면 됩니다.