Different Toggle Icons per node

[Shelley]

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

 

[CyberAP]

This one can also be achieved with pure CSS.

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

 

[cclaerhout]

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?

 

[Shelley]

Shelley updated Different Toggle Icons per node with a new update entry:

Added PSD for the toggle icons

Added toggle Icons PSD in this post as i couldn't add it to this resource update. http://xenforo.com/community/threads/different-toggle-icons-per-node.49051/

Read the rest of this update entry...

 

[CyberAP]

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?

It was done with just CSS. CSS actually doesn't have a version. http://www.xanthir.com/b4Ko0

 

[cclaerhout]

It was done with just CSS. CSS actually doesn't have a version. http://www.xanthir.com/b4Ko0

Thank you for the link. I didn't know that.