Deskpro's Help Center can be personalized to reflect your brand using logos, colors, and images. For a more tailored appearance, you can edit the Help Center Templates and CSS. In this guide, we’ll show you how to customize the icons on your Help Center’s navigation buttons.
In this article, we'll show you how to customize the icons on your Help Center’s navigation buttons.
Have your new icons ready before you begin. The recommended format is SVG, but PNG or JPEG will also work.
Step 1: Access the Template Editor
1. Go to Admin > Help Center > Help Center Design.
2. Scroll to the bottom of the page and click Open Template Editor.
Step 2: Select the Template
Choose the template Portal > nav_buttons_big.html to edit the homepage navigation buttons.
Step 3: Replace the Icons
1. Within the template, locate the <img> elements inside the <figure> tags for each button. These tags define the current icons.
2. Highlight this in the template from src= to />
Use Ctrl/Cmd + F to quickly find and highlight the image source sections (src= to />) for the icons you wish to update:
Community:
src="{{ asset('img/page-icons/community.svg', 'help_center') }}" />Guides:
src="{{ asset('img/page-icons/guides.svg', 'help_center') }}" />Knowledge Base:
src="{{ asset('img/page-icons/knowledgebase.svg', 'help_center') }}" />News:
src="{{ asset('img/page-icons/news.svg', 'help_center') }}" />Files:
src="{{ asset('img/page-icons/download.svg', 'help_center') }}" />Contact Us:
src="{{ asset('img/page-icons/contact-us.svg', 'help_center') }}" />
Step 4: Upload and Link New Icons
1. Click the image icon in the top right-hand corner to upload your new icons. You can either select a file or drag and drop it into the window.
2. Once uploaded, hover over the image you want to use and click the link icon. This action will replace the existing image source with your new icon.
Step 5: Save your New Icons
1. Repeat the replacement process for each icon as needed.
2. Click Save in the bottom left-hand corner to apply your changes.
3. Go to your Help Center and refresh to view the updated icons.
These icons appear in multiple templates. To ensure a complete update, repeat the process for any additional templates where these icons are used.
Troubleshooting Tips
Icons Not Displaying Correctly: Verify the file paths and ensure your new icons are properly uploaded and linked.
Reverting Changes: If necessary, use the "Discard Changes" option to revert to the original template settings and start over.
Customizing your Deskpro Help Center icons is a straightforward process that aligns your Help Center with your brand identity. By following these steps, you can create a seamless and visually appealing user experience.
For further customization needs or support, please refer to our additional resources or get in touch.
