Well, folks, the title pretty much says it all! I wrote some lessons on this thread a while back, and now I've finally gotten around to writing a blog post with them (and a little more). So,,,, here we go.

To create a template page, simply create a page normally and put "Template:" before the name you wish your template to have. (For example, "Template:CatherineFriend.")

So the main tag you're going to use for code is <div>. You can use div tags for background formatting and for text formatting.

The main coding for my friend badge, which I will be using for an example, can be viewed here.

Step 1: Background, Border, Shape, and Spacing

Code section: <div style="background: linear-gradient(to right, white, #EBD3FE, #DFB8FF); border: 10px solid white; border-radius: 15px; padding: 30px;">

Step 1.1: Background

First we'll choose the background colors of your badge.

So, the first decision would be if you want a gradient or a solid color.

If you want your background to be a solid color, simply put the color code after "background:"

"linear-gradient" means ombre, and "to right" means that the colors go right to left in the order you give them. You can replace "to right" with "to left" "to right up" "to left up" "to right down" "to left down" "to bottom" or "to top" (The ones with two directions are diagonal). You can add a lot of colors; just add more with a comma between each like it shows. If you want the colors to be symmetrical, you repeat the colors in the opposite order.

To right



To left



To top



To bottom



To right bottom



To right top



To left bottom



To left top



Once you've decided that, pick your colors. You can use basic color names, or hex codes. https://htmlcolorcodes.com/ is a good resource for finding the colors you want. The code it displays below the color is the hex code you'll need.

Once you have the hex codes/names of every color you want, you can put in your first code. That will look something like this:

<div style="background: linear-gradient(to left bottom, black, white);">

That's the code for the first option I showed.

Once you've done that, hit save and see if you like it! Then you can adjust your direction and colors, and once you're ready, keep going.

Step 1.2: Borders

To change how wide your border is, change the 10 in "10px" to a different number. "Solid" means a solid color, as you could probably guess; you can also put "dashed" or "dotted." I think there are others, but I don't know them. "White", of course, means the color, and you can replace that with another basic color or a hex code.

Step 1.3: Shape and Spacing

"Border-radius: 15px" is what makes it have rounded corners; you would take that out for regular corners. 15px is how far in the corners go (and how round it is); increasing that makes them push in further (thus, making it rounder). Making it 360px would make the shorter sides semicircles.

"padding: 30px" is how much space you have between the text and the border; you can increase that, decrease it, or take it out entirely for no space.

Step 2: Text

Part 1

Code section 1:

Catherine's Badge

So, notably, I have the background div and the text div separate on my badge, mostly because it's easier for me. You can combine them, but it can be a bit tricky.

  • text-align:center is probably pretty obvious. It centers the text. You can also put "right" or "left".
  • color:#EBD3FE is probably also pretty obvious. That's text color. You might see some people with ombre text, but that takes a lot of work. You have to do a separate div tag every time you switch color for that. You'd close your text tag, copy and paste it for the next line, and change the color for that, and repeat.
  • font-size:20px Again, probably pretty intuitive. Just change the number in front of "px" to change the font size. I also used big tags for the header, just so my heading and smaller text coding mirror each other, but I could have just changed that number.
  • line-height:30px That's how much space is between each line of text.
  • font-weight:bold is just a way of bolding text using div tags. Other ways to bold text include '''text''' (three single quotations) and <b>text</b>.
  • font-family:Coiny is the font. Fonts are an extensive topic, but I'll give some basics.

Two tags you can use are <div style="font-family:x">text</div> and <span style="font-family:x">text</span>.

Some of the basic font families you can use are:

  • serif
  • sans-serif (I think this one is the same as regular text.)
  • cursive
  • fantasy
  • monospace

(Those are what appear for each of those inserted under "x".)

These are the ones we've imported:

  • Caveat
  • Bilbo Swash Caps
  • Marck Script
  • Abril Fatface
  • Henny Penny
  • Indie Flower
  • Playfair Display
  • Coming Soon
  • Eater
  • Bellota
  • Sriracha
  • BenchNine
  • Bigelow Rules
  • Almendra Display
  • IM Fell DW Pica
  • Cinzel Decorative
  • Coiny
  • Black Melody
  • Lobster
  • Yeseva One
  • Annie Use Your Telescope
  • The Girl Next Door
  • Josefin Sans Light
  • Modak

There are a variety of fonts built into the platform. A lot are listed here under "Generic font families." Those would be input the same way as the main font families.

  • text-shadow:0px 0px 10px #6A6A6A is the shadow behind the text. The first number is the location of the shadow. For example, changing the first number to 100px would make the shadow do this:
MOVE

and 500px this:

MOVE MORE

The second number is also location; increasing it moves the text downward instead of to the right. Changing it to 10px does this:

SINK

The final number is how far out the shadow stretches, but note that the further you stretch it, the fainter the lines get.

1px:

SHRINK

5px:

SHRINK

10px:

THE SAME

20px:

STRETCH

If you want to stretch the shadow out and have it emphasized, contrasting the shadow color and background helps, as well as contrasting the text and shadow color.

Part 2

Okay, so we've gone over the heading coding and the background coding on my badge. That's actually pretty much it because the regular text code is the same except for the big tags. I also have two "<br>" tags between the paragraphs of my code to break it up. You can just do spaces, but if you use the br tags it preserves the code; if you just leave some lines blank, the code doesn't always copy over to the next paragraph.

And I have "<nowiki>{{CatherineFriend}}" to prevent it from copying my template since I just want the text to show there.

Another way to prevent code from showing is "<pre>" tags; these work slightly differently by showing the code as raw, plain background coding. This is often preferable when you're showing a list of coding, but the reason I haven't used that for the long code bits I've copied from my template is that if the code gets too long on one line, you have to scroll for it.

So if you go on and on like this, continuing to talk for more than a screen shows, it'll start to make you scroll just like this...

But they work well for something like this:

Coding coding
coding coding
coding coding

After that, it's really just the categories. The only thing significant about the categories is the "<noinclude>"</noinclude> tags around them. Those prevent the categories from applying to every page you put the template on.

Conclusion

I hope you found these coding lessons helpful! :)

Community content is available under CC-BY-SA unless otherwise noted.