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.

 

Knowledge Base with custom TOC styling

 

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:

 

1. Where to Put the CSS

2. Finding Icons

3. Hosting Icons and Image Paths

4. Icon Size

5. How to Change Each Icon

6. Changing All Icons

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

 

Go to Settings > Pick your help site > 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.

 

Paste the CSS code

 

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.

 

Open File Manager

 

Copy Image Address

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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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

Show Code

.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.

 

Show Code

.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.

 

Show Code

.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.

 

 

Was this information helpful?
© 2005 - 2024 ProProfs
-
add chat to your website