The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make hover effects for posting buttons in topics

View previous topic View next topic Go down

How to make hover effects for posting buttons in topics

Post by Raulito on June 11th 2010, 4:43 am

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 king

Raulito
Forumember

Male Posts : 102
Reputation : 0
Language : Spanish and English

http://runescape-community.forum.st/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by LH Justin on June 11th 2010, 6:12 pm

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;
   }

LH Justin
Hyperactive

Male Posts : 3686
Reputation : 121
Language : English, HTML, CSS, JavaScript
Location : United States

http://www.creative-nation.net

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by DustyBones on June 11th 2010, 6:59 pm

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

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by Raulito on June 11th 2010, 9:24 pm

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

Raulito
Forumember

Male Posts : 102
Reputation : 0
Language : Spanish and English

http://runescape-community.forum.st/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by DustyBones on June 11th 2010, 9:49 pm

Nope doesn't work in pnpBB3 css style sheet Sad

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by Raulito on June 11th 2010, 10:01 pm

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
Forumember

Male Posts : 102
Reputation : 0
Language : Spanish and English

http://runescape-community.forum.st/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by LH Justin on June 11th 2010, 10:10 pm

@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
Hyperactive

Male Posts : 3686
Reputation : 121
Language : English, HTML, CSS, JavaScript
Location : United States

http://www.creative-nation.net

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by Raulito on June 11th 2010, 10:19 pm

@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 "http://illiweb.com/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
Forumember

Male Posts : 102
Reputation : 0
Language : Spanish and English

http://runescape-community.forum.st/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by LH Justin on June 12th 2010, 6:53 am

@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 "http://illiweb.com/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.

LH Justin
Hyperactive

Male Posts : 3686
Reputation : 121
Language : English, HTML, CSS, JavaScript
Location : United States

http://www.creative-nation.net

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by Raulito on June 12th 2010, 7:10 am

Freaky sneak peak at my CSS mate Razz

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

Raulito
Forumember

Male Posts : 102
Reputation : 0
Language : Spanish and English

http://runescape-community.forum.st/

Back to top Go down

Re: How to make hover effects for posting buttons in topics

Post by Fulu on July 1st 2010, 3:11 am

Is there any tutorials on how to do this ?

Because, I don't understand much of this.

Thanks.

Fulu
New Member

Posts : 5
Reputation : 0
Language : English, Norwegian, Swedish, Danish, HTML

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum