Post by Isa The Great on May 5, 2011 12:52:11 GMT -5
[/font][/size]Proboards Enhanced Tables off up a new way to create fun templates for around the site, in much similar fashion that DOHTML does for invsionfree users. Here I will go over what I have personally learned about the new Enhanced Tables and even walk you through a fairly simple how-to for the Enhanced tables by walking you through how to make a simple Enhanced tables. I will also be giving a few examples of Enhanced Table templates that have been posted up on caution by caution members. In order to view the contents at caution, you must be a member. Here is where the caution staff have put all the Enhanced Tables for Proboards made by their members, so feel free to look through whats been made so far. I would like to say I am still new at this, so there are a few things I know but can't really explain for lack of being able to understand it 100% myself. However, you'll still be able to learn how to create what we are doing, and hopefully use this how-to in your future creations.
Below is the Enhanced Tables that we will be creating today. As you can see, it appears to be a very simple layout, but even the simplest layouts take a lot of work to complete. I am not saying this to scare you off, just to give fair warning, and part to make a few understand why giving credit to the maker is extremely important. You should hit preview after every step, and possibly several times during the step. Preview is your best friend when it comes to coding templates!
| [atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2] FIRST MIDDLE LAST ,  [tr] FIRST MIDDLE LAST . DISNEY SPIRIT . AGE . Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships! |
[/font][/size]STEP ONE ,
[atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2]
So first we will start out with the background of the entire table. First we'll make the actual table part of the code, and a key to keeping everything aligned right? We'll be centering everything! You'll notice that I'll be putting stars between a few [ ]'s, this is because I do not want to post in code because I will be bolding things and coloring a few things to help us out along the way.
[*center][*table][*tr][*td][*atrb=style, background-color: #c1b58d;,true][*atrb=width,460,true][atrb=border,0,true][*atrb=cellSpacing,0,true][*atrb=cellPadding,10,true][cs=2]
[*/td][*/tr][*/table][*/center]
RED the actual table that the entire coding goes inside is with in these first few lines of the code. [ table ] [ tr ] [ td ] is actually creating the table that everything is being placed inside. [ /td ] [ /tr ] [ /table] is closing the table so that it doesn't go on and on forever and half.
BLUE Now I can't tell you what atrb stands for, but I can say tell you that it covers everything inside of the table. [*atrb=style, background-color: #c1b58d;,true] is where your getting the tan-brownish looking background from. The color I used is in bold. You can use any color that you would like, however the color needs to be in CSS. If you don't know how to find colors, or if you don't have a program like gimp or photoshop, then a good site to obtain CSS colors is Color Blender.
GREEN This controls the width of the entire template, as well as if you would like to add a boarder on the outside. [*atrb=width,460,true][atrb=border,0,true] In bold are the numbers that you can change. The first bolded one is for the width of the entire template. I suggest not going more then 500 because then it does start to stretch the skin out. The second bolded number, which is 0, is the border that goes around the template. It currently has no border, but if you pick numbers, I would suggest between 1-5, it will add a border. You can control the border color, however I will not be going over this here.
ORANGE This controls how far apart the inside of the template is from the walls of the template. [*atrb=cellSpacing,0,true][*atrb=cellPadding,10,true]. I just playing with the numbers in bold to learn a little bit more about how they work and figure out what you like the best. For the purposes of this template, they are set to 0 and 10
[/font][/size]STEP TWO ,
[atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2] FIRST MIDDLE LAST ,
Step two in this example is the text that says FIRST MIDDLE LAST , This is a bit easier than step one in that you can play with everything, can take things out, can add things etc.. Text is extremely important to a template, and how that text looks even more so. Again we are going to center this part of the code. Everything gets centered after all! You will be sticking this code inside of the table that you just made. Italics is everything that we have already worked on previously. In bold is everything we are working on right now. You do not want the spaces that I have put into the coding or else it will not work for you. Again, this is to show you the code without putting it in [ code ] [ /code ]
[ center ]
[ table ][ tr ][ td ][ atrb=style, background-color: #c1b58d;,true ][ atrb=width,460,true ][ atrb=border,0,true ][ atrb=cellSpacing,0,true ][ atrb=cellPadding,10,true ][ cs=2 ]
[ CENTER ][ style=width: 449px; font-family: georgia; font-size: 35px; letter-spacing: -2px; color: #5b8f9e; text-align: center; text-shadow: #565859 2px 1px 1px; padding-top: -10px; line-height: -12px; height: 24px; ]FIRST MIDDLE LAST ,[ /style ][ /CENTER ]
[ /td ][ /tr ] [ /table ][ /center ]
RED: In red this time is everything that controls the text. From the width that the text can span ( width: 449px; ), - to the font of the text ( font-family:georgia ), the size ( font-size: 35px; ), the letter spacing ( letter-spacing: -2px ) the color that the text will appear ( color: #5b8f9e ), how the text will align ( text-align: center; ), the text shadow which controls the color of the shadow and how visible it is ( text-shadow: #565859 2px 1px 1px; ) , how far from the top the text can appear ( padding-top: -10px; ) the line height of the text- how far each line is from the last text - ( line-height: -12px ) and the height of where the text can span too ( height: 24px; ). [ / style ] Closes the text.
If you have noticed at the end of each individual code controling things, we have put a ; this is to seperate that code from the new code. Without ; , the code will not work as it should.
BLUE: blue is the text that is being controled by the red. You can put anything you would like there.
I suggest playing with the text code to see what you like and what you don't like. It will teach you a whole letter better then I personally could, since every style is different.
[/font][/size]STEP THREE,
[atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2] FIRST MIDDLE LAST ,
Another fairly easy step. This time we are adding the image to the code. The size of the image you should use is 450px (w) x 200px (h). Now, the code in italics is the coding we have already gone over, and the coding in bold is what we will be going over in step three. Again we will be centering this code, everything needs to be centered.
[ center ]
[ table ][ tr ][ td ][ atrb=style, background-color: #c1b58d;,true ][ atrb=width,460,true ][ atrb=border,0,true ][ atrb=cellSpacing,0,true ][ atrb=cellPadding,10,true ][ cs=2 ]
[ CENTER ][ style=width: 449px; font-family: georgia; font-size: 35px; letter-spacing: -2px; color: #5b8f9e; text-align: center; text-shadow: #565859 2px 1px 1px; padding-top: -10px; line-height: -12px; height: 24px; ]FIRST MIDDLE LAST ,[ /style ][ /CENTER ]
[ center ][ style=width:450px; height: 200px; text-align:right; ][ IMG ]http://i52.tinypic.com/htwfgo.jpg[ /IMG ][ /style ][ /center ]
[ /td ][ /tr ] [ /table ][ /center ]
GREEN] This controls the size of the area the image is going to go in, as well as ( should there be any ) where the text would appear inside the image. You can ingnore the text alignment as we will not be using it in the part of the code. [ style=width:450px; height: 200px;text-align:right; ] You should be concerned with the width and the height. The width is set to 450px and the height 200px. The width should not be set to the same size as the width of the entire template, and neither should the height for that matter. You can mess around with the bolded numbers, but remember if you are using the same sizes as the rest of this template ours is set to 450px and 200px. [ /style ] closes the box with the image.
ORANGE: this is the actual image that you want to show up. Like in normal postings, you will need to use [ IMG ] [ / IMG ]
[/td][/tr][/table][/center]STEP FOUR ,
[atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2] FIRST MIDDLE LAST ,
[tr]
FIRST MIDDLE LAST . DISNEY SPIRIT . AGE .
Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships!
This is the last leg of the template, the plain box with text inside thats underneath the image. Having learned from the previous steps, this shouldn't be hard as you should recongize what most of the codings do, at least a little bit. The code in italics is what we've been over previously, the bold is what we are going to be going over now.
[ center ]
[ table ][ tr ][ td ][ atrb=style, background-color: #c1b58d;,true ][ atrb=width,460,true ][ atrb=border,0,true ][ atrb=cellSpacing,0,true ][ atrb=cellPadding,10,true ][ cs=2 ]
[ CENTER ][ style=width: 449px; font-family: georgia; font-size: 35px; letter-spacing: -2px; color: #5b8f9e; text-align: center; text-shadow: #565859 2px 1px 1px; padding-top: -10px; line-height: -12px; height: 24px; ]FIRST MIDDLE LAST ,[ /style ][ /CENTER ]
[ center ][ style=width:450px; height: 200px; text-align:right; ][ IMG ]http://i52.tinypic.com/htwfgo.jpg[ /IMG ][ /style ][ /center ]
[ tr ][ center ][ style=width: 450px; background-color: #d4d0d1; text-transformation: lowercase; font-family: georgia; font-size: 10px; letter-spacing: 2px; color: #ababab; text-align: center; ]
FIRST MIDDLE LAST . DISNEY SPIRIT . AGE .
Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships!
[ /style ][ /center ][ /td ][ /tr ]
[ /td ][ /tr ] [ /table ][ /center ]
RED: In red, like in step one, is helping us create a table, this time it is inside of the template. [ / td ] [ /tr ] [ /table ] Is closing out all of the mini tables we created previously. It is very important that these go in the exact order that has been given, or else it wont come out correctly.
BLUE this controls the width of the box ( width: 450px ), the background color ( background-color: #d4d0d1; ) the font of the text ( font-family: georgia; ) the font size ( font-size: 10px; ) the letter spacing ( letter-spacing 2px ) the color of the text ( color: #ababab; ) and the alignment of the text ( text-align: center ). Feel free to mess around with any of these settings to see what you like the best! [ / style ] Closes this portion of the box
GREEN In green is the actual text that you type that you want to appear in the box. You can type anything that you would like here.
[/blockquote][/blockquote][/font][/size]
[/td][/tr][/table][/center]STEP FIVE,
[atrb=style, background-color: #c1b58d;,true][atrb=width,460,true][atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,10,true][cs=2] FIRST MIDDLE LAST ,
[tr]
FIRST MIDDLE LAST . DISNEY SPIRIT . AGE .
Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships!
There is no more actual code to teach in this step for this template, however there are few last things I would like to add to your knowledge. First is when you press enter between each line of code, it puts a break line between what you are creating, so that things aren't touching or sometimes not even close. While in some cases this is alright, I know templates look nice when things are close, or even touching. So if you want one code to touch another code, make sure there is no break between them in the actual coding. I hope that made sense. Another thing I wanted to go over, again is the importance of ; Make sure you put ; at the end of things such as : width: 449px; font-family: georgia; so on and so forth. Alright so now we're going to get rid of a few of those breaks that you may be seeing in your template. Italics is everything broken down as we were making it, and the bold is how things should look in the coding:
[ center ]
[ table ][ tr ][ td ][ atrb=style, background-color: #c1b58d;,true ][ atrb=width,460,true ][ atrb=border,0,true ][ atrb=cellSpacing,0,true ][ atrb=cellPadding,10,true ][ cs=2 ]
[ CENTER ][ style=width: 449px; font-family: georgia; font-size: 35px; letter-spacing: -2px; color: #5b8f9e; text-align: center; text-shadow: #565859 2px 1px 1px; padding-top: -10px; line-height: -12px; height: 24px; ]FIRST MIDDLE LAST ,[ /style ][ /CENTER ]
[ center ][ style=width:450px; height: 200px; text-align:right; ][ IMG ]http://i52.tinypic.com/htwfgo.jpg[ /IMG ][ /style ][ /center ]
[ tr][ center ][ style=width: 450px; background-color: #d4d0d1; text-transformation: lowercase; font-family: georgia; font-size: 10px; letter-spacing: 2px; color: #ababab; text-align: center; ]
FIRST MIDDLE LAST . DISNEY SPIRIT . AGE .
Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships!
[ /style ][ /center ][ /td ][ /tr ]
[ /td ][ /tr ] [ /table ][ /center ]
[ center ]
[ table ][ tr ][ td ][ atrb=style, background-color: #c1b58d;,true ][ atrb=width,460,true ][ atrb=border,0,true ][ atrb=cellSpacing,0,true ][ atrb=cellPadding,10,true ][ cs=2 ]
[ CENTER ][ style=width: 449px; font-family: georgia; font-size: 35px; letter-spacing: -2px; color: #5b8f9e; text-align: center; text-shadow: #565859 2px 1px 1px; padding-top: -10px; line-height: -12px; height: 24px; ]FIRST MIDDLE LAST ,[ /style ][ /CENTER ]
[ center ][ style=width:450px; height: 200px; text-align:right; ][ IMG ]http://i52.tinypic.com/htwfgo.jpg[ /IMG ][ /style ][ /center ]
[ tr][ center ][ style=width: 450px; background-color: #d4d0d1; text-transformation: lowercase; font-family: georgia; font-size: 10px; letter-spacing: 2px; color: #ababab; text-align: center; ]
FIRST MIDDLE LAST . DISNEY SPIRIT . AGE .
Please post your ideas for our character's relationship together. Remember, I adore drama and I adore all sorts of relationships!
[ /style ][ /center ][ /td ][ /tr ][ /td ][ /tr ] [ /table ][ /center ][/size][/b]
And now we are done! I hope this has been helpful to everyone! If you have any questions, comments, concerns, advice on anything mentioned please feel free to post below, or send me a private message.
This are a few examples from Caution that I thought you might like to look at
ONE , TWO , THREE , FOUR .
[/blockquote][/blockquote][/font][/size]