Back again, I'm here to address some more Tips and Tricks that help you make your blog entries or comments look more impressive and eye-catching. In this particular article, I'm going to elaborate on borders (which was the ending of the last Tips and Tricks); as well as explain how to align your images so that text can 'wrap' around it. Before we get too heavily into the tricks, keep in mind that you're allowed to use any of this as coding is 'free range' (meaning you cannot copyright, trademark, or license any coding/scripting done). If you're having troubles, you can always leave comments and I'll try to assist you in any way possible. If you want to learn more, I'll throw up some links in the next few articles (or in this one) to give you a few directions to learn more on your own.
Borders (Colours and Thickness)
Realistically speaking, I'm not going to go into too much depth as to how to control your borders. There are better resources. But some of the mandatory features that I'm going to address are: Colouring your Borders and Deciding How 'Thick' it is. By thickness, I speak of the thickness of the line that is the border. Thickness can be quite interesting because you can actually 'command' each line of the border (top, right, left, and bottom). Just be weary, the more complicated you try to make it - the longer and harder it will be to 'maintain' your code if you're not used to it at all. So first up: Thickness =)
<style type="text/css">
p.bord
{
border-style: solid;
border-width: 10px
}</style>Â
This part is basically telling the computer that you want to have a border.......somewhere in your article/entry. It'll be 10 pixels thick and it'll be a solid border (might get into that more in a moment or two). You need to make sure it's at the top of the source code (you have to click on "Source Code" when you're writing a blog entry). Now lets say you've decided exactly where you want to add the border and are all ready to use it. This is where you have to do a little more coding (before the text). My personal suggestion is to write the text out first, so that you can find it in the source code; it's easier this way for a novice. But this is how it should look in the text you want in the border.
<p class="bord">Test should be in here, and all happy!</p>Â Â
And it should end up looking just like this. And the border will be rather thick, because it's 10px (pixels). Keep that in mind when you're choosing how thick you want your border.
Next up, should be some colour in your border. Keep in mind that these 'guides' are singular - meaning, you can mix them together, but I won't show you how to do that until the end of the particular 'guide' (for borders). Now lets say you want to add some colour to your border, that's fine and dandy. It's one of those 'unique' kind of things that people like (colour, that is). Once again, at the top there should be something like:
<style="text/css">
p.bordc
{
border-style: solid;
border-color: #CC00FF
}
</style>
This will be the stuff you have at top, just like last time. You'll notice that in border-color, I have strange letters and numbers in there. My best suggestion is to go to Webmonkey to look at all of the color-codes. You have to add the colour exactly as you see it, including the hash (#). If you do not add the hash, it simply will not work very sufficently (and could be rather messy). So now, you need to wrap it around your text (just like the border thickness).
<p class="bordc">This is the stuff you want in the coloured border!</p>
It's not too difficult to get this working properly at all. It might take some tinkering to get things exactly how you want it, but that's the fun of toying with things like this!
So of course, now we have a nice purple border around our text. But what if we wanted to add some more thickness and our fancy color. This isn't much too difficult either, just requires you to add the two factors together. Once again, we need some input code to tell your computer what's going on; it's slightly different because we're telling it to do everything at once. Here you go:
<style="text/css">
p.bordct
{
border: 25px solid #CC00FF
}
</style>
This will give you the same colour as the above border, and an extra thickness. And finally, you need to throw the same type of code around the text that is meant to be in the bordered area!
<p class="p.bordb">This is some groovy looking stuff now isn't it?</p>
This is all for the border part of this section's Tips and Tricks. This isn't to say that's all I'll ever bring up about borders; but, nonetheless, it's time to bid farewell to them for now. =)
Images! (Aligning them using MMOsite GameBlogs' Editor [the easy way])
Several people have wanted to know how I align my images so that text wraps around it. I do it the rather lame/easy way because it can become a hassle trying to code it individually. The way I do it, with tables, allows me to also put a small bit of text underneath of them. We'll break this up into steps, considering there's really only two of them... hehe.
Step One: Opening up the Table Window...
Be sure that before you open it up, you've given yourself enough space to put your image (either to the right or to the left). I normally make sure I've written a paragraph or two, so it doesn't look too "right there" and in your face kind of thing - but it's up to you, as you're the creative writer that's pulling together the review/preview/article..whichever. So you open it up and you'll have yourself the beginning of Step Two.
Step Two: Aligning where you want your table!
By choosing the alignment, it's where your image is going to be aligned as well. Personally, I use 2 Rows and 1 Column (this is so that I can give a description). The other options, you can play with. Spacing and Padding will stop your table from being cramped up. Border size will give it a nice white border around it (you can use HTML/Javascript to change the colour of the border, but not necessary right now).
Now that you have your table open, you just put your cursor inside of one of the rows and click the "picture" button (which you should already know how to do by now). There you go! There's your image aligned to whichever side you want it to. To type around it, you just click outside of the table and start typing. Pretty simple and easy to follow.
Thank you for checking out this week's Tips and Tricks. Thanks to CesarSuki for some of the correcting in my previous blog; as my old tags were.......were, obsolete (literally!). So everyone, go out and have fun with what you've learnt this week.
