• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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...



Well-known member
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.


Well-known member
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?