fade slow on hover over main buttons phpBB2 forum

Hi all i am a little lost here if anyone can help.

Can some one help me with a code to make all the buttons fade on hover over on my test site
The board is phpBB2 i would like this done by CSS system please

Buttons are all main board buttons as in
New topic
Post reply
Locked topic
Delete
IP
edit
all the report buttons
thanks button
Quote
Multi-quote
Multi-quote selected
Post new private message

i would like it to fade nice and slow if you can

Much thanks for any help

Ape

Hi

Okay, so not all of them are named in phpBB2 board so you have to name them yourself; however, I did find the names of a few so this is the CSS for them:

Code:

img#i_post1:hover, img.i_icon_ip:hover, img.i_icon_delete:hover, img.i_icon_quote:hover, ul.profile-icons li.ddvote:hover {
transition: 800ms;
opacity: 0;
}

These are the following I was not able to detect: Post, Locked, Multi-quote Buttons, All report buttons, and Post new messages.

Just name them in the templates .

Regards,
Pizza Boi

Hi Pizza boi this makes the buttons go when you hover i want then just to fade out to say half there look.

also i know this can be done for all the rest of the buttons aswell as i had it before i just can't find the code anymore

Hi

So half transparent? Try opacity: 0.5; also, you should try looking at your topic_list_box and viewtopic_body so you can see the button enclosed in { and } with their names... usually.

Regards,
Pizza Boi

Thanks i think i have it now lol

Hi

Sure, no worries bro~

The pizza's here! That'd be $2.99 .

No problem~

Regards,
Pizza Boi

LOL


This is the Code used to do all the buttons

Code:

/*POST BUTTON FADES CODE*/
img#i_post, img#i_icon_guote:hover, img.i_msg_newpost:hover, img#post_mq2_4:hover, .post-options img:hover, profile-icon:hover, img.i_icon_edit:hover, img#Newtopic:hover, img#i_reply:hover, img#one:hover, img#i_post1:hover, img.i_icon_ip:hover, img.i_icon_delete:hover, img.i_icon_quote:hover, ul.profile-icons li.ddvote:hover {
transition: 800ms;
opacity: 0.7;
}
/*END OF BUTTON FADE CODE*/

  EDIT NOT DONE YET SORRY
I have one button still not fading
is the post Reply one this is the one that is on the Bottom of a topic

Hi

Do you have the top version too? Find this in your viewtopic_body:

Code:

<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->

Replace by:

Code:

<a href="{U_POST_REPLY_TOPIC}"><img class="reply" src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->

And:

Code:

<!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->

Replace by:

Code:

<!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img class="reply" src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->

Save and Publish < Add this in CSS:

Code:

.reply:hover {
  transition: 400ms;
  opacity: 0.5;
}

If you're using the default viewtopic_body template, you should find the bottom part in line 400+ and the first part in line 56 (Starting).

Regards,
Pizza Boi

No this did not work

Hi

Can you please post your viewtopic_body instead? I'll use it in my test forum.

Regards,
Pizza Boi

Ive removed the code gave by you Pizza boi Nothing has been touched in there until you gave me that code to add in there. I'm sure there is some other way to this without going in the templates maybe by java and CSS i have all of them working all but the one on the right hand side and some buttons in the PM system. so i can't see why them ones are not working if the top ones are and there the same buttons.    
This is the problem i see as you can see this button has a IP name to it but this one don't it just has img on the name tag and yet the top buttons have a name tag on both of them  

Hi

Oh, so it's Topic Locked. Okay, can you link me to a post where that can be seen? Also, where are the other areas you still have the hover problem? Sorry, I'm having a bit of a difficult time understanding your English =x .

Regards,
Pizza Boi

It Don't matter if it's locked or not the button shows as IMG only there is NO Code to the button at all.
That is my problem. That one button DON'T have a Button Code to it no matter what you do.

maybe some one over in the Office could tell me why this Dont have a code to it or even what i have to do to get this sorted. all the rest of the buttons now work it's just that one i have a problem with.

Hi

So it really doesn't help even if you check your viewtopic_box template? Because it works for me in my test forum.

Regards,
Pizza Boi

No it don't help me at all.

I have asked Buttercup to ask the tech staff for more help on this as this is not a problem that we can work out for our self i don't think.

as it's the weekend the staff are out of the office.

APE wrote:No it don't help me at all.

I have asked Buttercup to ask the tech staff for more help on this as this is not a problem that we can work out for our self i don't think.

as it's the weekend the staff are out of the office.

If someone checks the forum and sees the button may help. Like this its no use..

Your welcome to look for your self here is the test forum I'ts on all the forums i have looked at
http://mytestforum.forumotion.co.uk/ its the same with the real forum they all have a the same thing. No button ID i was told that if you do the top one then the bottom one is a same link but all the rest of the buttons have worked it's just that one that has the problem. but without an account you will not see the buttons anyway

Code:

span.nav img:hover {
  transition: 800ms;
  opacity: 0.7;
}

Thank you so much Bob
the only other ones i have a problem with now is the post replay in the Pm system that also comes up with IMG

You're welcome   

This should do the trick for the PM buttons:

Code:

.three-col a img:hover {
  transition: 800ms;
  opacity: 0.7;
}

bob77707 wrote:

Code:

span.nav img:hover {
   transition: 800ms;
   opacity: 0.7;
}

bob77707 wrote:You're welcome   

This should do the trick for the PM buttons:

Code:

.three-col a img:hover {
  transition: 800ms;
  opacity: 0.7;
}

Bob you are the best Thank you so much i am that happy now i could kiss you lol JOKES you really don't know how much i have been going mad in my mind about this lol i had all them Codes a long time a go but lost them when i got a new computer You Rock mate thank you  
+1 and a thanks lol

problem solved that a big thank you Bob