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.

Forum Text Glow

View previous topic View next topic Go down

Solved Forum Text Glow

Post by Flame Melody on April 18th 2015, 11:36 pm

I don't know a proper title for this thread except what I wrote- so excuse me if I had misguided you by the context.

Anyway, back in the forum I go to, whatever button you hover your mouse at glows by white (though I believe it can be customized later on). For example, if you hover your mouse over  "What's on your Mind?" or "The Magical Lounge" or one of these many options in the "The Magical Lounge" section it would have a glowing aura around it. I don't think the text would enlarge and glow at the same time, I believe only glow. But if it would be enlarged also, that would be great.

So basically I'm curious what's the proper coding and how can I edit the coding to do such thing Zen.

Forum Link: http://believeinwinx.forum-motion.com/


Last edited by Flame Melody on April 18th 2015, 11:43 pm; edited 1 time in total (Reason for editing : Added forum link)

Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by SLGray on April 18th 2015, 11:42 pm

Please post your forum's link.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36748
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum Text Glow

Post by Flame Melody on April 18th 2015, 11:42 pm


Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Ange Tuteur on April 19th 2015, 12:12 am

The links display a text-shadow when you hover over them, correct ? If that's the case, you can achieve this with a small line of CSS.
Display > Colors > CSS stylesheet
Code:
a:hover { text-shadow:0 0 3px #FF0 }

Add the above code to your sheet should add a shadow to links on hover. If any questions, let me know. Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Flame Melody on April 19th 2015, 12:24 am

Thank you! That works but I meant something different. It was as if..I don't know..an animation? I would hover my mouse over the clickable text and it will slowly (a matter of a second or 3/4th a second) not instantly glow in white, as if it's a foggy-aura around it if that makes sense Confused.

Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Ange Tuteur on April 19th 2015, 12:41 am

I'm assuming it was a transition. Add the following rule to your stylesheet to see if that's what you're looking for. Smile
Code:
a {
  -webkit-transition:500ms;
  transition:500ms;
}


Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Flame Melody on April 19th 2015, 2:10 pm

Hooray! That's it! Is there any way I can customize this transition's glow or change its radius or something? Better yet - what are the maximum limitations I can do with it perhaps?

EDIT: Also, that's not accurately how the glow was. The glow in the past in my forum used to glow in a bigger radius with white (I believe it can be customized?) around the clickable links.

Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Ange Tuteur on April 19th 2015, 3:10 pm

The current shadow is this :
text-shadow:0 0 3px #FF0

and an explanation of the values :

0 (1) : horizontal offset of the shadow
0 (2) : vertical offset of the shadow
3px : softness of the shadow
#FF0 : color of the shadow

Adjust the softness if you want the shadow to be bigger / smaller. Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by rockzkie on April 19th 2015, 3:29 pm

the animation doesn't work for me

but the glow is working fine...

anyway i can do this?
my forum is invision

rockzkie
Forumember

Male Posts : 58
Reputation : 3
Language : Tagalog & English (a little bit)
Location : Philippines

http://darkgamers.forumtl.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Flame Melody on April 19th 2015, 3:38 pm

So you're saying I need to have the shadow and the transition coding at the same time to achieve my desire? Or that the transition could be edited similar to the shadow? Cause the transition thingie coding is what I'm looking for - but your latest post got my tad confused if I need both for a certain colored transition with certain radius ^^..

Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Ange Tuteur on April 19th 2015, 6:01 pm

@rockzkie wrote:the animation doesn't work for me

but the glow is working fine...

anyway i can do this?
my forum is invision
Please open your own topic.

Thanks Smile

@Flame Melody wrote:So you're saying I need to have the shadow and the transition coding at the same time to achieve my desire? Or that the transition could be edited similar to the shadow? Cause the transition thingie coding is what I'm looking for - but your latest post got my tad confused if I need both for a certain colored transition with certain radius ^^..
Correct thumleft

This is generally how we'd style links in CSS :
Code:
/* default link styles */
a {
  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;
          transition:500ms;
}

/* hover link styles */
a:hover {
  text-shadow:0 0 6px #F00;
}

On the default link style rule we have the transition. The transition defines the time it takes to transition to another style ; in this case it's a :hover style. The prefixes -webkit-, -moz-, -o-.. are for older browser support, the one without a prefix is for good browsers. Wink

You'll see that the transition time is 500ms ( milliseconds ) or in seconds ; 0.5s. The lower the time ( 150ms ), the faster the shadow ( or glow ) will render, but the higher the time ( 1500ms ), the longer it'll take for the shadow to render. Make sure when changing transition values, to also change the prefix values as well. Smile

In the :hover rule you'll see the shadow softness is 3px higher than the last code I gave you, and is the color red. In short, the higher the softness, the more area the shadow will cover. The best thing to do is play around with the numbers until you're happy with the result.. Mr. Green

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Flame Melody on April 19th 2015, 6:24 pm

Thank you very much! The latest coding is exactly what I needed! Got everything I need. Once again, thanks very much albino.

Flame Melody
Forumember

Female Posts : 92
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Forum Text Glow

Post by Ange Tuteur on April 19th 2015, 7:32 pm

You're welcome ^^

Topic archived

If anymore problems, feel free to open a new topic. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.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