MyBB Community Forums

What is this?
In this tutorial I'll show you how to add this elegant effect to toggle collapse. Basically it makes the toggle collapse button only appear when we hover our mouse over the category. Preview can be found, here.
Tutorial:
Go to: Admin CP/ Templates & Styles/ Themes/ YOUR THEME/ global.css
and Advanced Mode and just paste the following code in the end.

.thead .expcolimage img {
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -ms-transition: opacity .25s ease-in-out;
        -o-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;
}

.thead:hover .expcolimage img {
    opacity: 1;
}	
		

Then just save!
If you have any questions or concerns please reply here.
This tutorial was originally created for PromotionZone.

Nice one bugara. Will implement it on my forums too. Before this it was done via a script.

Thank you, Bala.

Thanks!
Simple css with a cute effect, +Rep for you

The tutorial was not originally created for your board.
It is a very old CSS trick and is being used by designers from a long past for the premium themes ...

And a tutorial was shared a long time ago by me. http://community.mybb.com/thread-127353.html

(2013-08-26, 10:48 AM)Jaizu Wrote: [ -> ]Thanks!
Simple css with a cute effect, +Rep for you

Thank you!

(2013-08-26, 11:17 AM)effone Wrote: [ -> ]The tutorial was not originally created for your board.
It is a very old CSS trick and is being used by designers from a long past for the premium themes ...

Yes it was. It is my tutorial dispite of the fact that I'm not the first to use this code.

(2013-08-26, 04:16 PM)Xige Time Wrote: [ -> ]And a tutorial was shared a long time ago by me. http://community.mybb.com/thread-127353.html

I did a quick search but was not able to find anything.

how about toogle collapse in user cp ??

(2013-08-28, 06:20 AM)gamemaster Wrote: [ -> ]how about toogle collapse in user cp ??

I'll look into this. It's probably doable.
Edit: I figured it out. Just add the following code in global.css

.tcat .expcolimage img {
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -ms-transition: opacity .25s ease-in-out;
        -o-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;
}

.tcat:hover .expcolimage img {
    opacity: 1;
}	

(2013-08-28, 08:14 AM)bugara1 Wrote: [ -> ]

(2013-08-28, 06:20 AM)gamemaster Wrote: [ -> ]how about toogle collapse in user cp ??

I'll look into this. It's probably doable.
Edit: I figured it out. Just add the following code in global.css

.tcat .expcolimage img {
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -ms-transition: opacity .25s ease-in-out;
        -o-transition: opacity .25s ease-in-out;
        transition: opacity .25s ease-in-out;
}

.tcat:hover .expcolimage img {
    opacity: 1;
}	

ok thanks