Show off your Guild colors

Looking to show off your guild with their colors? If you're not super familiar with CSS, you can follow this short tutorial on how to add the color to your text! If you are familiar with CSS, feel free to just copy the codes below, and then ctrl+f to find your guild name and copy your colors!

+ Create your class in CSS

In your style.css file (or your .css file, if you named it something different), add the code below to the bottom of the document:

.guildname {
    background-clip: text;
    background-image: linear-gradient(20deg, COLORSHERE);
    color: transparent;
}

Change the .guildname class selector to the guild name you joined (you can also abbriviate it, like .ft for Fairy Tail). Be sure to keep the period in front of the name!

Once you've changed that, change the COLORSHERE text to the colors you want by copying and pasting the hex codes below for the guild you joined. You're done with your .css file, you can move on to the next step!

+ Add your HTML

In your index page (or whichever page you want to add the link to), add the following HTML to where you want your guild mark to show up:

<a target="_blank" href="https://guild.uncharted-sky.org">Nakama</a> \\ <span class="guildname">YourGuildHere</span>

Once you've pasted that where you want it, change the class="guildname" text to the class selector you named in your .css file. For example, if you named your class selector .fairytail, you would change the class in the HTML to class="fairytail".

That's all there is to it — you should now have a fancy gradient to your text! You can play around with the text and css as much as you'd like to fit your website! If you have any questions, feel free to contact me!