How to add a rainbow effect to text in site description

I would like to add a rainbow effect to some text in my site description.
http://inaflap.forumotion.co.uk

I would like the following text to be rainbow coloured

Oderint Dum Metuant

It was working but stopped when I had to remove some java script to get the mobile version to work properly.

I do not want to do it by individually changing each letters colour as I replace that text from time to time

Howdy,

What is your forum type?
Would you be willing to edit your templates?
Sir. Mayo

Sir. Mayo wrote:Howdy,

What is your forum type?
Would you be willing to edit your templates?
Sir. Mayo

phpbb3
yes of course happy to edit them

Sweet site that helped me make rainbow text.

https://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

Ace 1 wrote:Sweet site that helped me make rainbow text.

https://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

cant seem to get them to work with firefox

Howdy,

Still working on a script for you should have it done in a few hours, ill edit THIS post when its done!


Thanks,

Sir. Mayo

Edit:

Hello,

For Starters we will need to edit the overall_header template it can be found in ACP>Display>Templates>General
Then press the icon across from it.
You now want to go down to line 258 ( may be higher may be lower)
find and remove the following line

Code:

 <p>{switch_desc.SITE_DESCRIPTION}</p>

Replace it with this:

Code:

<div class="wrapper">
  <svg  width="350" height="25">
    <defs>
        <linearGradient id="rainbowGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>
     
        <pattern id="rainbow"
                patternUnits="userSpaceOnUse"
                width="200" height="200"
                viewbox="0 0 200 200">
          <rect width="200" height="200"
                  fill="url(#rainbowGradient)"/>
        </pattern>
      </defs>
 
    <text x="0" y="50%" style="fill: url(#rainbow);">Mesage here</text>
  </svg>
</div>

Now each time you want to change the message youll have to edit the templae!
Please let me know if you have any questions

@Flappypaddles You could also do this.

AP > Display > Colors > CSS Stylesheet

Add this code:

Code:

.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;
}

And since you have this wrapping your title

Code:

<span class="rainbow"></span>

it should work.

Ace 1 wrote:@Flappypaddles You could also do this.

AP > Display > Colors > CSS Stylesheet

Add this code:

Code:

.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;
}

And since you have this wrapping your title

Code:

<span class="rainbow"></span>

it should work.

I've tried this and the text just disappears in firefox and chrome

Sir. Mayo wrote:Howdy,

Still working on a script for you should have it done in a few hours, ill edit THIS post when its done!


Thanks,

Sir. Mayo

Edit:

Hello,

For Starters we will need to edit the overall_header template it can be found in ACP>Display>Templates>General
Then press the icon across from it.
You now want to go down to line 258 ( may be higher may be lower)
find and remove the following line

Code:

 <p>{switch_desc.SITE_DESCRIPTION}</p>

Replace it with this:

Code:

<div class="wrapper">
  <svg  width="350" height="25">
    <defs>
        <linearGradient id="rainbowGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
          <stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
          <stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
          <stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
          <stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
          <stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
          <stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
          <stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
          <stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
          <stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
          <stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
        </linearGradient>
     
        <pattern id="rainbow"
                patternUnits="userSpaceOnUse"
                width="200" height="200"
                viewbox="0 0 200 200">
          <rect width="200" height="200"
                  fill="url(#rainbowGradient)"/>
        </pattern>
      </defs>
 
    <text x="0" y="50%" style="fill: url(#rainbow);">Mesage here</text>
  </svg>
</div>

Now each time you want to change the message youll have to edit the templae!
Please let me know if you have any questions

ok my first question is where do I find the template to edit. It does not seem to equate to what I have in the display section

You need to be in founders account to use templates.

only founder have that setting.

APE wrote:You need to be in founders account to use templates.

only founder have that setting.

ok I will swop over and report back

APE wrote:You need to be in founders account to use templates.

only founder have that setting.

tried that and it certainly does put it into a rainbow, but I perhaps should have been more explicit in what I wanted
my description is made up of 2 parts
a line left aligned in a small font and a larger second line centre aligned which I wanted in rainbow.
the font is Monotype Corsiva



the part in red is what I want to be in rainbow.
currently I have it done via the CSS.
but the rainbow part does not work now for some reason


I presume the text written in the admin page for the header gets overwritten by that bit of code?

Oh, that's why. The version of Firefox that you're using probably disallows the

Code: background-clip

property. The CSS I gave you works fine in Chrome and Safari.

So editing the templates is your only approach.

Ace 1 wrote:Oh, that's why. The version of Firefox that you're using probably disallows the

Code: background-clip

property. The CSS I gave you works fine in Chrome and Safari.

So editing the templates is your only approach.

I have the latest version of firefox and chrome and I couldn't get it to work in chrome either, although I could highlight it whilst invisible in chrome, but not in firefox.

the annoying thing is until recently it was working fine although I am not sure if it was with css or java script as I have/had both and I did it so long ago I forgot which I did it with.

Can you paste your the following in a reply please:

1) your CSS style sheet

2) a screenshot of your javascript panel ( the one that lists how many scripts you have installed)

3) your overall_header template

please use the code tags when pasting

Code:

 [code] Code here [/code]