PDA

View Full Version : BB Code Enhancements - Rainbow BBCode


Yuseki
16 Jan 2017, 14:39
Title:
Rainbow Text

BB Code Tag Name
rainbow

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

Example:
text

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 noypiscripter for suggestion on custom css/span class

Mark.B
17 Jan 2017, 18:39
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
17 Jan 2017, 20:00
That would be better, but I do not have access to server files, only admincp.

Thanks for the advice.

Dragonsys
17 Jan 2017, 20:25
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
18 Jan 2017, 01:01
Or via Sitebuilder > Style > CSS Editor

Yuseki
18 Jan 2017, 21:36
ohhhh durr.. had a blond moment

noypiscripter
18 Jan 2017, 23:11
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
18 Jan 2017, 23:49
Thanks. I'll add that.

mbgelsin
18 Feb 2017, 18:34
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
18 Feb 2017, 21:02
Glad you got it to work. Enjoy the gorgeous rainbows.