Recherches récentes
Pas de recherche récente
Customising Article sidenav and Sections Page
Avec réponse
Publication le 14 août 2024
Hello,
I am using the Copenhagen theme v3.3.0 for our help centre. I need help highlighting and making the current article or section on the sidenav bold.
I also want to arrange sections under categories more cleanly. I want to achieve something like in the below screenshot of Udemy's help centre. I tried inspecting element and replicating their code but no success.
Thank you.
0
2
2 commentaire
Brock Mullins
Hey Luca!
One possible way is to roll up the sleeves and get into the CSS of the Theme.
How to get to the code editor, you'll be looking for "style.css": https://support.zendesk.com/hc/en-us/articles/4408832558874-Editing-the-code-for-your-live-help-center-theme
Here's the link to some premade CSS recipes from ZD: https://support.zendesk.com/hc/en-us/articles/4408842914714-Help-center-CSS-cookbook
This is some code that I wrote that somewhat helps your ask:
/***** Custom *****/
.article-sidebar a {
font-weight: normal; /* Reset all links to normal */
}
.article-sidebar a.current, /* For links with a class of 'current' */
.article-sidebar a.active, /* For links with a class of 'active' */
.article-sidebar a[aria-current="page"] /* For links with aria-current set to 'page' */ {
font-weight: bold; /* Make the active link bold */
}
At the code level “.article-sidebar” is what we're trying to modify with CSS and that's what is happening above. You'll have to play around with active/current to only highlight the selected article I'm pretty sure. For the category/section organization, that'll be more HTML/CSS too.
These are the results I got when testing on the fly, hope this helps
0
Brock Mullins
Hey Luca!
One possible way is to roll up the sleeves and get into the CSS of the Theme.
How to get to the code editor, you'll be looking for "style.css": https://support.zendesk.com/hc/en-us/articles/4408832558874-Editing-the-code-for-your-live-help-center-theme
Here's the link to some premade CSS recipes from ZD: https://support.zendesk.com/hc/en-us/articles/4408842914714-Help-center-CSS-cookbook
This is some code that I wrote that somewhat helps your ask:
/***** Custom *****/
.article-sidebar a {
font-weight: normal; /* Reset all links to normal */
}
.article-sidebar a.current, /* For links with a class of 'current' */
.article-sidebar a.active, /* For links with a class of 'active' */
.article-sidebar a[aria-current="page"] /* For links with aria-current set to 'page' */ {
font-weight: bold; /* Make the active link bold */
}
At the code level “.article-sidebar” is what we're trying to modify with CSS. You'll have to play around with active/current to only highlight the selected article I'm pretty sure. For the category/section organization, that'll be more HTML/CSS too. Best of luck!
0