~~~~~~~~~~~ Need a new TEST FAQ ~~~~~~~~~

[Patrick [ASE]]

Take a look at the current test FAQ, see what sort of things i covered, and come up with a new version.
What i  am particularly interested in is the table area, what ways can it be modified to display in different ways, for instance, i know you can change individual cell border colours and background images and colours
So some examples and a simple guide of how it's done would be great, i will rearrange posts into a single FAQ thread from the best examples.
Post below, one post per example may be best, (border colours in one, backgrounds in another etc) that way i can organise them better

Please put a bold 'title' at the top of the post

[Peter]

All Supported Inline CSS Properties

Requested by a member of staff to post this here.

Am unsure if this is all of them, but it's the ones that don't get removed.  Some might be useless, and some might be missing the shorthand version.

Not sure if there will be an official list of all of them.

---

Example...

Here is some text that has a border around it...

I have a border

How I done it...

[span style="border:1px solid #000;"]I have a border[/span]

Notice the "style" attribute. This is inline CSS, we can use a limited amount of CSS properties to stylise the span element a little more.  These work on other elements as well (i.e div, table...).


Another Example...

Some more text that is styled

How I done it...

[div style="background-color: #EFE0E0; color: blue; text-align: center;"]Some more text that is styled[/div]

---

• background-attachment
• background-color
• background-image
• background-position
• background-repeat
• background
• border-collapse
• border-color
• border-spacing
• border-style
• border-top
• border-right
• border-bottom
• border-left
• border-top-color
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-width
• border-radius
  
• border
• caption-side
• color
• direction
• empty-cells
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font
• height
• letter-spacing
  
• line-height
• list-style
  
• list-style-image
• list-style-position
• list-style-type
• margin-right
• margin-left
• margin-top
• margin-bottom
• margin
• max-height
• max-width
• min-height
• min-width
• outline
  
• outline-color
• outline-style
• padding-top
• padding-right
• padding-bottom
• padding-left
• padding
• table-layout
• text-align
• text-decoration
• text-indent
• text-transform
• vertical-align
• white-space
• width
• word-spacing

[Patrick [ASE]]

Tables and Attributes

Creating tables is easy, just click on the table icon, select how many rows and columns, and whether you want a visible border

Many of the attributes in Peters post above can also be applied.

full width cell for heading etc
Basic cell	red background	red bg, white text	wide column
thick red border	Row 2 column 2	Row 2 column 3	Row 2 column 4
Row 3 column 1	Row 3 column 2	Row 3 column 3	Row 3 column 4

This is the list of cells with the additions shown in red, and edits shown in blue.
Just remember that you need to format correctly with colons and semicolons
ATTRIBUTE:VALUE;
There is no need to leave any spaces
Notice that i have used shortened hex colours preceded by a #, the 3 characters are red, green blue, the higher the hex number for each the lighter that colour is


[td colspan="4" style="border:1px solid #000;padding:0px;"]full width cell for heading etc[/td]
[td style="border:1px solid #000;padding:3px;"]Basic cell[/td]
[td style="border:1px solid #000;padding:3px;background-color:#f00;"]red background[/td]
[td style="border:1px solid #000;padding:3px;background-color:#f00;color:#fff;"]red bg, white text[/td]
[td style="border:1px solid #000;padding:3px;width:200px;"]wide column[/td]
[td style="border:3px solid #f00;padding:3px;"]thick red border[/td]







Visualising a table



start at top left, move towards bottom right, this is the table code relating to the image

[table]
[tr]
[td]CONTENT[/td][td][/color]CONTENT[/td][/color]
[/tr]
[tr][/color]
[td]CONTENT[/td][td][/color]CONTENT[/td][/color]
[/tr][/color]
[/table] [/color]




(i may add more to this post)

[Patrick [ASE]]

Nesting of tags
If you want to use more than one effect, it's important to 'Nest' the tags properly, the image below shows a bolded, italic, and underlined text.



Bolded, Italic, Underlined

easy way to nest tags, click the one you want closest to the word (u for example) then highlight the tags.
now click the next tag button (i), it will surround the first tag, then highlight the line again for more (b)

[Patrick [ASE]]

Posting UBBC
Ever wondered how we post UBBC without it working ?

[noubbc][b]see, it's not bold[/b][/noubbc]

the [br] and [hr] tags are the worst to post, [br] creates a new line (line break), [hr] creates a horizontal line

you can add the bold tags in the middle (go to bbcode click where you want the bold tags and click bold)

[[b][/b]br]