| Avin ~ παρυηzεΙ ~ Slay | ||||
|---|---|---|---|---|
|
My Blogs:
| |||
| ||||
Okay, this thing on??? Oh Sweet! Hey guys, its Slay again with another how 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!
{| <my beginning of the table>
|- <this tells me that I've started a new row>
|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
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 style="border:3px solid darkblue;" 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!
{|style="border:3px solid darkblue;" <my beginning of the table>
|- <this tells me that I've started a new row>
|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 border-radius:9px; inside of the {|style=". border-radius: 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.
{|style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 align="center" before or after the style="blah". 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 align="left" or align="right"
{|align="center" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 width="70%" in between align="center" and style="blah". 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:
{|align="center" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 style="text-align:center;"| so that style="blah" touches the | that is already there. Then we are going to put text-align:center;. 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"...
{|align="center" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
|style="text-align:center;"|My name is Inigo Montoya! <yay for random text! This is what I want centered>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 color:darkblue; after text-align:center;. 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.
{|align="center" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
|style="text-align:center; color:darkblue;"|My name is Inigo Montoya! <yay for random text!>
|} <then this ends the template>
- This gives us:
| My name is Inigo Montoya! |
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 |- and another |with some text. 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.
{|align="center" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs <my actual heading now I'm putting a ! because this is a Header.>
|- <another new row >
|yay i can link blogs in here!! <my new random text in the lower half >
|} <then this ends the template>
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| yay i can link blogs in here!! |
Still What About the Fill?[]
Now, we're going to make |yay i can link blogs in here!! be: |style="background-color:darkblue; color:#ffffff;"|yay i can link blogs in here!!. 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 color:#FFFFFF; because #FFFFFF equals the color white.
{|align="center" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs <my actual heading now I'm putting a ! because this is a Header.>
|- <another new row >
|style="background-color:darkblue; color:#ffffff;"|yay i can link blogs in here!! <my new random text in the lower half >
|} <then this ends the template>
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| yay i can link blogs in here!! |
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 cellspacing="0px" in between align="center" and width="70%". 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:
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs <my actual heading now I'm putting a ! because this is a Header.>
|- <another new row >
|style="background-color:darkblue; color:#ffffff;"|yay i can link blogs in here!! <my new random text in the lower half >
|} <then this ends the template>
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| yay i can link blogs in here!! |
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 padding-left:35px; and padding-right:35px; and padding-top:10px;. See if you can find where I put the padding in the box below. c:
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;" <my beginning of the table>
|- <this tells me that I've started a new row>
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs <my actual heading now I'm putting a ! because this is a Header.>
|- <another new row >
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px;"|yay i can link blogs in here!! <my new random text in the lower half >
|} <then this ends the template>
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| yay i can link blogs in here!! |
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.
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;"
|-
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs
|-
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px;"|My Blogs:
*[[User_blog:Slayingthehalcyon/The_If_and_the_Switch|The If and the Switch]]
*[[User_blog:Slayingthehalcyon/Adding_Emotes|Adding Emoticons to Your Wiki Chat]]
|}
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| My Blogs: |
Make the Links POP[]
In this part, all that we've done is add a little span tag with some styling. [[User_blog:Slayingthehalcyon/The_If_and_the_Switch|<span style="color:#ffffff;">''The If and the Switch''</span>]], will give us white links. How? You might ask, well after the pipe or | we put <span style="color:#ffffff;"> and this tells the template what color the link will show up as. Then after our desired text, we put a </span> tag. I also added two apostrophes on both sides of my text inside the span tags, this makes the text italicized.
*This gives us:
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;"
|-
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs
|-
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px;"|My Blogs:
*[[User_blog:Slayingthehalcyon/The_If_and_the_Switch|<span style="color:#ffffff;">''The If and the Switch''</span>]]
*[[User_blog:Slayingthehalcyon/Adding_Emotes|<span style="color:#ffffff;">''Adding Emoticons to Your Wiki Chat''</span>]]
|}
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| My Blogs: |
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.
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;"
|-
!style="text-align:center; color:darkblue;"|Slay ~~ Sam's Blogs
|-
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px;"|My Blogs:
*[[User_blog:Slayingthehalcyon/The_If_and_the_Switch|<span style="color:#ffffff;">''The If and the Switch''</span>]]
*[[User_blog:Slayingthehalcyon/Adding_Emotes|<span style="color:#ffffff;">''Adding Emoticons to Your Wiki Chat''</span>]]
|-
!style="text-align:center;"|[[User:Slayingthehalcyon|<span style="color:darkblue;">Slayingthehalcyon</span>]] ~~ [[User blog:Slayingthehalcyon|<span style="color:darkblue;">More Blogs</span>]] ~~ [[Message Wall:Slayingthehalcyon|<span style="color:darkblue;">Message Wall</span>]]
|}
- This gives us:
| Slay ~~ Sam's Blogs |
|---|
| My Blogs: |
| Slayingthehalcyon ~~ More Blogs ~~ Message Wall |
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 <pre> because it will be a lot easier like that!
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;"
|-
!style="text-align:center; color:darkblue;" colspan="3" <COMMENT: we added colspan="3" here because we're going to be adding two new cells below, and we want for this header to span from one side of the bubble to the other.>|Slay ~~ Sam's Blogs
|-
|width="5%"| <COMMENT: This is our first new cell, and we'll give it a width of 5% just for grins and giggles.>
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px;"|My Blogs:
*[[User_blog:Slayingthehalcyon/The_If_and_the_Switch|<span style="color:#ffffff;">''The If and the Switch''</span>]]
*[[User_blog:Slayingthehalcyon/Adding_Emotes|<span style="color:#ffffff;">''Adding Emoticons to Your Wiki Chat''</span>]]
|width="5%"|<COMMENT: This is our second new cell, and we'll also give it a width of 5% just for grins and giggles.>
|-
!style="text-align:center;" colspan="3" <COMMENT: we added colspan="3" here because we added two new cells above this, and we want for this header to span from one side of the bubble to the other.>|[[User:Slayingthehalcyon|<span style="color:darkblue;">Slayingthehalcyon</span>]] ~~ [[User blog:Slayingthehalcyon|<span style="color:darkblue;">More Blogs</span>]] ~~ [[Message Wall:Slayingthehalcyon|<span style="color:darkblue;">Message Wall</span>]]
|}
- This gives us:
| Slay ~~ Sam's Blogs | ||
|---|---|---|
| My Blogs: | ||
| Slayingthehalcyon ~~ More Blogs ~~ Message Wall | ||
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.
{|align="center" cellspacing="0px" width="70%" style="border:3px solid darkblue; border-radius:9px;"
|-
!style="text-align:center; color:darkblue;" colspan="3"|Slay ~~ Sam's Blogs
|-
|width="5%"|
|style="background-color:darkblue; color:#ffffff; padding-left:35px; padding-right:35px; padding-top:10px; border-radius:9px;" <COMMENT: Do you see the border-radius:9px; here?>|My Blogs:
*[[User_blog:Slayingthehalcyon/The_If_and_the_Switch|<span style="color:#ffffff;">''The If and the Switch''</span>]]
*[[User_blog:Slayingthehalcyon/Adding_Emotes|<span style="color:#ffffff;">''Adding Emoticons to Your Wiki Chat''</span>]]
|width="5%"|
|-
!style="text-align:center;" colspan="3"|[[User:Slayingthehalcyon|<span style="color:darkblue;">Slayingthehalcyon</span>]] ~~ [[User blog:Slayingthehalcyon|<span style="color:darkblue;">More Blogs</span>]] ~~ [[Message Wall:Slayingthehalcyon|<span style="color:darkblue;">Message Wall</span>]]
|}
- This gives us:
| Slay ~~ Sam's Blogs | ||
|---|---|---|
| My Blogs: | ||
| Slayingthehalcyon ~~ More Blogs ~~ Message Wall | ||