User blog:Ephemeral Hiraeth/Coding a Box

Okay, this thing on??? Oh Sweet! Hey guys, its Slay again with another how to to type blog. In my last blog, I feel like I may have left some users hanging when I added the border and the border radius... So, I've decided its time for a more indepth template making blog!


 * Refer to The If and The Switch for how to use #if: and #switch:
 * I will not be using If or Switch in this template tutorial, I will instead be building a header card for my blogs. That being said, you guys get to buckle your seatbelts, and hold on for the ride, because we're going to hit the code rode! :D Lets get started!

What I Want
What I think I want, is a blue box with a nice curve.... I might even fill the box with the same color as the border, leave part of it transparent, use white font on the background fill..... Woah... Hey guys you caught me deciding what I was going to for my template! c: Once upon a time i got stuck at the thinking part, and I know some of you guys, and girls, are there too! It can be extremely dissapointing to see something in your head, but not be able to produce that look on the computer screen...

A border
First I want to tell wiki to make a table so I'm going to type: {| This tells wikia that I have started a table. Awesome sauce, now we can style our table, but first I always like to make sure I put something random into the table so that I can see what I'm coding around!

Now, I want a dark blue border... So what do I do to the above coding? Well that's the best part! I'm going to add  after my {| so that i have a nice border. The border: tells the template what I'm changing about it. 3px tells template how thick the border should be. Solid tells me what kind of border to put, because I could put quite a few different border types instead of solid. Darkblue tells the template what color the border should be, which can be a color word, a 3 digit #value or a 6 digit #value, such as #D33 or #D2D2D2. The ; tells the template that I'm done changing the border. Be sure that you close border: with a ; otherwise your template won't work!


 * This gives us:

Some Radius For That Border
Okay so now we want some radius to the outside border... That can be a real head scratching problem if you don't know what to do, but don't worry. We're going to use  inside of the. tells the template that we are changing the border, the -radius tells the template what we're changing about the border. Now, if we wanted, we could have used.... 45 px, 92px or even 900px. You can also use em which is another type of space measurement. PX stands for pixel, and you have pixels on your computer screen, so each 1px, is one pixel.


 * This gives us:

A Little Center Goes a Long Way
Okay, now I want to center the table, because it's going to look funny if it's just hanging off to one side... So we're going to put  before or after the. It doesn't really matter where you put it, just as long as it goes on the same line as the. You can also use  or


 * This gives us:

Stretch It Out Man!
Okay... Tiny table is no good, it needs to be wiiiiiidddderrrrr. Well we have another simple solution. What I'm going to do is nest  in between   and. Now the width bit, could be put in before the align portion, or it could be after the style section. I however, like to put the width part in between style and align. c:


 * This gives us:

Centered is Bettered
Woah.... dude center line defense, GO! O.O Are we talking football? Or are we talking coding? Well, either one is fine, because sometimes you want to have something in the center. In this case we want the text centered on the line. So we're going to do something fancy. Right before the text "My name is Inigo Montoya!", we're going to put  so that style="blah" touches the | that is already there. Then we are going to put. The text tells the template that we want to change the text. The -align: tells the template that we want to change the alignment of the text. Center tells the template where we want the text to be aligned to. We could also put left or right. But you know, "Centered is Bettered"...
 * This gives us:

Oh No! My Color is Dull...
Ugh.... Totally didn't get the right lipstick, eyeliner, or nail polish to go with that dress, I looked like a mess! (O.O) For a girl, that's a big, big, biiiig problem, and it can be a big problem for people's eyes when they are reading on the computer screen. Well, in this case, it isn't really a matter of, "GAAAAAAAAH MY EYES ARE ON FIRE I CAN'T READ THIS!!!!!!!" Its merely a, "Oh, I think this color would look much better here. c:" To do such a thing, we're going to go to the area that we want to change to color in, and, since we want to change the color for our random text, we'll put  after. The color: tells the template that we are changing the color, and the darkblue; is just the color that we want the template to display.
 * This gives us:

Needs A Text Area!
Hmmmm.... I might have slipped and fell, because a blog box... needs to have a spot for blogs doesn't it? If you were wondering when I was going to get to that, that's great, because now we can put in another. I'm also going to make the Header, "Slay Sam's Blogs" an actual header. We can do that by making the pipe, or the | on the very left of that row, an exclamation mark.
 * This gives us:

Still What About the Fill?
Now, we're going to make  be:. All that we've done in this is specify that the template should change the background and then -color: tells the template what we want to change about the background. We will then put  because #FFFFFF equals the color white.
 * This gives us:

Who Wants a Box With White Space?
WOAH, hold up, the last box looked kinda dorky with that white space.... it felt so unnatural... Well, we can take care of that pretty quickly! We're going to put  in between   and. The cellspacing is the amount of space in between each cell.... "Slay, hold up! What the heck is a cell?!" You might be saying/asking/demanding. Well, each pipe or exclamation point, starts a new cell when you put it after a |-. With that being said, you might ask, "But you said the amount of space between each cell?", well, you can have more than one pipe or exclamation point in between two |-'s. All we're doing is telling the table to take away all the cellspacing. c:


 * This gives us:

Now What About some Padding?
Okay so now we want padding... Remember how in the last box the white text was right on the border? Well, we're going to fix that by adding  and   and. See if you can find where I put the padding in the box below. c:


 * This gives us:

Now to Link All My Blogs
Now we just add some links! These are links to my current blogs. When we put them in, your eyes will go O.O to o.o to e.e to -.- as you squint and try to focus reading the color of the link against the dark blue background.


 * This gives us:

Make the Links POP
In this part, all that we've done is add a little span tag with some styling. , will give us white links. How? You might ask, well after the pipe or | we put  and this tells the template what color the link will show up as. Then after our desired text, we put a  tag. I also added two apostrophes on both sides of my text inside the span tags, this makes the text italicized.


 * This gives us:
 * This gives us:

Putting in More Links
I'm going to add more links, and it's just the same as before, except I've added a new |- at the bottom, and !style="text-align:center;"| after it, so that I have a header like font area. I'm also going to span tags again, and color the links a darkblue color.


 * This gives us:

Adding More White Space
Okay so we want to have a box "in the center" kinda sorta, well that's pretty easy too! I'll explain this one in the  because it will be a lot easier like that!


 * This gives us:

Adding a Little More Radius
Well... boring boxiness is boring, but good in its place and time. I personally enjoy a little bit of border radius, so we're going to make that center blue box rounded by a few PX.


 * This gives us: