Different Toggle Icons per node

Different Toggle Icons per node


Well-known member
Shelley submitted a new resource:

Different Toggle Icons per node - this hinges on that you are using Cedrics Toggle add-on.

Summary: This is strictly a reference guide and it hinges on you are using Cedric's awesome Toggle add-on. What this enhance will allow is to display different coloured/design toggle Icons on categories of your choice. Because I coloured certain categories differently the default green icons I design didn't fit well with the red.

First copy and paste the css into the EXTRA.CSS though because your node IDs will...

Read more about this resource...


  • toggle-sprite-PSD.zip
    13.7 KB · Views: 14
This one can also be achieved with pure CSS.

  content: "";
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: green;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
  border: 1px solid darkgreen;
  cursor: pointer;
.tglWchild:after /* triangle */
  content: "";
  display: block;
  position: absolute;
  right: 50%;
  bottom: 50%;
  -webkit-transform: translate(50%, 1px); 
  -moz-transform: translate(50%, 1px); 
  transform: translate(50%, 1px);
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom-color: #fff;
  box-shadow: 0 1px rgba(0,0,0,0.25);

Demo: http://jsfiddle.net/CyberAP/UqGAE/

This is just an 'open' state. With some tweaking you can get 'close' state.
Thank you a lot Shelley !

And thank you too CyperAP... I didn't know we could do this with css. I thought it was requiring to use a svg image. Is it done with CSS 3.0?
Top Bottom