Introduction to UBBC Some of you may have noticed that Paper Parade's code is a little different than most other forum sites.This is an introduction to our tags and features and how they work.Each tag has a set of commands indicated between ;'s that can be both added or left out of it's parent tag.FONT STYLE at its simplest, will look like this:[font style=""]
To include size in the font tag, the simple version will look like this:[font size="" style=""]
Right now there are two sub-tags that can be placed within the quotation marks.[font style="text-shadow:1px 0px 0px #ffffff;opacity:.5;"] The text-shadow one will add a shadow to your text. The numbers represent how many pixels wide it is in three different directions and the hex value can be changed to any color code.
EXAMPLE
[font style="text-shadow:1px 0px 0px #ffffff;opacity:.5;"] The opacity tag will allow you to dictate how see-through the word is. .5 would be equal to 50%.
EXAMPLE
TABLE STYLE These tags can replace the ones that simply look like this:
[table]
Though with sub-tags, they will look like this:
[table style=""]
[table style="background-color:#000000;"] This one is simple enough; change the hex code to whatever color you want and that is the color your table will take on.
TD STYLE These are for individual table cells, and you can do a lot with them.
This is what they look like plain:
[td]
And styled:
[td style=""]
[td style="border: 1px solid #ffffff; padding: 3px;"] These tags change what the border of the table cell looks like. To have no border, you can make it 0px, or make it wider to however many pixels you want. "Solid" can be replaced with other command words, such as dotted or dashed. Again, any hex value can be added to make the border any color you want.
[td style="border: 1px solid #ffffff; padding: 3px;"] Padding refers to how close the cell content is from the top border of the table.
DIV STYLE The div tags are probably the most fun and complicated to play around with. They can do quite a lot of things, but need to be manually added as opposed to replacing a plain tag as all the ones above.
[div style="background-color:#ffffff;opacity:.5;padding-right:10px;padding-left:10px;border:5px solid #000000;border-image:none;background-image:url('none')width:100px;height:50px;overflow:auto;padding-top:5px;padding-bottom:5px;border-radius:0px;"] It has many of the same features as the above, but it affects anything within the div tags. We've already seen these first few, so let's talk about the rest.
[div style="border-image:none;background-image:url('none');width:100px;height:50px;overflow:auto;padding-top:5px;padding-bottom:5px;border-radius:0px;"] Assuming you have your border thickness set to 1 or more pixels, this tag will allow you to replace the solid color with any image; just replace "none" with the direct URL.
[div style="border-image:none;background-image:url('none');width:100px;height:50px;overflow:auto;padding-top:5px;padding-bottom:5px;border-radius:0px;"] This does the same thing as above and whatever direct URL you replace the "none"with will become the background for anything within the div tags. If you prefer a solid color, this also works with the "background color" sub-tag.
[div style="border-image:none;background-image:url('none');width:100px;height:50px;overflow:auto;padding-top:5px;padding-bottom:5px;border-radius:0px;"] These two are pretty self-explanatory. They will provide a fixed width so text and other content cannot stretch beyond these dimensions. Also works with tables and table cells.
[div style="border-image:none;background-image:url('none');width:100px;height:50px;overflow:auto;padding-top:5px;padding-bottom:5px;border-radius:0px;"] This one is a little more interesting. It will create a scrollbox that, with the addition of other sub-tags, can have a fixed size, border, and background. Otherwise it will stretch and appear transparent.
SCROLL
BAR
WORDS
IMAGE STYLE These are tags you can use to manipulate images without having to use an outside program.
Normally, simply to add an image, the code would look like this:
[img src=""]
[img src="URLHERE" style="border:5px solid #ffffff;border-radius:100px;margin-bottom:0px;"] Again, some of these we have seen before.
[img src="URLHERE" style="border:5px solid #ffffff;border-radius:100px;"] For this to work, the image must be square. The value should be equal to the height/width of the image for it to become a full circle. If you make the value less, it will curve the corners of any image.