How to Customize the Table of Contents Icons
ProProfs allows you to change the look and feel of your sites through built-in themes. These themes affect the color scheme of your site.
In cases where your brand's color scheme does not match any of our themes, you can add your CSS codes to style your site. This guide focuses on customizing the Table of Contents(TOC) icons.
Note: Basic knowledge of CSS is required to override the default icons.
Here's what the customized TOC will look like in ProProfs Knowledge Base.
By customizing the TOC icons, you can:
- Enhance the visual appeal of your help center to make it more engaging & intuitive for users.
- Match the look & feel of your website to maintain consistency.
In this article, you'll learn:
3. Hosting Icons and Image Paths
4. Icon Size
7. Changing the Background Color for a Selected or Hovered Page or Folder
1. Where to Put the CSS
To add your CSS codes for customizing the TOC icons:
1. Go to Settings > Choose your site from the drop-down menu
2. Click Branding
3. Scroll to the bottom and click Advance.
4. Place your code in the Site CSS box.
5. Click Save
Note: If you paste the code into the Global CSS box, the changes will be reflected across every help site in your account.
2. Finding Icons
You can use your icons or use a service such as http://www.iconfinder.com.
3. Hosting Icons and Image Paths
- You can host your files on your site by Uploading them to File Manager
- First, locate the icon in your File Manager folders to get the full path to your image.
- Right-click on the image, then click View to open it in a dialog.
- Right-click the icon and choose Copy Image Address in Google Chrome or Copy Image Location in Firefox.
4. Icon Size
- The icon size is 16x16 pixels and 32x32 pixels for the retina.
- The icon has a transparent background and is in GIF or PNG format.
- The icon should be center and middle aligned. Suppose the visible object is not enclosed in a square. In that case, you may need to do some extra positioning using the background-position property, as seen in the sample CSS codes below.
5. How to Change Each Icon
- Get the code for the specific icon you are attempting to replace
- Update the image paths to where you are hosting your files
- Paste your code in the Site CSS option under Settings > Choose your site from the drop-down > Branding
Home Icon
.x-tree-node-collapsed .icon-home, .x-tree-node-expanded .icon-home, .icon-home {
background-image: url('some-path/new-home-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-node-collapsed .icon-home, .x-tree-node-expanded .icon-home, .icon-home {
background-image: url('some-path/new-home-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Home Icon on Tab
.icon-tab-home {
background-image: url('some-path/new-home-icon.png') !important;
background-position: 0 center !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.icon-tab-home {
background-image: url('some-path/new-home-iconX2.png') !important;
background-position: 0 center !important;
background-size: 16px;
}
}
Closed Folder
.x-tree-node-collapsed .folder, .x-tree-node-leaf .folder, .icon-close-folder, .icon-visible-folder {
background-image: url('some-path/new-folder-closed-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-node-collapsed .folder, .x-tree-node-leaf .folder, .icon-close-folder, .icon-visible-folder {
background-image: url('some-path/new-folder-closed-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Open Folder
.x-tree-node-expanded .folder, .icon-open-folder {
background-image: url('some-path/new-folder-open-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-node-expanded .folder, .icon-open-folder {
background-image: url('some-path/new-folder-open-icon.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Draft Page
.draft-topic-node .icon-topic {
background-image: url('some-path/new-draft-page-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-node-icon.icon-home {
background-image: url('some-path/new-draft-page-icon.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Published Page
.x-tree-node-icon.icon-topic {
background-image:url('some-path/new-published-page-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-node-icon.icon-topic {
background-image: url('some-path/new-published-page-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Draft Video
.draft-topic-node .icon-video-topic {
background-image: url('some-path/new-draft-video-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.draft-topic-node .icon-video-topic {
background-image: url('some-path/new-draft-video-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
Published Video
.icon-video-topic, .ui-tdfrm .ui-tfd-video .icon-type {
background-image: url('some-path/new-published-video-iconX2.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.icon-video-topic, .ui-tdfrm .ui-tfd-video .icon-type {
background-image: url('some-path/new-published-video-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Expand All / Collapse All TOC Filter
.icon-expand-all {
background-image: url('some-path/new-expand-all-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.icon-expand-all {
background-image: url('some-path/new-expand-all-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
.icon-expand-all {
background-image: url('some-path/new-collapse-all-icon.png') !important;
/* Use the background-position to move the icon up or down until it lines up with the text */
background-position: 0 0 !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.icon-expand-all {
background-image: url('some-path/new-collapse-all-iconX2.png') !important;
background-position: 0 0 !important;
background-size: 16px;
}
}
Elbow Icons
.x-tree-arrows .x-tree-elbow-minus, .x-tree-arrows .x-tree-elbow-end-minus {
background-image: url('some-path/new-elbow-minus.gif') !important;
/* Use the background-position to move the icon up or down until it lines up,
You may use pixel values. It depends on your image. */
background-position: center center !important;
}
.x-tree-arrows .x-tree-elbow-plus, .x-tree-arrows .x-tree-elbow-end-plus {
background-image: url('some-path/new-elbow-arrows.gif') !important;
/* Use the background-position to move the icon up or down until it lines up,
You may use pixel values. It depends on your image. */
background-position: center center !important;
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-arrows .x-tree-elbow-minus, .x-tree-arrows .x-tree-elbow-end-minus {
background-image: url('some-path/new-elbow-minusX2.gif') !important;
/* Use the background-position to move the icon up or down until it lines up,
You may use pixel values. It depends on your image. */
background-position: center center !important;
background-size: 16px;
}
}
/* Media query to target retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.x-tree-arrows .x-tree-elbow-plus, .x-tree-arrows .x-tree-elbow-end-plus {
background-image: url('some-path/new-elbow-plusX2.gif') !important;
/* Use the background-position to move the icon up or down until it lines up,
You may use pixel values. It depends on your image. */
background-position: center center !important;
background-size: 16px;
}
}
6. Changing All Icons
- Download the sprite image being used by your theme. A sprite image is an extensive collection of small photos saved in one file.
- The background-position property specifies the image that will appear as the background of an HTML element.
- For the grey theme: get the regular sprite and the one for retina support.
- Using Photoshop or GIMP, replace each icon in the sprite image, maintaining the dimension. This way, you will no longer need to specify the background position, as that is already defined.
- You can host your new sprite image in ProProfs through the File Manager.
- Replace the background-image property in the code below with the path to your new sprite image.
.icon-expand-all, .icon-collapse-all, .icon-topic, .icon-video-topic, .ui-tdfrm .ui-tfd-text .icon-type, .ui-tdfrm .ui-tfd-video .icon-type, .draft-topic-node .icon-topic, .draft-topic-node .icon-video-topic, .icon-topic-copy, .icon-save, .icon-topic-edit, .icon-edit-topic, .icon-new, .icon-folder-new, .icon-new-folder, .icon-new-topic, .icon-folder-new-topic, .icon-print-topic, .icon-folder-rename, .icon-topic-rename, .icon-new-link, .icon-link-edit, .icon-url-topic, .icon-folder-remove, .icon-topic-remove, .icon-remove-topic, .icon-remove, .icon-inactive, .icon-new-tooltip, .icon-filter, .icon-tab-topic, .icon-save-pdf, .icon-save-all_pdf, .icon-extlink, .icon-home, .ui-tab-switcher .x-menu-item-checked .x-menu-group-item .x-menu-item-icon, .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .ui-tbar-fb-wrap .ui-tbar-fb img, .ui-grid-panel .x-grid3-cell-inner img.icon-home, .ui-pdf-node-topic .ui-pdf-node-icon, .x-tree-node-leaf .folder, .icon-open-folder, .icon-close-folder, .icon-visible-folder, .ui-side-nav .ui-tree-node-hidden .x-tree-node-expanded .folder, .ui-side-nav .ui-tree-node-hidden .folder, .icon-hidden-folder, .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close, .icon-checked {
background-image: url("some-path-to-your-sprite-image.png") !important;
}
/*For retina*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.icon-expand-all, .icon-collapse-all, .icon-topic, .icon-video-topic, .ui-tdfrm .ui-tfd-text .icon-type, .ui-tdfrm .ui-tfd-video .icon-type, .draft-topic-node .icon-topic, .draft-topic-node .icon-video-topic, .icon-topic-copy, .icon-save, .icon-topic-edit, .icon-edit-topic, .icon-new, .icon-folder-new, .icon-new-folder, .icon-new-topic, .icon-folder-new-topic, .icon-print-topic, .icon-folder-rename, .icon-topic-rename, .icon-new-link, .icon-link-edit, .icon-url-topic, .icon-folder-remove, .icon-topic-remove, .icon-remove-topic, .icon-remove, .icon-inactive, .icon-new-tooltip, .icon-filter, .icon-tab-topic, .icon-save-pdf, .icon-save-all_pdf, .icon-extlink, .icon-home, .ui-tab-switcher .x-menu-item-checked .x-menu-group-item .x-menu-item-icon, .x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .ui-tbar-fb-wrap .ui-tbar-fb img, .ui-grid-panel .x-grid3-cell-inner img.icon-home, .ui-pdf-node-topic .ui-pdf-node-icon, .x-tree-node-leaf .folder, .icon-open-folder, .icon-close-folder, .icon-visible-folder, .ui-side-nav .ui-tree-node-hidden .x-tree-node-expanded .folder, .ui-side-nav .ui-tree-node-hidden .folder, .icon-hidden-folder, .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close, .icon-checked {
background-image: url("some-path-to-your-sprite-image.png") !important;
}
}
7. Changing the Background Color for a Selected or Hovered Page or Folder
This code below is from the Grey theme. You simply replace the colors. Note the two states. The hovered state usually has lighter color.
.x-tree-node .x-tree-selected {
background-color: #ddd !important;
}
.x-tree-node .x-tree-node-over {
background-color: #eee !important;
}
That is all about customizing the TOC icons.
© 2005 - 2024 ProProfs