Sometimes it’s hard to get other people’s attention when you post on the Shack’s forums, hosted by VoyForums. All of the posts look the same: plain with no pop, so why not make them jump out at you?! It’s difficult not to notice a post that has a different coloured background or text or use of different types of media, such as videos and images. Best of all, it only takes a few extra minutes to make your post different from everyone else’s. All you need to know is a little HTML and CSS. If you don’t know either, keep reading and I’ll teach you some super-handy basics to experiment with.
Here’s some basic HTML tags:
<b>The “b” tags on either end of your text will make everything inside it bold.</b> Now, if you switch that “b” for an “i” <i>you will get italic fonts.</i> After “i” comes “u”, <u>and this will give all of your text an underline.</u> Another fun tag that you could use is “s”, called the strikethrough. <s>Switch that “u” for an “s” and that underline will appear right through the middle of your text!</s> That’s especially handy when you want to be silly and display your mistakes, even if they aren’t really mistakes!
The important thing to remember is to never, ever, ever forget to close your HTML tags. Example: </b>. You always start an HTML tag with “<>“ and close with “</>“.
Here’s what we’ve gone through so far:
Bold text: <b></b>
Italic text: <i></i>
Underlined text: <u></u>
Strikethrough text: <s></s>
Now that you know the super-easy basics, let’s show you how to play with your fonts, using the <div style> tag. For those of you who are already familiar with HTML and wondering why I’m not using the <font> tag: the <div style> tag allows you to do more without adding extra HTML tags to your post. Remember that VoyForums only allows so many tags and links per post. We must use them sparingly.
The basic “div” tag looks like this: <div></div>. By adding the “style” attribute after the first “div” tag (like so: <div style>), you are telling the browser that everything between the <div></div> tags will be displayed in the same style. Here’s a quick example:
<div style=“font-family: Arial;”>
By adding the = sign “font-family:” and then the semicolon between the quotations, we are telling the browser that the style we want will be a font. In this case, we have chosen Arial.</div>
We can take this further and increase the size:
<div style=“font-family: Arial; font-size: 36px;”>Everything between these tags will be in an Arial font and size 36px (pixels) text.</div>
<div style= “font-family: Arial; font-size: 36px; font-weight: bold;”>When I add the “font-weight” tag, I can make everything between the div tags bold as well.</div>
Remember that the colon opens the tag style and the semicolon ends it.
So <div style=“font-family: Arial”> without the semicolon after “Arial” will not work, especially if you plan on adding another attribute after the font family, like:
<div style=“font-family: Arial; font-size: 36px;”>
Never, ever, ever forget the colon and semicolon!
Now that you’ve mastered basic styling, let’s work on our background colour!
Still using the <div style> tag, let’s change our post’s background colour from boring old white, to something a little easier on the eyes.
<div style=“background: #f9f9f9;”></div>
Everything between this tag will have a background colour of a slightly off-white, or light gray, which makes it less straining on the eyes when someone is reading a longer post. However, you can use whatever colour you want. Simply follow this link to find the right colour for your post:
Much like changing the background colour, you can also change the colour of your text, which might be a good idea if you choose a dark background. To do this, simply add the “color” attribute after the “background” attribute:
<div style=“background: #000000; color: #FFFFFF;”>
Now that you’ve picked your background colour and played with the text color, how about making the width of the used space a little smaller? For anyone who reads the posts on a widescreen monitor, there’s often a long line of text on the screen that can make it awkward for people to read, especially on those really huge 24 inch monitors. Could you imagine trying to follow a thick paragraph on such a large monitor? It would probably frustrate you and make you less-likely to read through the entire post. By setting the width, you can make everyone’s reading experience exactly the same. If you think about it, I’m using the same reasoning as you would when adding a paragraph. It really sucks to read a huge block of text. You lose your place very easily. The same goes for really long lines of text.
Through some research, I’ve found that a good width to use is 850 pixels, as this size will fit even the really old and much smaller square monitors. So let’s try it out!
<div style= “background: #f9f9f9; width: 850px;”></div>
That’s it! Now your text will be stuck in an invisible container that is exactly 850 pixels wide and have a nice off-white background. How considerate are you?!
How about alignment? It’s a well-known fact that VoyForums likes to squish their text right along the left-most edge of the screen. I don’t know about you folks, but I find this distracting. The side of my monitor is black, so when I read a post that has text right up against the side of my browser, I keep losing where I am. You can fix this problem quickly and easily by using the margin attribute.
<div style=“background: #f9f9f9; width: 850px; margin: 0 auto;”></div>
Simple, right? This will centre your invisible container to the center of the screen without centering the text within the container. The zero means that the top and bottom of your post do not have a margin, and the “auto” means that the left and right margins are automatically aligned based on the available space on either side of your container. This will display your invisible box evenly from the left and right side of your browser window, regardless of what size your monitor is. In turn, making your readers’ experience exactly the same. But there’s tons more you can do with the margin attribute if you don’t like it positioned in the centre. For instance, if you would prefer your container to appear about an inch or so away from the left side of the browser window, you can use this:
<div style=“background: #f9f9f9; width: 850px; margin-left: 50px;”></div>
By changing the “margin” attribute to “margin-left”, you can control how far your invisible container will appear from the left side of the browser window. In this example I chose 50 pixels, but you can choose whatever you like. For more information on the margin attribute check out this link:
Another cool trick you can add to your post is the “padding” attribute. This is quite similar to the “margin” attribute you just learned. The difference is that “padding” works on the inside of your invisible container, whereas the “margin” attribute works on the outside. This is particularly useful if you’re using a different background colour than the default white used on VoyForums.
<div style=“background: #f9f9f9; width: 850px; margin: 0 auto; padding: 20px;”></div>
What I’ve done is added 20 pixels of space on the inside of my container. It’s kind of like adding a second invisible container (or box) inside your original container. In this example, I chose 20 pixels. This means that the top, right, bottom and left sides of the container will have 20 pixels of space between the 850 pixel box and the content of your post, like images and text and videos.
To learn more about the padding attribute, check out this link:
For added effect let’s round our container’s edges. Because not all browsers are the same (like Firefox, Chrome and Explorer, for example) you need to use 3 separate attributes that do exactly the same thing, but for different browsers.
-moz-border-radius: is for Firefox
-webkit-border-radius: is for web kit enabled browsers, like Chrome and Opera
border-radius: is the basic attribute, and works on Explorer
Here’s how you use it:
<div style=“background: #f9f9f9; width: 850px; margin: 0 auto; padding: 20px; border: 2px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;”></div>
The hardest part about this effect is making sure all three border radiuses have the same number of pixels, otherwise it will look different from browser to browser. Five pixels is a subtle curve on all four corners. You can make the curve bigger if you like, but be careful. If you make the radius of your corners too large it will interfere with your post. Remember, we’re trying to improve your reader’s experience, not annoy them… unless that’s the point of your post, of course.
Like all the other attributes you’ve just read about, there’s much more that you can do with the border-radius, like curving on 1, 2 or 3 corners, instead of all four, for example. To learn more, check out this link:
If you want to decorate your container a little more, you might consider playing with the border of your container by using the “border” attribute.
<div style=“background: #f9f9f9; width: 850px; margin: 0 auto; padding: 20px; border: 2px solid #000;”></div>
What I’ve done here is added a black line that will outline the edge of my 850 pixel container. Here’s how it works: border= “border-thickness border-style border-colour”
After the “border:” attribute is typed into your tag, you start with how many pixels thick you would like your border to be. After that is the border style, to which you have a treasure chest of options: solid, dotted, dashed, double, groove, ridge, inset and outset. To learn more about what all of these are, follow this link:
Lastly, here are a few handy HTML tags that you can use, as well as others that you don’t have to use on VoyForums.
The image tag:
<img src= “Image URL here” />
Note: There is no closing tag! The image tag is all-inclusive. Simply place your “/” before the ending “>“.
To make sure the link you’re using is an image link and not a link to a web page, make sure it ends with: .jpg, .jpeg, .png, or .gif – these are the most common image types that are supported on VoyForums.
In the image tag, “img” stands for “image” and “src” stands for “source”.
Another useful attribute that you can use with your image is to give it a title, like so:
<img src=“Image URL here”
title=“The Best Image!” />
By adding the “title” attribute, whenever someone hovers their cursor (mouse pointer) over the image, the text written in the “title” attribute will be displayed in a small box. This is handy if you have included a link to a larger image around the image tag. In that case, your “title” would be something like “Click here for a larger image!”
If you would like to include the larger image, simply add the link around your image tag, like so:
<a href=“Larger image URL here”> <img src=“Image URL here” title=“Click here for larger image!” /></a>
If you don’t want to upload two sizes of your image, you can use the same one for both by adding a width to your image size. This is perfect for really large images:
<img src=“Image URL here” title=“Click here for larger image!” width=“200px” />
You can choose whatever size you like. But the width attribute, in this case, would be to make sure it’s not too large for the forum. By adding the same image URL to the <a href=““></a> tag, when someone clicks on the image in your post, it will take them to the full sized image.
Another considerate thing you can do when providing links within your posts is to have them open in another tab or window. Best of all, this is really easy to do! All you need to do is add: target=“_blank” to your tag, like this:
<a href=“Link here” target=“_blank”> </a>
Now, when someone clicks the link, they won’t be taken away from the forum and lose their place. Instead, it will open in a new tab or window.
If you’re a fan of articles, then you’re going to love this! Did you know that you can make your images and videos, or even separate blocks of text, like quotes, appear in a separate part of your post? The usefulness of doing this would be to have your added media off to one side without interrupting the flow of your main text.
This is done by using the “float” attribute within your <div style> tag, like so:
<div style=“float: left”></div> or
<div style=“float: right;”></div>
Using the “float” attribute will allow you to display, for example, an image on the left or right side and still have your main text beside it. The “float” attribute will allow your main body of text to wrap around the image without wasting any space. For example:
There is a slight setback with the use of the float attribute, which is that your main text will butt-up right along its side. You can correct this by adding a margin to your floated attribute, just like this:
<div style=“float: left; margin: 15px;”><img src= “image url here” /> </div>
Doing this will give a 15 pixel margin on all four sides of your image, giving some space between your image and the main text. If you prefer not to have a margin on the left side of your image that touches the edge of your container, do the following:
<div style=“float: left; margin: 15px 15px 15px 0;”></div>
Margin elements are arranged like this:
Margin: Top Right Bottom Left;
So whatever number you put first is the top margin, the second number is the right margin, the third is the bottom, and the fourth is the left margin. If you would like the top and bottom margins the same as well as the left and right margins, you only have to use two numbers, just like this:
Margin: 10px 20px; Where 10px represents the Top and Bottom margins, and 20px represents the left and right.
In turn, if you want all margins set at the same size, you only have to use one number: margin: 20px;
The browser automatically repeats the given numbers, so if there’s one number, it uses the same number for all four sides. If there’s two numbers, it will duplicate the numbers in the same order as you wrote them:
You write: margin: 10px 20px;
The browser reads it as: margin 10px 20px 10px 20px; (margin: Top Right Bottom Left;) The same goes for the padding attribute: padding: Top Right Bottom Left
Two HTML tags that you do not have to use in your posts at VoyForums are the <br /> tag and the <p></p> tags. The <br /> tag is a line break. It is used on HTML web pages to break a paragraph or provide space between two elements, like an image and text, for example. The <p></p> tags are to identify individual paragraphs, which is useful if you’re creating an HTML web page of your own, and especially useful if you would like your paragraphs to be indented on the first line of each paragraph (use of extra CSS is required to do this). The thing is, VoyForums automatically adds these tags for you. When you add them yourself, you’re wasting the limited amount of HTML tags that you’re allowed to use in a post. So drop them and pretend they don’t exist when playing with Voy, unless you want to add the indent in your paragraphs or something.
Here’s quick list of the maximum amount of tags you’re allowed on VoyForums before being detected as SPAM:
Images: 4-12 (sometimes Voy is moody)
Videos: …I got up to 10 and then quit the test!
Although VoyForums does allow you to post so many videos, never, ever, ever post more than 2 as a main message. It really slows down the forum’s loading time and can even cripple others who have slow Internet connections. Let’s be considerate. If you’re posting more than two videos, try to share them in a reply to the initial post.
HTML tags (div, b, u, i, s, etc…) are connected with the amount of characters allowed per post.
So now that you know the secrets behind the powers of VoyForums, go out and use them! Make your posts pretty, wonderful, and original! Have fun with them and challenge others to do the same. More importantly, though, take a moment and reply to someone else’s masterpiece. Chances are strong that they put just as much thought into their post as you have with yours.