When you set up your HelpDocs you'll get your primary color as the background for your header. You might want to change this to a photo background to match your brand and the style of your main website.
Adding an Image to the Header Background
- Have the URL of the image you want to use ready
- In HelpDocs, check the template you're using by going to Settings > Customize > Design and looking at the selected option under Template in the Brand section
- Head to the Code tab > CSS
- Paste the snippet for your template from below, swapping
IMAGE_URLfor the URL of your image - Hit Publish, then confirm with Publish (you'll see Save instead if your plan doesn't include drafts)
π Darken your image before uploading it to make sure the text above is still readable for your users.
If you know your CSS, you could use the
If you know your CSS, you could use the
filter: brightness(50%); property to adjust it in the browser, although this isn't supported in earlier versions of browsers.π Don't slow down your knowledge base
If your image is too large you might run into issues with your knowledge base taking a long time to load. Reduce the size of your image (less than 1500px by 500px) and use a tool like PNG Compressor to reduce it even more.
If your image is too large you might run into issues with your knowledge base taking a long time to load. Reduce the size of your image (less than 1500px by 500px) and use a tool like PNG Compressor to reduce it even more.
V5
#search-container {
background-image: url('IMAGE_URL');
}V4
Bars
#homeBanner {
background-image: url('IMAGE_URL');
}V3
Curve
#main[data-hd-template="curvev3"] #header .bg-faded {
background-image: url('IMAGE_URL');
}Boxed Instant
#main[data-hd-template="boxedinstantv3"] #header {
background-image: url('IMAGE_URL');
}eCommerce
#main[data-hd-template="ecommercev3"] #header {
background-image: url('IMAGE_URL');
}Bars
#main[data-hd-template="barsv3"] #header {
background-image: url('IMAGE_URL');
}