Post by !Gingernose on Jan 12, 2015 5:16:19 GMT
This topic is something I was pondering while constructing my own template, so hey, why not?
BBCode makes HTML basically obsolete when trying to code a layout for roleplaying, and if you want to do any sort of template, you'll need to know how they're made.
Templates are, in their barest form, tables. Yes, tables! They're just tables with fancified stuff, coloring, all the junk you might expect from CSS, lacking a few useful bits (thanks, bbcode, so useful!). This makes code look a little messy, sadly, but as long as you know what you're writing and where to put it, you'll be fine. Spacing things tends to confuse the layouts a little, so I would suggest that you keep spacing in coding to a minimum - this isn't Notepad++!
That said and done, let's make an example!
Say you want... two boxes, right? One for information on the character (mood, name, maybe a portrait...) and another for the actual writing - what your character says and does, anyhow. For the sake of this, you'll be making this one two-rows one-column. You can easily insert it using the handy table insert button (looks like a 9-square grid on the top bar). We'll remove cellpadding (so it'll basically be 0, and won't mess with coding) and you'll be presented with... this.
Here's a simple explanation. The -table- tag is where the code goes "hey, let's make this part of the code a table! let's do it!" and always ends with -/table-. Next, we have -tr- and -td-, which are rows and columns, respectively.
Codewise, -tr- goes before -td-, always. Each -tr- -/tr- represents a row, and each -tr- requires at least one -td-, or rather, each row need at least one column/cell or else it'll goof.
-tr- says "hey, I'm a row! here's what's in the row!" followed by any number of -td-s that say "hey, I'm a column!" before closing itself, as if to say "that's all I have in my row, check out the next one (if followed by another -tr-)!".
If that didn't confuse you, cool! If it did, I am terribly sorry, I'm super bad at explaining this, haha.
Anyhow, that's the basic bare-bones code for tables. However, there are so many fun things you can do.
-td- tags can be modified! Do you know what that means? It means we can define what kinds of things we want to have happen in the code! Here's an example:
The value called 'colspan' states that this -td-/cell will fit over four columns. I'll explain what this means later. The value 'style' means you can customize padding and spacing as long as they're separated with a ; and everything is surrounded with "". Don't use spaces when defining values in "" or it might muddle something up!
This is a little limiting, however, and there's not much you can define in there. Therefore, we use -div- tags!
-div- tags are basically a gift from the gods (or none, or one god, whatever you believe in) that allow us to stylize a huge amount of things. -div- tags are nested within -td- tags, and shouldn't be placed outside of those.
Here's an example of a -div- using a single-cell table:
So what exactly got defined, here?
The value "overflow:auto;" defines that, if the text box gets filled, it won't just expand. The box will add a scroll bar instead so that the size will stay as defined in the "height:--px;" and "width:--px;" valuables. An example:
The top example uses the "overflow:auto;" valuable while the bottom one does not. It makes a big difference, and allows for more information in tinier spaces! Therefore, for our example (which I seem to have forgotten two steps in), we'll be using it for the table-cell that will contain roleplay text.
Here's our table so far:
The code for this:
For one-column tables, you want to make sure the width is the same for all cells. For one-row tables, you'll need to make sure all height variables are the same.
Here's a little secret: Say you wanted to make a table where it had two rows - the first row would have one whole 'cell' while the bottom would have two. Coding-wise, this causes the table to warp and act funny because, hey, you can't just have differing cell counts, that's awful! Except... there's a way to do this without hassle.
Meet the "colspan" variable, mentioned earlier. This allows a single cell to "span" over a set amount of columns without making the code upset. Example:
It's so simple, yet so useful. I use this to add a small 'credit' div on the very top of my custom templates, like this one:
I always put a -div align="center"- tag around the entire table so that it centers in the post and doesn't left- or right-align. Here's what I mean:
From this, you can kinda tell it's easier and neater to just center a template instead of aligning it.
Here's some handy things you can put in your div style="" tr-tag:
Here are things you can define in -td- tags:
There's one thing you can do in the -table- tag, though I don't recommend it for novice (or even intermediate) roleplay template-makers.
For finding hexadecimal (#xxxxxx) colors. This is used for font colors, background colors, things like that. Remember that all hexidecimals have 6 digits, so mistyping can cause some code funk!
Getcolor -> A downloadable that can retrieve pretty much any color.
Remember to credit photographers or artists if you're using their images in a roleplay template!
BBCode makes HTML basically obsolete when trying to code a layout for roleplaying, and if you want to do any sort of template, you'll need to know how they're made.
Templates are, in their barest form, tables. Yes, tables! They're just tables with fancified stuff, coloring, all the junk you might expect from CSS, lacking a few useful bits (thanks, bbcode, so useful!). This makes code look a little messy, sadly, but as long as you know what you're writing and where to put it, you'll be fine. Spacing things tends to confuse the layouts a little, so I would suggest that you keep spacing in coding to a minimum - this isn't Notepad++!
That said and done, let's make an example!
Say you want... two boxes, right? One for information on the character (mood, name, maybe a portrait...) and another for the actual writing - what your character says and does, anyhow. For the sake of this, you'll be making this one two-rows one-column. You can easily insert it using the handy table insert button (looks like a 9-square grid on the top bar). We'll remove cellpadding (so it'll basically be 0, and won't mess with coding) and you'll be presented with... this.
Row 1 column 1 |
Row 2 column 1 |
[table][tbody]
[tr]
[td]Row 1 column 1[/td]
[/tr]
[tr]
[td]Row 2 column 1[/td]
[/tr]
[/tbody][/table]
Here's a simple explanation. The -table- tag is where the code goes "hey, let's make this part of the code a table! let's do it!" and always ends with -/table-. Next, we have -tr- and -td-, which are rows and columns, respectively.
Codewise, -tr- goes before -td-, always. Each -tr- -/tr- represents a row, and each -tr- requires at least one -td-, or rather, each row need at least one column/cell or else it'll goof.
-tr- says "hey, I'm a row! here's what's in the row!" followed by any number of -td-s that say "hey, I'm a column!" before closing itself, as if to say "that's all I have in my row, check out the next one (if followed by another -tr-)!".
If that didn't confuse you, cool! If it did, I am terribly sorry, I'm super bad at explaining this, haha.
Anyhow, that's the basic bare-bones code for tables. However, there are so many fun things you can do.
-td- tags can be modified! Do you know what that means? It means we can define what kinds of things we want to have happen in the code! Here's an example:
[td colspan="4" style="padding:0px;"]
The value called 'colspan' states that this -td-/cell will fit over four columns. I'll explain what this means later. The value 'style' means you can customize padding and spacing as long as they're separated with a ; and everything is surrounded with "". Don't use spaces when defining values in "" or it might muddle something up!
This is a little limiting, however, and there's not much you can define in there. Therefore, we use -div- tags!
-div- tags are basically a gift from the gods (or none, or one god, whatever you believe in) that allow us to stylize a huge amount of things. -div- tags are nested within -td- tags, and shouldn't be placed outside of those.
Here's an example of a -div- using a single-cell table:
Uh, hello! Simple text simple text simple text. I think I put too much space here. |
[table][tbody]
[tr]
[td][div align="center" style="overflow:auto;width:515px;height:100px;background-color:#000000;"]Uh, hello!
Simple text simple text simple text.
I think I put too much space here.[/div][/td]
[/tr]
[/tbody][/table]
So what exactly got defined, here?
The value "overflow:auto;" defines that, if the text box gets filled, it won't just expand. The box will add a scroll bar instead so that the size will stay as defined in the "height:--px;" and "width:--px;" valuables. An example:
Uh, hello! Simple text simple text simple text. I think I put too much space here. Did I? Oops. Uh. What do? Wh.....at.... do...? |
Uh, hello! Simple text simple text simple text. I think I put too much space here. Did I? Oops. Uh. What do? Wh.....at.... do...? |
The top example uses the "overflow:auto;" valuable while the bottom one does not. It makes a big difference, and allows for more information in tinier spaces! Therefore, for our example (which I seem to have forgotten two steps in), we'll be using it for the table-cell that will contain roleplay text.
Here's our table so far:
== Name here == == Gender here == == Species here == |
IC: The creature slunk forward in the grass, watching the fire flicker from behind a gnarled tree-root. The fire's flames reflected in the creature's eyes, and one could sense a feeling... one of fear, fear of human-made fire. Figures loomed around the hearth, their faces lit by the mystical embers, and one cursed as their food-morsel fell into the fire. The creature licked its lips; that food would have fed its hungry belly, surely. However, it scurried away when a careless toss sent some assorted debris its way. |
The code for this:
[table][tbody]
[tr]
[td][div align="center" style="width:515px;height:75px;background-color:#000000;"]== Name here ==
== Gender here ==
== Species here ==[/div][/td]
[/tr]
[tr]
[td style="cellpadding:10px;"][div style="overflow:auto;width:515px;height:100px;background-color:#000000;"]IC: The creature slunk forward in the grass, watching the fire flicker from behind a gnarled tree-root. The fire's flames reflected in the creature's eyes, and one could sense a feeling... one of fear, fear of human-made fire. Figures loomed around the hearth, their faces lit by the mystical embers, and one cursed as their food-morsel fell into the fire. The creature licked its lips; that food would have fed its hungry belly, surely. However, it scurried away when a careless toss sent some assorted debris its way.[/td]
[/tr]
[/tbody][/table]
For one-column tables, you want to make sure the width is the same for all cells. For one-row tables, you'll need to make sure all height variables are the same.
Here's a little secret: Say you wanted to make a table where it had two rows - the first row would have one whole 'cell' while the bottom would have two. Coding-wise, this causes the table to warp and act funny because, hey, you can't just have differing cell counts, that's awful! Except... there's a way to do this without hassle.
Meet the "colspan" variable, mentioned earlier. This allows a single cell to "span" over a set amount of columns without making the code upset. Example:
This spans over two tiles, wow! | |
A single column. | Another column. |
[table][tbody]
[tr]
[td colspan="2"]This spans over [i]two[/i] tiles, wow![/td]
[/tr]
[tr]
[td]A single column.[/td]
[td]Another column.[/td]
[/tr]
[/tbody][/table]
It's so simple, yet so useful. I use this to add a small 'credit' div on the very top of my custom templates, like this one:
Coded by Altias/Gingernose | |||
IC :: ---> So many words! OOC :: ---( Even more words, okay. |
I always put a -div align="center"- tag around the entire table so that it centers in the post and doesn't left- or right-align. Here's what I mean:
Coded by Altias/Gingernose | |||
IC :: ---> So many words! OOC :: ---( Even more words, okay. |
Coded by Altias/Gingernose | |||
IC :: ---> So many words! OOC :: ---( Even more words, okay. |
From this, you can kinda tell it's easier and neater to just center a template instead of aligning it.
Here's some handy things you can put in your div style="" tr-tag:
background-url(image.png); -> Adds a background as long as you put the url in the place it says "image.png" while keeping the ().
background-color:#000000 -> Uses a hexidecimal code to define the cell's background color. I'll link something later for color choosing.
overflow:auto; -> Defines that, if a cell overflows with text, it'll add a scroll bar.
height:###px; -> Defines height. Keep this the same for all cells in a row.
width:###px; -> Defines width. Keep this the same for all cells in a column.
Here are things you can define in -td- tags:
[td colspan="#"] -> This makes a cell span across columns, so you can make one big cell and two cells in a row below it without sad code.
[td style="padding: 3px;"] -> Adds cell padding so that cells aren't so close together, I think.
There's one thing you can do in the -table- tag, though I don't recommend it for novice (or even intermediate) roleplay template-makers.
Other Information
For finding hexadecimal (#xxxxxx) colors. This is used for font colors, background colors, things like that. Remember that all hexidecimals have 6 digits, so mistyping can cause some code funk!
Getcolor -> A downloadable that can retrieve pretty much any color.
Remember to credit photographers or artists if you're using their images in a roleplay template!