loading Loading...
add chat to your website

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 in your site. In cases where your brand's color scheme does not match any of our themes, you may add your own CSS codes to style your site. This guide focuses on changing the Table of Contents(TOC) icons. Some knowledge of CSS is required to override the default icons.

 


Where to Put the CSS

 

To add your CSS codes for customizing the TOC icons: 

  • Go to Settings > Configure & Brand > choose your site > click Branding tab
  • At the bottom, place your code in the CSS box.
  • then hit Save

Finding Icons

You can use your own icons or use a service such as http://www.iconfinder.com.

Hosting Icons and Image Paths

  • You can host your files in your site by Uploading in File Manager
  • To get the full path to your image, first, locate the icon in your File Manager folders.
  • Right-click on the image then click View to open it in a dialog.
  • Right-click the icon and choose Copy Image URL in Google Chrome
    or Copy Image Location in Firefox.

Icon Size

  • Icon size is 16x16 pixels and 32x32 pixels for retina
  • Icon has transparent background and is in GIF or PNG format
  • Icon should be center and middle aligned. If the visible object is not enclosed in a square, you may need to do some extra positioning using the background-position property as you will see in the sample CSS codes below.

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 > Add, Edit and Customize Sites > choose your site > Branding tab

 

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;
 }
}

Changing All Icons

  • Download the sprite image being used by your theme. A sprite image is just a big collection of small images saved in one file.
    To specify the image that will appear as background of an HTML element, the background-position property is being defined.
  • 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 not need to specify the background-position anymore 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;
     }
    }

Changing the Background Color for a Selected or Hovered Page or Folder

This code below is from the the Grey theme. You simply replace the colors. Note the two states. The hovered state usually has a 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;
}

 

How-to Videos

Changing an icon video.