How to add images to the community topic object

답변함

Kyle Hill

2016년 11월 04일 16:50

Hello. I would like to add svg images for each topic on 'Community' page. So it should look like something like this:

Is there any way to do it? Thanks in advance!

1 댓글

Sebastiaan Wijchers
- 2016년 11월 08일 10:50
- 편집된 시간
Community Moderator
Hello Kyle,

Do you mean the community section on your Help Center? If so, you could do the following:

Let's say we want to add an image to one of Zendesk's community topics on:

https://support.zendesk.com/hc/en-us/community/topics

So we want to hide the descriptions, posts and followers, by editing the CSS of your theme:
```
.topic-list li p,
.topic-list li .meta-group {
 display: none;
}
```
To make blocks with borders and space for the (background) image:
```
.topic-list li h3 a {
 display: block;
 height: 100px;
 padding: 5px 10px;
 border: 1px solid #30aabc;
 border-radius: 5px;
}
```
To add a background image to a specific topic:
```
.topic-list li h3 a[href*="200132056"] {
 background-image: url(https://support.zendesk.com/hc/theme_assets/1/200362408/support_horizontal_2.svg);
 background-repeat: no-repeat;
 background-position: left bottom; 
}
```
The selector is based on the ID in the href attribute, as there is nothing else to select on to my knowledge. This will result in:

Doesn't look fancy yet, but I hope that gets you started!

With kind regards,

Sebastiaan
0

댓글을 남기려면 로그인하세요.