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 a mouse over effect on New Topic Button

View previous topic View next topic Go down

Solved How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 5:14 pm

Hey, everyone!

I need help with creating a mouse over effect on the New Topic and Post Replay buttons.
I tried this site http://www.w3schools.com/css/css_image_sprites.asp but I couldn't write the code to show the buttons in my forum after I put it in my CSS.


Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 4th 2012, 5:17 pm

Hi! Can you provide your forum url? Smile

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 5:19 pm

That's the forum

But is still under construction

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 4th 2012, 5:27 pm

For New topic:
Code:
#i_post:hover, #one:hover{
css proprietes;
}

For post reply:
Code:
#i_reply:hover{
css proprietes;
}

For New topic, for locked forum:
Code:
#i_reply_locked:hover{
css proprietes;
}

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 5:32 pm

Thanks, I'll try it

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 4th 2012, 5:33 pm

Welcome! Very Happy

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 5:37 pm

I coulnd't make it work. It is possible for me to use two different images without hover them?

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 4th 2012, 6:26 pm

Just remove :hover before the id's... Smile

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 6:54 pm

Oh, yeah. Thank you very much Razz



Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 7:04 pm

I still can't get it to work. I'll post the code which I'm trying with.
There are no links in it now.

Code:
#i_post:hover, #one:hover{
      {
width: 167px;
height: 76px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(link);
background-repeat: no-repeat;
}

a.y:hover {
width: 167px;
height: 76px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(link);
background-repeat: no-repeat;
}

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 4th 2012, 7:51 pm

Code:
#i_post:hover, #one:hover{
width: 167px;
height: 76px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(link);
background-repeat: no-repeat;
}
 
a.y:hover {
width: 167px;
height: 76px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(link);
background-repeat: no-repeat;
}
You have an mistake, also replace background-image : url(link) by a link to a image. Very Happy

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 4th 2012, 8:12 pm

Yes, I'll put the image links. I just removed them before I posted the code here.
Thank you.

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Guest on January 5th 2012, 8:30 am

Glad I could help. Smile

Guest
Guest


Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sanket on January 5th 2012, 8:57 am

SolveD?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 5th 2012, 5:19 pm

No. Not yet.

So I put the last code and it still doesn't work.

Code:
#i_post:hover, #one:hover{
2.   width: 129px;
3.   height: 51px;
4.   color: #000000;
5.   padding: 10px;
6.   text-decoration:none;
7.   display: block;
8.   font-weight: bold;
9.   background-image : url(http://prikachi.com/images/385/4228385N.png);
10.   background-repeat: no-repeat;
11.   }
12.   
13.   a.y:hover {
14.   width: 129px;
15.   height: 58px;
16.   color: #FFFFFF;
17.   padding: 10px;
18.   font-weight: bold;
19.   text-decoration:none;
20.   display: block;
21.   background-image : url(http://prikachi.com/images/385/4228385N.png);
22.   background-repeat: no-repeat;
}

And I put in the CSS section. What it is that I get wrong? The button just don't want to show up.

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by iamthestreets on January 5th 2012, 8:21 pm

Try this. Your codes should be separated you need the original code for the image and a hover code. First code should have the regular image and the hover code should have the hover image in the url(). This is how I did mine. not sure what the a.y:hover is for so I left it alone?

Code:

#i_post, #one{
  width: 129px;
  height: 51px;
  color: #000000;
  padding: 10px;
  text-decoration:none;
  display: block;
  font-weight: bold;
  background-image : url(image);
  background-repeat: no-repeat;
  }

#i_post:hover, #one:hover{
  width: 129px;
  height: 51px;
  color: #000000;
  padding: 10px;
  text-decoration:none;
  display: block;
  font-weight: bold;
  background-image : url(hover image);
  background-repeat: no-repeat;
  }
   
a.y:hover {
  width: 129px;
  height: 58px;
  color: #FFFFFF;
  padding: 10px;
  font-weight: bold;
  text-decoration:none;
  display: block;
  background-image : url(hover image);
  background-repeat: no-repeat;
}

iamthestreets
Forumember

Posts : 114
Reputation : 1
Language : English

http://www.mystreetlife.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Sweet_Nightmare on January 5th 2012, 9:54 pm

I finally did it, thank you very much.
It's solved! Smile

Sweet_Nightmare
Forumember

Female Posts : 84
Reputation : 4
Language : Bulgarian
Location : Sofia, Bulgaria

http://teenobsession.forumotion.com/

Back to top Go down

Solved Re: How to make a mouse over effect on New Topic Button

Post by Nera. on January 5th 2012, 10:38 pm

Topic Solved & Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

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