The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to add a rainbow effect to text in site description

4 posters

Go down

In progress How to add a rainbow effect to text in site description

Post by Flappypaddles Wed Sep 21 2016, 20:37

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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Sir. Mayo Thu Sep 22 2016, 01:15

Howdy,

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

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Thu Sep 22 2016, 11:24

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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Ace 1 Thu Sep 22 2016, 18:48

Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Fri Sep 23 2016, 01:29

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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Sir. Mayo Sat Sep 24 2016, 07:46

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 Edit 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
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Ace 1 Mon Sep 26 2016, 02:24

@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
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Mon Sep 26 2016, 17:06

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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Mon Sep 26 2016, 17:20

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 Edit 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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Ape Mon Sep 26 2016, 17:29

You need to be in founders account to use templates.

only founder have that setting.


How to add a rainbow effect to text in site description Left1212How to add a rainbow effect to text in site description Center11How to add a rainbow effect to text in site description Right112
How to add a rainbow effect to text in site description Ape_b110
How to add a rainbow effect to text in site description Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19075
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Mon Sep 26 2016, 19:41

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
Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Tue Sep 27 2016, 01:07

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

How to add a rainbow effect to text in site description Forum_10

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?


Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Ace 1 Wed Sep 28 2016, 21:48

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
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Flappypaddles Wed Sep 28 2016, 21:58

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.



Flappypaddles
Flappypaddles
Forumember

Posts : 261
Reputation : 1
Language : english

http://inaflap.forumotion.co.uk

Back to top Go down

In progress Re: How to add a rainbow effect to text in site description

Post by Sir. Mayo Thu Sep 29 2016, 02:03

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]
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

http://sir-mayo.forumotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum