Keyframe Animation and Usergroup

Go down

In progress Keyframe Animation and Usergroup

Post by TenzoNakamiXD on August 24th 2015, 11:23 pm

Hi there,
I'm having a bit problem with a Keyframe Animation that I wrote in the CSS Selector. Here you go:


Code:
a[href="/u1"] span{color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
@keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}


What it should do: It should make the /u1 name changes like a rainbow, yes it do.
What I want it to do: It currently only applicable to /u and not /g, are there any way to make this work for usergroup rather than just a username? It is really hard if in example I have a usergroup with more than tons of user inside it.

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by YasirAyad on August 25th 2015, 2:01 am

hello @TenzoNakamiXD

you can use this code for usergroup ;


Code:
a span[style="color:#FF0000"] strong {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
 }


Just select the color group, and add to the code color:#FF0000


cheers
avatar
YasirAyad
Forumember

Male Posts : 67
Reputation : 10
Language : En/Ar

http://help.ahlamontada.com/u152001

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by TenzoNakamiXD on August 25th 2015, 3:30 am

new.moon wrote:hello @TenzoNakamiXD

you can use this code for usergroup ;


Code:
a span[style="color:#FF0000"] strong {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
 }


Just select the color group, and add to the code color:#FF0000


cheers

Hi and thanks for replying. But whenever I do that, doesn't that also makes it that whenever I create a post of the same color it'd turn out rainbow too?

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by SLGray on August 25th 2015, 5:51 am

Did you change this part for the groups:

Code:
href="/u1"


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43469
Reputation : 3084
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by TenzoNakamiXD on August 25th 2015, 5:54 am

@SLGray wrote:Did you change this part for the groups:

Code:
href="/u1"

Yes I did. I replaced the u1 with g1 and it still doesn't work. No other CSS or JS that isn't comes default with Forumotion is active.

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by SLGray on August 25th 2015, 5:55 am

I believe you have to use the full link:
Code:
g1-administrators


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

avatar
SLGray
Administrator
Administrator

Male Posts : 43469
Reputation : 3084
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by TenzoNakamiXD on August 25th 2015, 9:43 am

@SLGray tried, didn't work.
In my case it was g1-ceo, and it still doesn't work.
It only work with u1 and such.

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by TenzoNakamiXD on August 27th 2015, 2:40 am

bump.

Any help?

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by Ace 1 on August 27th 2015, 11:46 pm

Uh try this?

Code:
a span[style="color:#XXXXXX"] strong:hover {
    /* YOUR CODE HERE */
}

Change the #XXXXXX to the color of the group.
avatar
Ace 1
Helper
Helper

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by TenzoNakamiXD on September 3rd 2015, 11:35 am

I have tried both


Code:
a span[style="color:#00FFEA"] strong:hover {
    color:#F00;animation:svcolor 1s infinite;-moz-animation:svcolor 1s infinite;-webkit-animation:svcolor 1s infinite;}
@keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-moz-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}}
@-webkit-keyframes svcolor{10%{color:#F00}20%{color:#F80}30%{color:#FF0}40%{color:#5F0}50%{color:#0F0}60%{color:#0FD}70%{color:#09F}80%{color:#00F}90%{color:#A0F}100%{color:#F0F}
}


and

Code:
a span[style="color:#00FFEA"] strong:hover {
    background: url(http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif) no-repeat;
}


but still doesn't work.

TenzoNakamiXD
Forumember

Posts : 113
Reputation : 1
Language : English, Indonesian

http://mhulz-team.forumq.net

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by Ange Tuteur on September 3rd 2015, 12:33 pm

Hi,

Some points :
@ rules shouldn't go inside other rules, this goes for keyframes.
-moz- I highly doubt anyone is using Firefox 16 anymore, so this is hardly needed in my opinion.
-webkit- would be necessary for safari and opera + older versions of chrome

This should work :
Code:
@-webkit-keyframes svcolor {
  10%{color:#F00}
  20%{color:#F80}
  30%{color:#FF0}
  40%{color:#5F0}
  50%{color:#0F0}
  60%{color:#0FD}
  70%{color:#09F}
  80%{color:#00F}
  90%{color:#A0F}
  100%{color:#F0F}
}

@keyframes svcolor {
  10%{color:#F00}
  20%{color:#F80}
  30%{color:#FF0}
  40%{color:#5F0}
  50%{color:#0F0}
  60%{color:#0FD}
  70%{color:#09F}
  80%{color:#00F}
  90%{color:#A0F}
  100%{color:#F0F}
}

a[href^="/u"] span[style="color:#000000"] strong {
  color:#F00;
  -webkit-animation:svcolor 1s infinite;
          animation:svcolor 1s infinite;
}
FYI I spaced it out for the sake of readability. Neutral

Replace 000000 by the color of your group, and make sure to disable the following option in CSS.
Display > Colors > CSS stylesheet > Optimize your CSS : No
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by Ace 1 on September 5th 2015, 4:18 am

@Ange Tuteur

Is it possible to add this and create the effect in the chatbox?

Code:
span[data-user="u"] strong {
  -webkit-animation:svcolor 1s infinite;
          animation:svcolor 1s infinite;
}
avatar
Ace 1
Helper
Helper

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: Keyframe Animation and Usergroup

Post by Ange Tuteur on September 5th 2015, 10:13 am

As long as you include the proper animation properties and values, then yes. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum