To replicate 8chan's rainbow text in XenForo, you will need to create a custom BBCode that adds a looping CSS animation to the text. This can be done by using a linear gradient and CSS animation properties.
Step 1: Create the custom BBCode
Log in to your XenForo Admin Control Panel.
Navigate to Content > BBCodes.
Click Add BBCode.
Enter the following details for the new BBCode:
BBCode tag: RAINBOW
Title: Rainbow Text
Replacement mode: Simple replacement
HTML replacement:
html
<span class="rainbow-text">{text}</span>
Use option: No
Example usage: [RAINBOW]Your text here[/RAINBOW]
Description: Rainbow colored text similar to 8chan.
Display on toolbar: Yes (check this box to add a toolbar button for it)
Save the new BBCode.
Step 2: Add the CSS
Next, you need to add the CSS code that defines the rainbow animation.
In the Admin Control Panel, go to Appearance > Styles.
Select the style you want to edit.
Navigate to Style properties > Extra.less.
Add the following CSS code to the bottom of the extra.less template:
css
.rainbow-text {
background-image: linear-gradient(
90deg,
#ff0000,
#ff7f00,
#ffff00,
#00ff00,
#0000ff,
#4b0082,
#9400d3
);
background-size: 400% 100%;
animation: rainbow_animation 5s infinite;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes rainbow_animation {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
Save the changes.
Step 3: Use the new BBCode
After saving, the new BBCode is ready to use.
When creating or editing a post, either click the new Rainbow Text button in the toolbar or manually type the tags around your text.
The format will be [RAINBOW]Your text here[/RAINBOW].
When you publish the post, the text will have the animated rainbow effect.
(profile or page)
(Personal Only)
