[Origin Cave]

You can post table codes that you've made for others to use, free of price! Try to make them simple and easy to edit for ease of access. If you use any tables from this thread and there's a credit at the bottom, please leave it! This div is the maximum width tables can be - 600px.

I will be posting a series of animal avatar-table sets, feel free to use! (:

1. DEER SET

Code:

http://i58.tinypic.com/abkty0.png

You can change the font and speech colours.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "ullamco laboris nisi ut aliquip" ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<center><div style="background-color: #6C9B4A; background-image: url('http://i59.tinypic.com/ir807k.png'); background-position: center bottom; background-repeat: no-repeat; padding: 10px 20px 250px 20px; width: 440px; text-align: justify; color: #000">

Words. <span style="color:#fff"><b>"Speech."</b></span>

</div></center>

2. COATI SET

Code:

http://i57.tinypic.com/2cp4az8.png

You can change the font and speech colours.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "ullamco laboris nisi ut aliquip" ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<center><div style="background-color: #DCDAD4; background-image: url('http://i60.tinypic.com/2coh99t.png'); background-position: center bottom; background-repeat: no-repeat; padding: 10px 20px 440px 20px; width: 440px; text-align: justify; color: #000">

Words. <span style="color:#fff"><b>"Speech."</b></span>

</div></center>

3. SHEEP SET

Code:

http://i61.tinypic.com/2m5o5zr.png

You can change the font and speech colours.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "ullamco laboris nisi ut aliquip" ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<center><div style="background-color: #CFB284; background-image: url('http://i60.tinypic.com/euftb4.png'); background-position: center bottom; background-repeat: no-repeat; padding: 10px 20px 400px 20px; width: 440px; text-align: justify; color: #000">

Words. <span style="color:#fff"><b>"Speech"</b></span>
</div></center>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

table coded by banshee | for free use!

Code:

<center><div style="border-top:10px solid #COLOR; border-left: 10px solid #COLOR; border-right:20px solid #COLOR; border-bottom:20px solid #COLOR; background-image:url('link to a seamless pattern here'); width:500px; padding:50px;"><div style="padding:25px; text-align:justify; background-color:#COLOR; color:#COLOR; line-height:19px;">PUT YOUR POST HERE, BABE!</div></div><span style="font-family:times; font-variant:small-caps;"><b>table coded by banshee | for free use!</b></span></center>

here's an extremely simple table for when you have no idea how coding or style tags work and you want a place to start i guess idk

the table is 500 pixels wide, so unless your image is tiled you'll want to make sure it's that wide otherwise it probably won't look right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Speech looks like this."
Thoughts look like this.

tags: here
notes: here

coding by wulf for template purposes

Code:

<div style="width:460px; margin:auto; text-align:justify; padding:20px 20px 20px; background-image:url('URL GOES HERE change 'no-repeat' to 'repeat' if you have a tiling background'); background-repeat:no-repeat; background-color:#a1c4e0; color:#000000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span style="color:#ffffff;font-weight:bold;">"Speech looks like this."</span>
<i>Thoughts look like this.</i>

<b>tags: </b>here
<b>notes: </b>here</div><div style="width:500px;text-align:center;margin:auto;font-size:90%;">credits here (if applicable)</div>

extra table (with a second text box, if you have trouble seeing through the background image you picked)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Speech looks like this."
Thoughts look like this.

tags: here
notes: here

coding by wulf for template purposes

Code:

<div style="width:460px; margin:auto; text-align:justify; padding:20px 20px 20px; background-image:url('URL GOES HERE change 'no-repeat' to 'repeat' if you have a tiling background'); background-repeat:no-repeat; background-color:#a1c4e0; color:black;"><div style="background-color: rgba(255, 255, 255, 0.8); padding:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span style="color:#4e91a2;font-weight:bold;">"Speech looks like this."</span>
<i>Thoughts look like this.</i>

<b>tags: </b>here
<b>notes: </b>here</div></div><div style="width:500px;text-align:center;margin:auto;font-size:90%;">coding by wulf for template purposes</div>

notes

• if you want to add a background image, or a header image, put it in the background-image element between the brackets, ex. background-img:url('image url ending with .jpg, .png, or .gif here')
• background-color controls the color of the background, and the color element controls text color.
• the padding (the space between the text and the edge of the table) is made so you can edit it in case you add a header image, the order is top, left & right, bottom. so for example if you add a header image that is 300 pixels high you'll want to change the first padding input to at last 300px so your text doesn't cover up the header
• in the second table, if you don't want a transparent text box, replace background-color: rgba(255, 255, 255, 0.8); with background-color:#COLOR-YOU-WANT;. you can also change the transparency level of this box by changing 0.8 to anything from 0.1-1.0

feel free to edit as much as you like, and use this html color picker for hex codes if you want, to change the colors. no need to credit me if you edit it past recognition, this table is pretty simple. but feel free to do so if you don't, so others can use the template as well!

rohan

I WAS LIGHTNING BEFORE THE THUNDER

who do you think you are, dreamin' 'bout being a big star

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta gravida odio, a lobortis augue pellentesque sed. Cras congue est eu molestie sagittis. Aliquam congue, felis vel condimentum fermentum, enim nisi imperdiet libero, a cursus dui est non mauris. Vivamus augue nulla, pellentesque eget laoreet a, dignissim sed metus.

"Maecenas viverra lectus pellentesque lacus maximus viverra. Aliquam erat volutpat." Duis vitae varius nibh. Fusce mollis nec augue a elementum. Aliquam tempus est eros, nec tempus diam vehicula sit amet. Morbi dictum posuere tortor sed ullamcorper. Sed pretium purus id gravida finibus. Vestibulum euismod eleifend magna eget interdum. Praesent vel felis facilisis, pharetra nunc at, pharetra urna. Integer vel suscipit lacus. Sed ut feugiat tortor. Curabitur dolor nulla, facilisis non risus ac, ullamcorper vehicula eros.

Replace "NAME" with YOUR CHARACTER'S name!

(add a number after it if you use the code more than once for a different table, that way they don't overwrite each other, such as NAME, NAME1, and then NAME2.) You only have to post the style tags once per page. So for example, you would paste the whole code in your first post, but until you reach a next page in the thread, you only have to post replies with the HTML.

Pick out a cool font for your text at Google Fonts! Replace the link at the very beginning of the code with the one it gives you when you've picked one out, and also the font-family code wherever you want to change it to your new font.

NAMEpic — The picture for your table. The height is currently 300px, but feel free to change it.
— the order for the BG string is: background: color url('') position/size repeat(no-repeat/repeat-y/repeat-x/repeat);
— position/size work like: X% Y%/#pxOR% -- the X and Y percents are how far over or down you want the image to look, and the size is scaling the image to fit better for you, if you want. You can omit one or both of these if you want either default.
NAMEn — This class is for styling your character's name.
— cursor: default makes it so the mouse cursor is a pointer instead of the "I" for highlighting text.
NAMElyrics — This class is for lyrics or a quote, if you want.
NAMElyricsbar — Optional. A lyrics bar.
NAMEtxtw — the "wrap" or outer background for your post text.
NAMEtxt — This class is for the actual post text.
spk — Use this tag for your speech.

The width for this table is 520px; this adds in the 10px from padding in both the text wrap and text areas. The text wrap is set at 500px width and the text area is not set, as it is based on the padding of the box it is already inside. Remember if you want to change the width, to include the number you've chosen for padding.

Feel free to play around with or modify any of this! Break it down and tear it apart if you want to figure out how something would work better for you. I left the example colors and image in the code, so that you have a reference to where things are if you need it. If you have any questions or requests on how to do something, always feel free to send me a message 8)

You do not have to credit me to use this table on ORIGIN, but if you use this code somewhere else, please link back to this post!

The fox image I used was taken by Jonatan Pie on Unsplash. Find lots of cool, free photos on Unsplash.com!

---

Code:

<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed|Lateef" rel="stylesheet">
[style] .NAMEpic {margin: auto; width: 520px; background: #445e65 url('https://i.imgur.com/dISxFcb.jpg') 80% 0%/600px no-repeat; height: 300px; border-top-left-radius: 10px; border-top-right-radius: 10px;} .NAMEn {font-family: 'Barlow Condensed', sans-serif; font-size: 30px; line-height: 35px; color: #fff; text-shadow: 0px 0px 5px #000; margin-left: 80%; padding-top: 30%; letter-spacing: 1px; text-transform: uppercase; cursor: default;} .NAMElyrics {font-family: 'lateef', serif; font-size: 15px; line-height: 15px; color: #fff; margin-left: 50%; cursor: default;} .NAMElyricsbar {width: 520px; margin: auto; font-family: 'lateef', serif; font-size: 15px; line-height: 25px; color: #fff; font-family: 'lateef', serif; color: #fff; background: #243237; text-align: center;} .NAMEtxtw {margin: auto; width: 500px; background: #445e65; padding: 10px; text-align: right; font-size: 15px; line-height: 15px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} .NAMEtxt {margin: auto; background: #c0d0d5; padding: 10px; color: #445e65; font-family: arial; font-size: 11px; line-height: 13px; text-align: justify; border-radius: 10px;} .NAMEtxt>spk {color: #fff; font-weight: bold;} [/style]
<div class="NAMEpic"><div class="NAMEn">name of your character on the table</div>
<div class="NAMElyrics">lyrics under name</div></div>
<div class="NAMElyricsbar">lyrics on the bar, optional</div>
<div class="NAMEtxtw"><div class="NAMEtxt">Post text. <spk>Speech.</spk>
</div></div>

---

A reply would not include the style code again unless it is a new page. For example, your reply on the same page with the style code would only be:

Code:

<div class="NAMEpic"><div class="NAMEn">name of your character on the table</div>
<div class="NAMElyrics">lyrics under name</div></div>
<div class="NAMElyricsbar">lyrics on the bar, optional</div>
<div class="NAMEtxtw"><div class="NAMEtxt">Post text. <spk>Speech.</spk>
</div></div>

I saw you guys talking in the cbox that you like simple text tables so I added some into the site CSS. If you cannot see the styling, CTRL+F5 to hard refresh; if that doesn't work, clear your cache and reopen the browser so it has to download the new file. Since these are just justified text tables made for and implemented into the site, no crediting is needed.
Enjoy!

"Quisque vestibulum odio eget sem semper congue." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate.

Code:

<div class="sans"> your post </div>

"Quisque vestibulum odio eget sem semper congue." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate.

Code:

<div class="serif"> your post </div>

---

---

EXAMPLES
with bonus name and lyric codes

ROHAN
I WAS LIGHTNING BEFORE THE THUNDER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate. Fusce at scelerisque ipsum. Praesent lobortis pharetra magna in suscipit. Etiam facilisis posuere erat ac fermentum. Sed eget aliquam turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem ex, auctor lobortis nulla eget, placerat eleifend ipsum. Nam ultrices sem et feugiat vestibulum.

"Quisque vestibulum odio eget sem semper congue." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate.

---

ANDRASTE
and the wrath of the giver with the hands of a sinner
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate. Fusce at scelerisque ipsum. Praesent lobortis pharetra magna in suscipit. Etiam facilisis posuere erat ac fermentum. Sed eget aliquam turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem ex, auctor lobortis nulla eget, placerat eleifend ipsum. Nam ultrices sem et feugiat vestibulum.

"Quisque vestibulum odio eget sem semper congue." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate.

---

name style 1 tag is name1
name style2 tag is name2
lyrics style 1 tag is ly1
lyrics style 2 tag is ly2

Code:

bonus stuff
NAME STYLE 1 -- <name1> </name1>
NAME STYLE 2 -- <name2> </name2>
LYRICS STYLE 1 -- <ly1> </ly1>
LYRICS STYLE 2 -- <ly2> </ly2>

Stylize the name and lyrics tags by adding style="CSS" into the tags.

Code:

<name1 style="color:#44a6c6; font-size: 18px; text-shadow: 0px 0px 8px #add8e6;">ROHAN</name1>
<ly1 style="color:#add8e6;">I WAS LIGHTNING BEFORE THE THUNDER</ly1>

For a better idea of how to make the table itself for one of your own characters, please see Cj's post above!
However, I decided to make a little series of icons which anyone can use to make their basic table just that little bit prettier <3
(Or feel free to use these in any tables of your own! so long as their use is kept to origin, use them for anything; as custom titles, as signature dividers, anything!)

Below you can see a rainbow of shimmery gems; feel free to add these into the table beneath the lyrics, as follows!
******

So, without further adieu, here are the codes!

Black:

Code:

[img]https://i.imgur.com/SlzScQt.gif[/img]

White:

Code:

[img]https://i.imgur.com/nGWnqCu.gif[/img]

Red

Code:

[img]https://i.imgur.com/9SIkaUz.gif[/img]

Yellow

Code:

[img]https://i.imgur.com/N008Q9U.gif[/img]

Green

Code:

[img]https://i.imgur.com/ioaINSW.gif[/img]

Blue

Code:

[img]https://i.imgur.com/i4Q4Hfy.gif[/img]

Purple

Code:

[img]https://i.imgur.com/l87nhNk.gif[/img]

When personalized, this is an example of what it could look like; feel free to customize into pretty patterns, make a rainbow or otherwise use as you wish! I tried to make a variety of colours to suit characters' individual gems and I may make other shapes and colours later. Perhaps you could use it to match your characters' gem, or just for a bit of flare? Either way, I can't wait to see what you guys do with them!

Envy
You sink your teeth into the people you depend on
Infecting everyone, you're quite the problem

wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords
wordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswordswords



"Speech."
"Thoughts."

This is a template!
Please feel free to edit and modify this as you please.
You MUST change "NAME1" to your character's name.

If you have any questions feel free to PM me!! :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate. Fusce at scelerisque ipsum. Praesent lobortis pharetra magna in suscipit. Etiam facilisis posuere erat ac fermentum. Sed eget aliquam turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sem ex, auctor lobortis nulla eget, placerat eleifend ipsum. Nam ultrices sem et feugiat vestibulum.

"Quisque vestibulum odio eget sem semper congue." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta arcu ac enim fermentum placerat. Donec mollis feugiat mauris, sit amet sodales neque. Pellentesque vel pretium enim. Phasellus eget ornare sapien. Phasellus elit tortor, sagittis in pharetra in, congue sit amet ligula. Suspendisse ut lorem id dolor tincidunt vulputate.

You can put the style tags in your signature and then you only have to use the div tags in your posts. You can "combine" style tags into 1 tag if you are already using a style tag in your signature. -- If you don't want to use it in your signature, you only have to post the style tag code once per page.

Note: Padding # order is: top right bottom left

REPLACE "NAME1" WITH YOUR CHARACTER'S NAME! Example: "ROHAN1"
When you make a new table, use a new number: "ROHAN2"

Style tag (This goes in your signature) OR (You only have to post this once per page)

Code:

[style] .NAME1 {background: #HEX url("LINK") no-repeat center top; text-align: justify; color: #HEX; font-size: 11px; border-radius: 20px; padding: 400px 0px 30px 0px; width: 470px; margin: auto;} .NAME1>p {padding: 0px 40px 0px 40px;} .NAME1>p spk {font-weight: bold; color: #HEX;}[/style]

Post code (div) (This is what you post with)

Code:

<div class="NAME1"><p> Your post. <spk>"Speech."</spk> </p></div>

I made these as an example for someone so feel free to use them and edit them as you like! You can add backgrounds to them and play with them however you want, there is no need to credit me :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.

Pellentesque quis porta mi. Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.

Pellentesque quis porta mi. Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

Code:

<div style="background-color: #333; padding: 40px; border: 5px solid #dedede; width: 400px; margin: auto;"><div style="background: #dedede; color: #333; padding: 20px; text-align: justify; font-size: 10px;">TEXT</div></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.

Pellentesque quis porta mi. Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.

Pellentesque quis porta mi. Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

Code:

<div style="background-color: #333; padding: 40px; border: 5px solid #dedede; width: 400px; height: 400px; margin: auto;"><div style="background: #dedede; color: #333; padding: 20px; text-align: justify; font-size: 10px; height: 360px; overflow: auto;">SCROLLING TEXT</div></div>

Made this super simple table that's pretty easily customizeable or whatever. Have fun with it lol

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus nisi vel massa ultrices pretium. Quisque et enim in velit aliquam pellentesque nec ut lorem. Integer eget libero luctus, condimentum orci convallis, imperdiet ipsum. Duis pellentesque, nibh et luctus dictum, est nunc finibus metus, in porttitor dolor lacus ut mi. In volutpat rhoncus suscipit. Phasellus scelerisque sapien ut iaculis feugiat. Praesent tempus ultrices ante, et luctus purus sollicitudin interdum. Vivamus malesuada magna sit amet elit condimentum fringilla.

"Aenean tortor neque, consequat at condimentum sit amet, ornare ac mauris. Donec scelerisque imperdiet ligula, ac sollicitudin risus condimentum id."

Pellentesque sollicitudin semper commodo. Cras vel ullamcorper felis. Suspendisse at tellus eu ligula aliquet ornare. Donec interdum dolor nec nunc scelerisque, efficitur commodo lorem suscipit. Nunc at tortor ac sapien elementum pellentesque. Fusce et tincidunt diam. Aenean interdum viverra lacus, eu blandit enim venenatis eu. Sed eget ligula gravida, luctus justo sit amet, tristique augue. Donec scelerisque ex risus, nec laoreet sem rhoncus nec. Ut sed semper diam. In volutpat convallis enim sit amet porttitor.

To use, put this in your signature and make sure it's enabled on all posts:

Code:

[style] .shaws {margin:auto; width:50%; padding:25px 50px 25px 50px; border-left:50px solid #ccc; border-right:50px solid #ccc; text-align:justify; background: #eee;} .shaws b {text-shadow:0px 0px 5px #ccc;} [/style]

Then just use a quick div and you're set to go!

Code:

<div class="shaws">Yessssss</div>

Just make sure to change shaws to your character's name or something to avoid conflicting CSS styling! Make sure the period is preserved in the signature code, or it probably won't work.