Hello forumotioners! I've come with a small urge to make my posting buttons have hover-over effects.

For example, in this theme made by Matei | http://demo.nicetheme.com/sub-forum-1-f3/?theme_id=156975 | the "New Topic" has an hover-over effect.

I would like to make the "New Topic" "Post Reply" and all posting options such as "Quote" and "Multi-Quote" have some sort of hover-over effect, whether it would be opacity or simply a background image over it.

If there is some sort of CSS code to make this possible please post here, all help is tremendously appreciated.

Thanks in advance to all of those willing to help!

-Raulito

Okay, just add these codes near the beginning of your CSS. All you have to do is add your own images.

Please tell me the other post options you want because I will have to find each button's class to create a code for the hover effect.

Post New Topic

Code:

.i_post{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }
.i_post:hover{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }

Post Reply

Code:

.i_reply, #new-message-link img{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }
.i_reply:hover, #new-message-link img:hover{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }

Locked Topic

Code:

.i_reply_locked{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }
.i_reply_locked:hover{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }

New PM

Code:

.i_msg_newpost{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }
.i_msg_newpost:hover{
   background: url(YOUR IMAGE HERE) no-repeat center !important;
   }

Will these codes work for punBB3, if I put them in the Display/Colors/CSS Stylesheet?

Thanks Justin,, I will try those out in a bit.

I would also like the classes for the contact buttons and "Edit" "Multi-Quote" "Delete" etc..

Thanks again LH.

@Dusty; Add those codes to your CSS and see if it works..

Nope doesn't work in pnpBB3 css style sheet

For some reason, the hover background image doesn't seem to work.

But I threw in the opacity filter, and that did work.. pretty weird.

Also, it doesn't work in the actual posting page, it only works in the categories.

I'm running on Invision so that might be the problem.

Here's the code that I currently have, only the opacity filter works..

.i_post{
background: url(IMG_URL) no-repeat center !important;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity:.50;
}
.i_post:hover{
background: url(HOVER_IMG_URL) no-repeat center
!important;
filter:alpha(opacity=100);
opacity:1.0;
}

Raulito wrote:For some reason, the hover background image doesn't seem to work.

But I threw in the opacity filter, and that did work.. pretty weird.

Also, it doesn't work in the actual posting page, it only works in the categories.

I'm running on Invision so that might be the problem.

Here's the code that I currently have, only the opacity filter works..

.i_post{
background: url(IMG_URL) no-repeat center !important;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity:.50;
}
.i_post:hover{
background: url(HOVER_IMG_URL) no-repeat center
!important;
filter:alpha(opacity=100);
opacity:1.0;
}

You can't have the images in Pics Management.

LH Justin wrote:You can't have the images in Pics Management.

I removed them from Pics Management but it keeps checking the option "Hide" automatically, even if I add "https://2img.net/i/fa/empty.gif" to it..

And for some reason the codes don't work in the actual posting page, only in the category page

Raulito wrote:

LH Justin wrote:You can't have the images in Pics Management.

I removed them from Pics Management but it keeps checking the option "Hide" automatically, even if I add "https://2img.net/i/fa/empty.gif" to it..

And for some reason the codes don't work in the actual posting page, only in the category page

I looked at your CSS, you're just using the same image twice, you aren't using separate images for the regular button and hover button.

Freaky sneak peak at my CSS mate

Anyway, yeah I did that since I heard no reply from you.

Was just fooling around trying to get it to work, and I got the "Post Reply" in the actual post to work, but I still can't get the "New Topic" in the actual post to work , not even using the opacity filter.

EDIT: Not good, I think I messed something up in my CSS causing my navigation bar to have large spaces between each nav image =| GRRRR

Is there any tutorials on how to do this ?

Because, I don't understand much of this.

Thanks.