|
Post by Kula Hula Kimmie on Oct 24, 2010 18:58:59 GMT -5
Hello there. I'm Kimmie. Today, I will be helping you, yes you, understand how to make tables in UBBC coding format. Why? So you leave the cbox complaining to me! That's my department my fellow members. I don't enjoy competition.
Ari, our local coding frenzy admin, will be assisting also.
Please remember that if you go to "reply" to make your posts (instead of using the quick reply) there is an Enhanced Table Tags section that will be your friend. Use it wisely.
We will start with simple tables and work our way up.
|
|
|
Post by Kula Hula Kimmie on Oct 24, 2010 19:00:31 GMT -5
Two Column [table][tr] [td]COLUMN ONE[/td] [td]COLUMN TWO[/td] [/tr][/table]
Two Three Columns +COLUMN ONE | COLUMN TWO | COLUMN THREE |
What do you do to add a column you ask? Why you add this code to the equation. [td]COLUMN[/td]
|
|
|
Post by Kula Hula Kimmie on Oct 24, 2010 19:06:35 GMT -5
Two Rows [table] [tr][td]ROW ONE[/td][/tr] [tr][td]ROW TWO[/td][/tr] [/table]
More Than Two RowsHow did I do this? Why I added this code into the mix! [tr][td]ROW[/td][/tr]
|
|
|
Post by Kula Hula Kimmie on Oct 24, 2010 19:13:30 GMT -5
Two Columns Two RowsLook at you getting all fancy. ROW ONE, COLUMN ONE | ROW ONE, COLUMN TWO | ROW TWO, COLUMN ONE | ROW TWO, COLUMN TWO |
[table] [tr][td]ROW ONE, COLUMN ONE[/td] [td]ROW ONE, COLUMN TWO[/td][/tr] [tr][td]ROW TWO, COLUMN ONE[/td] [td]ROW TWO, COLUMN TWO[/td][/tr] [/table]
Three Columns and Two RowsROW ONE, COLUMN ONE | ROW ONE, COLUMN TWO | ROW ONE, COLUMN THREE | ROW TWO, COLUMN ONE | ROW TWO, COLUMN TWO | ROW TWO, COLUMN THREE |
[table] [tr][td]ROW ONE, COLUMN ONE[/td] [td]ROW ONE, COLUMN TWO[/td] [td]ROW ONE, COLUMN THREE[/td][/tr] [tr][td]ROW TWO, COLUMN ONE[/td] [td]ROW TWO, COLUMN TWO[/td] [td]ROW TWO, COLUMN THREE[/td][/tr] [/table]
Two Columns Three RowsROW ONE, COLUMN ONE | ROW ONE, COLUMN TWO | ROW TWO, COLUMN ONE | ROW TWO, COLUMN TWO | ROW THREE, COLUMN ONE | ROW THREE, COLUMN TWO |
[table] [tr][td]ROW ONE, COLUMN ONE[/td] [td]ROW ONE, COLUMN TWO[/td][/tr] [tr][td]ROW TWO, COLUMN ONE[/td] [td]ROW TWO, COLUMN TWO[/td][/tr] [tr][td]ROW THREE, COLUMN ONE[/td] [td]ROW THREE, COLUMN TWO[/td][/tr] [/table]
How did I do these? Why I followed the codes from before! Everything falls upon the basics. Master those and you have a firm foundation on which to build and progress on.
|
|
ヽ(´▽`)/
SAMERRA
Arionne's willing love slave[M:-2599:0:0:]
Posts: 866
|
Post by ヽ(´▽`)/ on Oct 24, 2010 19:16:19 GMT -5
ROW ONE, COLUMN ONE | ROW ONE, COLUMN TWO | ROW TWO, COLUMN ONE | ROW TWO, COLUMN TWO |
[table] [tr] [td] ROW ONE, COLUMN ONE [/td] [td] ROW ONE, COLUMN TWO [/td] [/tr] [tr] [td] ROW TWO, COLUMN ONE [/td] [td] ROW TWO, COLUMN TWO [/td] [/tr] [/table] Moral of the story: tabbing your codes for tables = good. [/li][li] Number of columns in each row have to be the same, unless you want to venture in more complex tables
|
|
ヽ(´▽`)/
SAMERRA
Arionne's willing love slave[M:-2599:0:0:]
Posts: 866
|
Post by ヽ(´▽`)/ on Oct 24, 2010 19:27:25 GMT -5
Enhanced Table Tags: This was added to the forum by our dear F. How to use? --> click on the 'reply' button Under the 'add tags' and above the smiley list, there is an option for enhanced table tags. (omfg i know eh?) ONE
| TWO
| [cs=2]this is a colspan [*cs=2] |
ONE
| [rs=2]this is a rowspan [*rs=2] | TWO
|
[th]this is a header. Kind of like colspan, but less headache since you don't need to count how many columns you're spanning | ONE | TWO | THREE |
[table] [tr] [td]ONE [/td] [td]TWO [/td] [/tr] [tr] [td][cs=2]this is a colspan [/td] [/tr][/table]
[table] [tr] [td]ONE [/td] [td][rs=2]this is a rowspan [/td] [/tr] [tr] [td]TWO [/td] [/tr][/table]
[table] [tr] [td][th]this is a header. [/td] [/tr] [tr] [td]ONE [/td] [td]TWO [/td] [td]THREE [/td] [/tr][/table]
There's also bg color, if you want to make it spiffy. And if you get really good, there's an [*atrb=], which can further customize your table. If you want to know how to use those... googleplz.
|
|
|
Post by Kula Hula Kimmie on Oct 24, 2010 19:56:17 GMT -5
Since Ari interrupted meI'll continue on from where Ari left off. Though heed her words. Google = friendBackground color[bg=black] OMFG the background is black | [bg=black] Is this magic? | [bg=black] No! It's UBBC coding silly |
Do your remember the Enhanced Table Tags I mentioned in my first post? The section that Ari also mentioned. Well guess what! It has a background color section all ready to go for you to use! [bg=white]
That is all you need. Change "white" to what you want. Add font color to make it nice and presto! You don't even need to mess with an ending code! Are you getting an error when trying to use this code? Please remember that the code must be between the [*td] and [*/td] tags.
|
|
|
Post by Kula Hula Kimmie on Oct 24, 2010 20:12:30 GMT -5
No borders[atrb=border,0,true][th]HEADERHEADER | ONE | TWO |
You dislike borders as much as I do? Well problem solved! [atrb=border,0,true]
Just like the last code you don't need an ending tag. However, once again, the code must be placed between a [*td] and [*/td] tag line. This will get rid of the borders for the whole table set so you don't have to worry about. Adding colors to the different sections, which you learned the post before, will help tell apart the sections. [atrb=border,0,true][th][bg=cc3333]HEADERHEADER | [bg=ffcc00]ONE | [bg=lightblue]TWO |
|
|
|
Post by freeziepop on Feb 16, 2011 11:39:55 GMT -5
So you wanna code a template?If you don't know what you're doing, making one out of plain CSS is the easiest to do. We have a style code here that'll allow (almost) all valid css. [ style=ATTRIBUTE: VALUE] text to be formatted [/style ] Remove the spaces. What can you do with this? Well, anything! [ style=width: 250px; font-style: tahoma; color: #000000; background-color: #ffffff; text-align: center; font-size: 10px;] text to be formatted [/style] text to be formatted You can find valid css tags here. Not all of them work and not all of them are relevant to this site or making templates, but you can play around with them as you wish. ========= You can combine tables with CSS to create magical things~! [ table][ tr][ td][ atrb=width,500,true][ atrb=cellspacing,0,true][ atrb=border,0,true][ atrb=background,http://i170.photobucket.com/albums/u247/reesix/vaaa/vintage-scarlet.gif][ atrb=cellpadding,5,true][ style=width: 200px; padding: 5px; border: 5px solid #ffffff; background-color: #FFFA65; color: #000000; font-face: tahoma; font-size: 10px; text-align: justify; float: right;] RIGHT SIDE TEXT[/style] [ style=width: 200px; padding: 5px; border: 5px solid #ffffff; background-color: #FFFA65; color: #000000; font-face: tahoma; font-size: 10px; text-align: justify; float: left;] LEFT SIDE TEXT [/style][/td][/tr][/table] [atrb=width,500,true][atrb=cellspacing,0,true][atrb=border,0,true][atrb=background,http://i170.photobucket.com/albums/u247/reesix/vaaa/vintage-scarlet.gif][atrb=cellpadding,5,true] RIGHT SIDE TEXT LEFT SIDE TEXT |
You can add images and all sorts of fun things. If you have a better grasp on tables you can play with those and align things vertically. Playing with line-height on the css can give some fun effects, too. Just mess around with it, the colours, the styles, everything and I'm sure you guys can make something you really really like!
|
|
|
Post by freeziepop on Feb 16, 2011 11:43:17 GMT -5
ORIGINALLY POSTED BY REB Soo, I noticed a digimon link in the advertisements and while looking around, I found a color chart here. I loved it, so I wanted to share it here with everyone. AntiquewhiteAquaAquamarineAzureBeigeBisqueBlackBlanchedalmondBlueBluevioletBrownBurlywoodCadetblueChartreuseChocolateCoralCornflowerblueCornsilkCrimsonCyanDarkblueDarkcyanDarkgoldenrodDarkgrayDarkgreenDarkkhakiDarkmagentaDarkolivegreenDarkorangeDarkorchidDarkredDarksalmonDarkseagreenDarkslateblueDarkslategrayDarkturquoiseDarkvioletDeeppinkDeepskyblueDimgrayDodgerblueFirebrickFloralwhiteForestgreenFuchsiaGainsboroGhostwhiteGoldGoldenrodGrayGreenGreenyellowHoneydewHotpinkIndianredIndigoIvoryKhakiLavenderLavenderblushLawngreenLemonchiffonLightblueLightcoralLightcyanLightgoldenrodyellowLightgreenLightgrayLightpinkLightsalmonLightseagreenLightskyblueLightsteelblueLightyellowLimeLimegreenLinenMagentaMaroonMediumaquamarineMediumblueMediumorchidMediumpurpleMediumseagreenMediumslateblueMediumspringgreenMediumturquoiseMediumvioletredMidnightblueMintcreamMistyroseMoccasinNavajowhiteNavyOldlaceOliveOrangeOrangeredOrchidPalegoldenrodPalegreenPaleturquoisePalevioletredPapayawhipPeachpuffPeruPinkPlumPowderbluePurpleRedRosybrownRoyalblueSaddlebrownSalmonSandybrownSeagreenSeashellSiennaSilverSkyblueSlateblueSlategraySnowSpringgreenSteelblueTanTealThistleTomatoTurquoiseVioletWheatWhiteWhitesmokeYellowYellowgreenTada~~ (Please tell me if this is stealing and I'll remove the post.)
|
|
|
Post by airceltrai on Feb 16, 2011 12:39:09 GMT -5
If it's alright for me to add this...
You can also come up with a color yourself, by using the #RRGGBB codde.
0-9 are themselves. A- 10 B- 11 C- 12 D- 13 E-14 F-15
Each color are a 2-character system. The first character is how many times 16 is multiplied by, while the second character is the remainder that you add on.
I'll use FF1EA0.
FF, 15 x 16 = 240 + 15 =255, pure red. 1E, 1 x 16 = 16 + 14 = 30. Darker green A0 10 x 16 = 160 + 0 = 160. medium blue.
The resulting values are the RGB color numbers. The only necessary thing to know, is 255 is the highest you can go. Any higher it becomes 3-characters.
This is the resulting color from FF1EA0
|
|
|
Post by Dracken on Mar 13, 2011 12:17:17 GMT -5
So I was surfing around and BAM I found a chart with Hex codes Click this OKit has a list of colors by warm, cold, greens, blah blah blah.... HAVE FUN
|
|
|
Post by freeziepop on Mar 13, 2011 12:40:18 GMT -5
|
|
★ CRAYOLA BBY !
BROKEN SEAL
you can either calm down or i can pop you in the mouth
Posts: 104
|
Post by ★ CRAYOLA BBY ! on Apr 18, 2011 22:01:14 GMT -5
Okay, so some of you know about the enhanced table tags, but I don't know how many will know about the style tags! So, I'm here to give you guys a rundown on how things work! I wanted to be helpful. >U
THESE ARE THE BASICS. That means there are more stuffs out there that I was just too lazy to add.
First off, if you don't really got it down, you can go to Caution and check out their doHTML templates! You have to have an account, but they have a lot of nice things so it's worth it! What I tell you here will help you to convert it.
In Proboards, the tags start with [*style=] and then ends with [/style*] Listed below are some things that the style=. Just be sure to remember you DO NOT NEED " anywhere in your style. It messes up the code. Some of these you'll just have to play with to get the hang of, as they're hard to explain.
remember: style: type; It always has to be the colon and then the semicolon.
width: ###px; how wide your style is going to be. creates a box.
If you want your style centered, you can just use the center tags like you normally would.
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! It'll leave a bunch of space till you hit it.
background-color: #color; color of the background.
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background. How fancy is that?
border: ###px solid #color; if you want a border. solid, dotted, dashed
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that?
padding: ###px; how close you want your text to the sides of your box.
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that? Now it's 3 pixels away from the edge of the box. PADDING GOES AT THE END.
overflow: auto; if you want it to scroll. You need a height tag in there for this to work. ARIONNE'S NOTE: You are asked not to use it in your actual roleplay posts <3 Proudly display your text, guys~
height: ###px; how high you want your style.
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that? Now it's 3 pixels away from the edge of the box. PADDING GOES AT THE END. Once we hit 150 pixels in height, our text will start to scroll!
background-image: url(IMAGE HERE); a background image.
background-position: alignment; where you want the image aligned. not really needed.
background-repeat: no-repeat; if you want it to repeat or not. not needed if you want it to repeat. It'll do it automatically.
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that? Now it's 3 pixels away from the edge of the box. PADDING GOES AT THE END. Once we hit 150 pixels in height, our text will start to scroll! Look at that fancy background.
-moz-border-radius: 15 0 15 0px; use this if you want the corner curved.
-webkit-border-radius: 10px 10px 0px 0px; same as above, usually only used with the moz-border
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that? Now it's 3 pixels away from the edge of the box. PADDING GOES AT THE END. Once we hit 150 pixels in height, our text will start to scroll! Look at that fancy background And now the corners are curved! These codes you'll have to play with to get it right.
margin-left: ###px; how far you want it from the margin. Replace "left" with "top" "bottom" or "right" as well. Or just have an all-around margin with margin: ###px;
see? it'll be forced down after a while because it's only 200 pixels (px) wide. It'll just keep getting forced to a new line as you keep typing! And now it has a white background and a black border. How fancy is that? Now it's 3 pixels away from the edge of the box. PADDING GOES AT THE END. Once we hit 150 pixels in height, our text will start to scroll! Look at that fancy background And now the corners are curved! These codes you'll have to play with to get it right. And now look! It's been moved over.
font-family: font; the kind of font you want to use.
and now for some fancy fonts! GEORGIA
font-size: ###px; how big you want the font
and now for some fancy fonts! GEORGIA
color: #color; the color you want your font. comes after the font styles.
and now for some fancy fonts! GEORGIA
text-align: alignment; how you want it. centered, left, right, justified.
and now for some fancy fonts! GEORGIA
text-transform: caps; if you want your text forced uppercase or lowercase.
and now for some fancy fonts! GEORGIA
text-shadow: #color 1px 1px 0px; if you want your text to have a shadow (sometimes hard to see. px is distance and spread and size)
and now for some fancy fonts! GEORGIA
letter-spacing: ###px; how far apart you want your letters.
and now for some fancy fonts! GEORGIA
font-style: style; do you want it underlined, italic, or strikethrough font-weight: bold; if you want your text bold
and now for some fancy fonts! GEORGIA
|
|