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 : 13021
Reputation : 2683
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/8az5yz just 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 code to the a coding.

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

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.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 code to 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
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.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 : 13021
Reputation : 2683
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 : 8317
Reputation : 716
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