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 make a colored text fade into another using a hover code? (using css transitions)

View previous topic View next topic Go down

Solved how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 19th 2015, 8:15 pm

how make a colored text fade into another using a hover code?

(using css transitions)


Last edited by Ace 1 on May 21st 2015, 1:08 am; edited 2 times in total

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 19th 2015, 8:37 pm

Are you speaking about links on your forum
Or a paragraph of text in a post?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray on May 19th 2015, 8:52 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 19th 2015, 8:55 pm

@sir. mayonnaise I am referring to a link.

Forum site: http://genocideclan.forumotion.com/

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 19th 2015, 11:22 pm

Just one link or all links?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 19th 2015, 11:33 pm

All links <a>

Including those in my chatbox which don't do that.
Also including the topics inside forums which don't do that.

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 19th 2015, 11:44 pm

Now what color did you want for for plain links?

And what color for when you hover them?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 19th 2015, 11:48 pm

It should fade from white hex code #fff to
Cyan hex code #0ff

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 19th 2015, 11:55 pm

Try adding this to the top of your Css Style sheet.
Code:

a {
 color: #fff !important;
 
 /* dont edit bellow this line */
 transition: color 1.0s linear !important;
 -o-transition: color 1.0s linear !important;
 -moz-transition: color 1.0s linear !important;
 -webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}
 
a:hover {
 color: #0ff !important;
}


Please let me know if this code worked for you, if not i will fix it.


Last edited by Sir. Mayo on May 20th 2015, 12:09 am; edited 1 time in total (Reason for editing : added info)

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 20th 2015, 12:15 am

Ok, but I'm changing the code behind the line


Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\


Last edited by Ace 1 on May 20th 2015, 12:16 am; edited 1 time in total

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 20th 2015, 12:15 am

What on them are you changing? Just change the numbers, the rest is need to make sure it works on all browsers.

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 20th 2015, 12:28 am

I was gonna change linear to "ease-in-and-out" cuz I wanna ease up in there and then ease out of there.

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 20th 2015, 12:30 am

Post what you changed it to if you still have it

You may not have removed enough.

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 20th 2015, 12:42 am

Code:
a {
color: #fff !important;

/* dont edit bellow this line */
transition: color 1.0s linear !important;
-o-transition: color 1.0s linear !important;
-moz-transition: color 1.0s linear !important;
-webkit-transition: color 1.0s linear !important;
/* dont edit above this line */

}


@Ace 1 wrote:Ok, but I'm changing the code behind the line


Nvm it didnt work even when I didn't change it. It completely removed every fade code I had already now it doesn't do anything when you hover :\

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 20th 2015, 2:00 am

Does this do it for you:

Code:
a {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-osx-font-smoothing: color;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: transform;
 transition-property: transform;
 color:#fff;
}
a:hover, a:focus, a:active {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 color:#0ff;
}

sorry for taking so long, i had no idea about the ease in , ease out effect and was reading up on it.

Here is the Minified version:
Code:
a{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px transparent;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:color;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform;color:#fff}a:active,a:focus,a:hover{-webkit-transform:scale(1.1);transform:scale(1.1);color:#0ff}

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray on May 20th 2015, 2:03 am

Try this:
Code:
a:link:hover, a:link:focus {
text-decoration: none !important;
text-shadow: 0 0 0.9em red, 0 0 0.9em red, 0 0 0.9em red;
}
Change the places that say red with your color. The numbers are for how bright or dark the hover color will be.


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 20th 2015, 3:13 pm

@SLGray @Sir. Mayonnaise

That's cool and all, but... All I wanted was for all of my links to turn blue. For example, click here and hover over "Application Template".

This turns blue.

Then go back to the link and hover over "Pivot-Son #1".

See the difference? Idk why this happens this way. Because in the other forums (like this one) it hovers fine between the Announcements and Topics.

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray on May 20th 2015, 9:18 pm

That is weird. It hovers correctly when you open the topic.


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 20th 2015, 9:22 pm

I thought maybe there could be a code that does this for all forum links

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by SLGray on May 20th 2015, 9:36 pm

The code we gave you should work on all links.

I was wrong. Add this to your CSS:
Code:
a.topictitle:link:hover, a.topictitle:link:focus {
 Add the same code I gave for links
}


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


SLGray
Administrator
Administrator

Male Posts : 36673
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 20th 2015, 10:55 pm

@Ace 1

There are types of links that can be changed in the css.

there is just plain a {} which is for all links on the fourm
there is a:hover {} which shows the values when you hover the link
then there is a:visited {} which shows up on links you have visited. I Will see if i can figure out a code to do what you wanted just give me a little time.

Best wishes Sir.Mayo


EDIT:

IT appears that you Topic title is a span tag with a color code in the html,


<span style="color:#FFFFFF;text-decoration:none;">Pivot-son #1</span>

See the style=color:#FFFFFF; That is causing the css for that span to be over written.

I think if you go to your acp and right before the CSS tab is a colors tab where you can change link colors see if what you want can be done in there But i doubt it

Now, the only other thing i can say is it may be your topics_list_box template or something similar to that.

Could you post your topics_list_box template here so i can have a look at it.



Last edited by Sir. Mayo on May 20th 2015, 11:12 pm; edited 2 times in total (Reason for editing : added info)

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ange Tuteur on May 21st 2015, 12:26 am

The standard syntax would be :
Code:
/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }
( You can also use a:link for default links, a:visited for visited, and a:active for active links )

If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
Code:
  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;
( that would be added to the first rule )

Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.

Anyway, you can override this style with the following rule :
Code:
a.topictitle:hover span { color:#F00 !important }

Change the red hexadecimal color to whatever you want. 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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Sir. Mayo on May 21st 2015, 12:44 am

@Ange Tuteur wrote:The standard syntax would be :
Code:
/* DEFAULT DISPLAY */
a {
  color:#FF0;
  transition:500ms;
}

/* HOVER DISPLAY */
a:hover { color:#F00 }
( You can also use a:link for default links, a:visited for visited, and a:active for active links )

If you wanted to have better CSS3 support for older browsers, prefixing transition is the way to go.
Code:
  -webkit-transition:500ms;
    -moz-transition:500ms;
      -o-transition:500ms;
( that would be added to the first rule )

Normally when a style doesn't take effect, adding the !important flag should override the style that wasn't changing to begin with. However, in Ace's case, it appears that the topic title is being colored by a span tag. I'm assuming you have the ability to color topic titles enabled.

Anyway, you can override this style with the following rule :
Code:
a.topictitle:hover span { color:#F00 !important }

Change the red hexadecimal color to whatever you want. Wink
Thanks for clearing that up Ange, i thought i missed something and knew of an easier way to do this.

But yea @Ace 1 What Ange posted should work, no need for the template now.

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ace 1 on May 21st 2015, 1:06 am

Solved

Thanks Very Happy

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: how make a colored text fade into another using a hover code? (using css transitions)

Post by Ange Tuteur on May 21st 2015, 6:38 pm

No problem. Wink

Topic archived

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