User blog:MissVoltron/Learn to Code! 👩🏻‍💻

Badges!

I’ll go step by step

1) in the upper right hand corner of your profile Paige there is an add button push that

2) in the “write your page title here” section write Template:thenyourtitle no spaces. Then push Next

3) a big thing will pop up. Scroll to the bottom and select the Non article. Push next

4)you should see an editing page. This is were you code.

I learned how to do this from |SophitzFoster helping me here is what she showed me.

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

"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, like on your badge, you repeat the colors in the opposite order.

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's other ones, but I don't know them. "White", of course, means the color, and you can that with another color term or a hex code. "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.”

I know that was a lot