Staff CSS/HTML/JS Guide

CSS is extremely easy, it's basically just a copy and paste language. Same with HTML and JS to an extent too.

Anyways, this page serves as a guide to many of the MediaWiki features on the wiki.

User Fonts
You should apply the codes in this section in this page. Make sure to stick by the organization and format of the page.

Solid User Color
In order to give yourself or someone else a user color, just copy and paste the code below and make sure to fill in required parameters. a[href$="/(Enter Username here)"], a[href$=":(Enter Username here)"], a[href$="/wiki/Special:UserProfileActivity/(Enter Username here)?tab=posts"] { color: (enter hex code here) !important; font-weight: bold; }

Solid Gradient User Color
In order to give yourself or someone else a gradient user color, just copy and paste the code below and make sure to fill in required parameters. a[href$="/(Enter Username here)"], a[href$=":(Enter Username here)"], a[href$="/wiki/Special:UserProfileActivity/(Enter Username here)?tab=posts"] { background-image: -webkit-linear-gradient(left, (enter 1st hex code here) 0%, (enter 2nd hex code here) 25%,   (enter 3rd hex code here) 50%, (enter 4th hex code here) 75%, (enter 5th hex code here) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: (enter 1st hex code here); /* Fallback color for non-webkit browsers */ white-space: nowrap; }

Animated Gradient User Color
a[href$=":(Enter Username here)"], a[href$="/(Enter Username here)"], a[href$="/wiki/Special:UserProfileActivity/(Enter Username here)?tab=posts"] { background-image: -webkit-gradient(linear, left top, right top, color-stop(0, (enter 1st hex code here)), color-stop(0.25, (enter 2nd hex code here)), color-stop(0.5, (enter 3rd hex code here)), color-stop(0.75, (enter 4th hex code here)), color-stop(1, (enter 5th hex code here))); background-image: -webkit-linear-gradient(left, (enter 1st hex code here) 0%, (enter 2nd hex code here) 25%, (enter 3rd hex code here) 50%, (enter 4th hex code here) 75%, (enter 5th hex code here) 100%); background-size: 1000% 1000%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: Text-(name of graident font) 4s infinite; color: (enter 1st hex code here); /* Fallback color for non-webkit browsers */ white-space: nowrap; font-weight:bold !important; }

How to make a gradient font
To create a gradient font effect you can use the CSS  and   properties along with the   function. Here's an example: /* CSS */

.gradient-text {

background: linear-gradient(to right, #ff00cc, #00b3e6);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

In the above example, we create a CSS class called  and apply it to the element where you want the gradient font effect. We set the background to a linear gradient that transitions from  to. The  property allows the background gradient to show only where the text is rendered. The  property makes the text transparent so that the gradient background becomes visible through the text.

Please note that the  and   properties require the   prefix for compatibility with some browsers, such as Safari. It's a good idea to include the prefixed versions alongside the standard property names to ensure broader browser support.

Creating Templates
https://community.fandom.com/wiki/Help:Templates#Copying_and_updating_templates

User blog:Opheuchus/Template Help

ImportJS + Other CSS stuff from the FANDOM DEV Wiki
ImportJS is really easy to implement. Simply, just go to the Fandom Developers Wiki and find just an extension that looks cool and add it to this page.