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.

[.:Chatbox:.] How do I make links have a hover-effect in chat?

View previous topic View next topic Go down

Solved [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Guest on August 31st 2015, 2:01 pm

Hello, I'm trying to make links hover in the chatbox when somebody posts a link. Anyway to achieve this?


Forum Version: PHPBB3

Forum URL: http://theoriginals.4umotion.com/


Last edited by Ghost on August 31st 2015, 7:44 pm; edited 2 times in total

Guest
Guest


Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Ange Tuteur on August 31st 2015, 2:07 pm

Hi @Ghost,

You can use the following rules in your stylesheet.
Display > Colors > CSS stylesheet
Code:
#chatbox a {
  color:red;
}

#chatbox a:hover {
  color:blue;
}

First rule is the default state and the second rule is the hover state.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Guest on August 31st 2015, 2:22 pm

Thank you Ange tuteur!


- Update:
Code:
#chatbox a {
color:red;
}

#chatbox a:hover {
color:blue;
}
the code you gave me,
for the "#chatbox a:hover {"
do I add the html code for it to have a hover effect? Like this for example: http://prntscr.com/8az5yzjust curious >3 because when I did a test link on my forum chatbox it didn't hover.


Last edited by Ghost on August 31st 2015, 3:43 pm; edited 1 time in total (Reason for editing : -Update-)

Guest
Guest


Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Ace 1 on August 31st 2015, 5:02 pm

Add a transition codeto the a coding.

Code:
#chatbox a {
-webkit-transition: all 1s;
}

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Guest on August 31st 2015, 5:34 pm

@Ace 1 wrote:Add a transition codeto the a coding.

Code:
#chatbox a {
-webkit-transition: all 1s;
}
after or before?

Guest
Guest


Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Ace 1 on August 31st 2015, 6:20 pm

Doesn't matter. Everything within the a code happens all at the same time Wink

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Guest on August 31st 2015, 6:45 pm

@Ace 1 wrote:Doesn't matter. Everything within the a code happens all at the same time Wink
Screenshot: http://prntscr.com/8b1csl After-Effect: http://prntscr.com/8b1daw (no hover link lol)

Guest
Guest


Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Ange Tuteur on August 31st 2015, 7:04 pm

It should look like this if you want transitions and a text-shadow on hover :
Code:
#chatbox a {
  color:red;
  transition:300ms;
}

#chatbox a:hover {
  color:blue;
  text-shadow:0 0 3px blue;
}

HTML doesn't go in CSS, it's entirely separate. If you're interested in learning there's some tutorials here : http://www.w3schools.com/css/

@Ace 1 the -webkit- prefix only affects browsers that use webkit such as Chrome or Safari. They're mainly used for older version support. The placement of your rulesets also matter, depending on if you want to override styles. However, hover rules should always be after the default state.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by Guest on August 31st 2015, 7:29 pm

@Ange Tuteur wrote:It should look like this if you want transitions and a text-shadow on hover :
Code:
#chatbox a {
 color:red;
 transition:300ms;
}

#chatbox a:hover {
 color:blue;
 text-shadow:0 0 3px blue;
}

HTML doesn't go in CSS, it's entirely separate. If you're interested in learning there's some tutorials here : http://www.w3schools.com/css/

@Ace 1 the -webkit- prefix only affects browsers that use webkit such as Chrome or Safari. They're mainly used for older version support. The placement of your rulesets also matter, depending on if you want to override styles. However, hover rules should always be after the default state.
It worked. Thanks, @Ange Tuteur and @Ace

Guest
Guest


Back to top Go down

Solved Re: [.:Chatbox:.] How do I make links have a hover-effect in chat?

Post by APE on August 31st 2015, 10:44 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8648
Reputation : 759
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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