Jump to content
WebFlake

Rainbow Group Formatting Using CSS


SamCheets

Recommended Posts

Video by: @sharkgamingph

css

.donor {

animation: rainbow 10s infinite;

}



@keyframes rainbow {

0% {

color: orange;

}

10% {

color: purple;

}

20% {

color: red;

}

30% {

color: CadetBlue;

}

40% {

color: yellow;

}

50% {

color: coral;

}

60% {

color: green;

}

70% {

color: cyan;

}

80% {

color: DeepPink;

}

90% {

color: DodgerBlue;

}

100% {

color: orange;

}

}

 

then put <span class="donor"> </span> into your group formatting.

Step by step:

1) Go to Customization

2)Click Themes

3)Click Edit HTML and CSS the theme you are using.

4)Click CSS

5)Select custom.css

6)Add the CSS code into this section

7)Go to Groups

8)Select group that you want to apply Rainbow effect

9)In the group formatting, click to Use HTML

10)Add  <span class="donor"> to first textbox

11) Add </span> to second textbox

 

Yes, there is a script version in the forum, but for me, CSS is better than a script for those situations.

Edited by SamCheets
  • Like 1
Link to comment
Share on other sites

  • 10 months later...
On 10/16/2020 at 8:47 AM, SamCheets said:

 

Video by: @sharkgamingph

css


.donor {

animation: rainbow 10s infinite;

}



@keyframes rainbow {

0% {

color: orange;

}

10% {

color: purple;

}

20% {

color: red;

}

30% {

color: CadetBlue;

}

40% {

color: yellow;

}

50% {

color: coral;

}

60% {

color: green;

}

70% {

color: cyan;

}

80% {

color: DeepPink;

}

90% {

color: DodgerBlue;

}

100% {

color: orange;

}

}

 

then put <span class="donor"> </span> into your group formatting.

Step by step:

1) Go to Customization

2)Click Themes

3)Click Edit HTML and CSS the theme you are using.

4)Click CSS

5)Select custom.css

6)Add the CSS code into this section

7)Go to Groups

8)Select group that you want to apply Rainbow effect

9)In the group formatting, click to Use HTML

10)Add  <span class="donor"> to first textbox

11) Add </span> to second textbox

 

Yes, there is a script version in the forum, but for me, CSS is better than a script for those situations.

You can pass the code with the diamond but you have to put it

On 10/16/2020 at 8:47 AM, SamCheets said:

 

Video by: @sharkgamingph

css


.donor {

animation: rainbow 10s infinite;

}



@keyframes rainbow {

0% {

color: orange;

}

10% {

color: purple;

}

20% {

color: red;

}

30% {

color: CadetBlue;

}

40% {

color: yellow;

}

50% {

color: coral;

}

60% {

color: green;

}

70% {

color: cyan;

}

80% {

color: DeepPink;

}

90% {

color: DodgerBlue;

}

100% {

color: orange;

}

}

 

then put <span class="donor"> </span> into your group formatting.

Step by step:

1) Go to Customization

2)Click Themes

3)Click Edit HTML and CSS the theme you are using.

4)Click CSS

5)Select custom.css

6)Add the CSS code into this section

7)Go to Groups

8)Select group that you want to apply Rainbow effect

9)In the group formatting, click to Use HTML

10)Add  <span class="donor"> to first textbox

11) Add </span> to second textbox

 

Yes, there is a script version in the forum, but for me, CSS is better than a script for those situations.

it did not work for me add custom.css and group it did not work for me 4.6

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...