The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to add a rainbow effect to text in site description

View previous topic View next topic Go down

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

Post by Flappypaddles on September 21st 2016, 7:37 pm

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
Forumember

Posts : 202
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 on September 22nd 2016, 12:15 am

Howdy,

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

Sir. Mayo
Forumember

Male Posts : 963
Reputation : 85
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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 on September 22nd 2016, 10:24 am

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

Posts : 202
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 on September 22nd 2016, 5:48 pm


Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

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

Post by Flappypaddles on September 23rd 2016, 12:29 am

cant seem to get them to work with firefox

Flappypaddles
Forumember

Posts : 202
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 on September 24th 2016, 6:46 am

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
Forumember

Male Posts : 963
Reputation : 85
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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 on September 26th 2016, 1:24 am

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

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

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

Post by Flappypaddles on September 26th 2016, 4:06 pm

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

Posts : 202
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 on September 26th 2016, 4:20 pm

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

Posts : 202
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 on September 26th 2016, 4:29 pm

You need to be in founders account to use templates.

only founder have that setting.





APE
Manager
Manager

Male Posts : 8342
Reputation : 720
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 on September 26th 2016, 6:41 pm

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

Posts : 202
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 on September 27th 2016, 12:07 am

@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?



Flappypaddles
Forumember

Posts : 202
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 on September 28th 2016, 8:48 pm

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
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

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

Post by Flappypaddles on September 28th 2016, 8:58 pm

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

Posts : 202
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 on September 29th 2016, 1:03 am

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
Forumember

Male Posts : 963
Reputation : 85
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

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

Back to top Go down

View previous topic View next topic Back to top


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