BB Code Enhancements - Rainbow BBCode

Title:

Rainbow Text

BB Code Tag Name

rainbow

Replacement:

<span class="rainbow">{param}</span>

Example:

[rainbow]text[/rainbow]

Description:

Makes your text display in a rainbow gradient.

Options
Use {option}: No
Button Image:
Remove Tag if Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: No
Disable Automatic Link Parsing Within This BB Code: Yes


Add this to your Custom CSS[SiteBuilder>Style>CSS
Or AdminCP>Styles>Style Manager>{style}>Edit Templates>CSS Templates>css_additional.css:

.rainbow {
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

Thanks to [name]noypiscripter[/name] for suggestion on custom css/span class

[Mark.B]

Would be better to stick the css in the css_additional.css template, so you don't have style tags getting inserted wherever the code is used.

[Yuseki]

That would be better, but I do not have access to server files, only admincp.

Thanks for the advice.

[Dragonsys]

Originally Posted by Yuseki

That would be better, but I do not have access to server files, only admincp.

Thanks for the advice.

editing the addtional.css is performed via AdminCP. It is under the Style Editor

[noypiscripter]

Or via Sitebuilder > Style > CSS Editor

[Yuseki]

ohhhh durr.. had a blond moment

[noypiscripter]

I suggest you use this replacement in the custom BBCode. Do not use custom tag <rainbow> as IE (especially older versions) may or may not like it.

<span class="rainbow">{param}</span>

Then add the below custom CSS in css_additional template in AdminCP or via Sitebuilder > Style > CSS Editor:

.rainbow {
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

[Yuseki]

Thanks. I'll add that.

[mbgelsin]

I am unable to edit the css_additional.css for a theme because it is inherited by the default theme, yet the bbcode won't work. Any thoughts?

resolved: I had to open the style editor > css before I was able to make changes.

[Yuseki]

Glad you got it to work. Enjoy the gorgeous rainbows.