Posting Templates Tut WIP
Aug 23, 2014 20:20:48 GMT -5
Post by Deleted on Aug 23, 2014 20:20:48 GMT -5
NEW;; Added in some new codes (padding and border-radius). Also added the first example! Remember to try and split up the divs as much as you can: do not combine all the attributes together. It doesn't work that way. XD
I wasn't sure if you were going to make one, and proboards posting templates look cool enough that I want to share it with anyone else who hasn't used the proboards before, so yeah. ^^ Also, not sure if this is the proper board to put this, so feel free to shift it anywhere else, and sorry for any inconvenience!
Okay, proboards posting templates are very different from the Warrior Cats RPG (WCRPG) one that most people are familiar with. Instead of using [fancypost] tags, proboards uses the <div> tags, but with square brackets instead. It works pretty much the same way, though.
There are many kinds of <div> tags: the most commonly used are <div id>, <div style> etc. To make posting templates, you'll be using the <div style> tag. With the <div style> tag, there are many attributes you can customize. Frequently used once are:
width (px, %, auto)
height (px, %, auto)
text-align (left, right, center)
Think of <div> as an empty space. You can customized the space however you like with the <style> tag. Thus, "<div style>". The attributes above are the very basics: they customize the position and size of the empty space. The stuff in brackets are the values that you can use. Actually, there are a lot more, but since you're just coding a template and not an entire website, you wouldn't need them.
"px", or pixel, is the exact amount of pixels you want the space to occupy. "%", or percentage, is a relative value that varies depending on the amount of space available, AKA how wide/large the desktop screen is, or, if within another <div> (like placing a box inside another box), how wide the outer <div> is. Finally, "auto", or automatic, means that it would adjust itself base on what content you have inside the <div>. It's like having a box that would resize itself to whatever junk you put inside. Pretty handy, actually.
The "text-align" kinda speaks for itself.
However, as a warning, there are no "center" align tags for the div itself. If you want to center a div, you will have to use the <div align="center"> tags. With square brackets, of course.
So now let's start making things look nice. Firstly, lets make a 600x600 box that's in the center. The code would look something like this:
Remember, it uses the square brackets. I use the <this brackets> for convenience.
So, here are some codes that can "decorate" your box.
Borders
As you can see, I used both the "text-align" attribute as well as the new "border" attribute. The above stuff speaks for itself.
In the border attribute, you can also add the size in px as well as the border color. Just add it immediately afterwards, in this order:
It will turn out something like this:
You can also have individual borders for each side. Use the code like this:
Border Radius
The part saying "border-radius:0px 50px 0px 50px;" is just a way to shortcut everything. Basically, the first figure is the top-left, followed by top-right, bottom-right, bottom-left.
Okay, so we've covered borders! Woohoo!
As a tip, just remember that no matter how many attributes you use, you can always use them together by squeezing them all within the "style" tag.
Background Images
These ones require you to state the width and height that is the exact size that you want you image to turn out.
You can also state if you want the background to repeat or not. You can do this with these codes. Use either x or y or both.
Padding
This is the only way to position your div. Basically, the code include
padding (which covers all 4 sides)
padding-top
padding-bottom
padding-left
padding-right
You can check some of the example at the bottom for how it can be used. Basically, "padding" adds some space between the content inside a div, and the div itself.
Text Styles
Use the codes here to stylize your text!
That's to change the font and color ans size.
You are only allowed to use certain fonts on Proboards. If you wish to use custom fonts, you can find them on Google Fonts. HOWEVER, this only works if the admins on CW add the new fonts into the forum. A guide to do that can be found here. So currently you can only use basic fonts.
A list of supported fonts can be found here: anotherhetaliaboard.proboards.com/thread/518
Now, let's go on to actually creating a posting template. I'll be doing one or two very simple and basic ones as an example. Those kind of simple ones that actually look nice, ya know.
Creating a simple scrolling that looks nice:
So this is perhaps one of the easiest, and nicest, posting template you can make. It mainly depends on how good you are at the graphics. I'm going to use this art by elesette as an example: fav.me/d6w13ro
First thing to do is to make the entire template on a drawing/photoediting software. I used PS. When I said the entire template, I mean the entire template. What I came up with was this: i103.photobucket.com/albums/m124/Johanna_Ong/VasskaExamplePostingTemplate_zps7e698651.png
As you can see, the template consists of 2 text fields. I'm also planning on adding a quote or lyrics to the template as well. This is perhaps slightly more complex than the simple "1 text field in the center" posting template, but I wanted to do something more unique. So here it is! Two text fields and a line of lyrics to go.
Right now, let's start with making out box to fit the template in. The coding should be:
The image was 500x600, so that's how large I'm going to make the div. So now that you've got your empty "box", it's time to add the basic template. Think of it as adding the bottom background of the box.
You can preview your code now if you like. But next, we have to add the first text field. This is a bit of a trial and error kind of thing: you'll have to randomly try and position your text field at the right place. How do you create a text field? Use another div!
So I'm placing another div within our previous one, then I'm going to set it's position to "relative" as I want it to be affected by the div it is in. I'm just going to guess and check until I get the exact position and size. When you give a specific height to the text field, any text exceeding it will scroll if you use the overflow attribute as shown below. If you list the height as "auto", the height will be relative to how much text there is. Use Lorem Ipsum for your dummy text, it helps a lot. So here's the code:
So now...the lyrics and the second text box. Do the same things as the one above:
And we're done! This might seem pretty complex, but that's only because we're dealing with three text fields. If yours contains only one, it'll be pretty easy to manage. ^^
Creating a simple non-scrolling that looks nice:
Creating a complex non-scrolling that looks nice:
Another complex non-scrolling that looks nice:
THIS IS WIP SO FAR!
I wasn't sure if you were going to make one, and proboards posting templates look cool enough that I want to share it with anyone else who hasn't used the proboards before, so yeah. ^^ Also, not sure if this is the proper board to put this, so feel free to shift it anywhere else, and sorry for any inconvenience!
Okay, proboards posting templates are very different from the Warrior Cats RPG (WCRPG) one that most people are familiar with. Instead of using [fancypost] tags, proboards uses the <div> tags, but with square brackets instead. It works pretty much the same way, though.
There are many kinds of <div> tags: the most commonly used are <div id>, <div style> etc. To make posting templates, you'll be using the <div style> tag. With the <div style> tag, there are many attributes you can customize. Frequently used once are:
width (px, %, auto)
height (px, %, auto)
text-align (left, right, center)
Think of <div> as an empty space. You can customized the space however you like with the <style> tag. Thus, "<div style>". The attributes above are the very basics: they customize the position and size of the empty space. The stuff in brackets are the values that you can use. Actually, there are a lot more, but since you're just coding a template and not an entire website, you wouldn't need them.
"px", or pixel, is the exact amount of pixels you want the space to occupy. "%", or percentage, is a relative value that varies depending on the amount of space available, AKA how wide/large the desktop screen is, or, if within another <div> (like placing a box inside another box), how wide the outer <div> is. Finally, "auto", or automatic, means that it would adjust itself base on what content you have inside the <div>. It's like having a box that would resize itself to whatever junk you put inside. Pretty handy, actually.
The "text-align" kinda speaks for itself.
However, as a warning, there are no "center" align tags for the div itself. If you want to center a div, you will have to use the <div align="center"> tags. With square brackets, of course.
So now let's start making things look nice. Firstly, lets make a 600x600 box that's in the center. The code would look something like this:
[div style="width: 600px; height: 600px; align: center;"][/div]Remember, it uses the square brackets. I use the <this brackets> for convenience.
So, here are some codes that can "decorate" your box.
Borders
Dotted
[div style="border:dotted;text-align:center;"]Dotted[/div]Dashed
[div style="border:Dashed;text-align:center;"]Dashed[/div]Solid
[div style="border:Solid;text-align:center;"]Solid[/div]Double
[div style="border:Double;text-align:center;"]Double[/div]Groove
[div style="border:Groove;text-align:center;"]Groove[/div]Ridge
[div style="border:Ridge;text-align:center;"]Ridge[/div]Inset
[div style="border:Inset;text-align:center;"]Inset[/div]Outset
[div style="border:Outset;text-align:center;"]Outset[/div]As you can see, I used both the "text-align" attribute as well as the new "border" attribute. The above stuff speaks for itself.
In the border attribute, you can also add the size in px as well as the border color. Just add it immediately afterwards, in this order:
[div style="border:Solid 10px #000333;text-align:center;"]Solid With Other Stuff[/div]It will turn out something like this:
Solid With Other Stuff
You can also have individual borders for each side. Use the code like this:
[div style="border-top:Solid 10px #000333; border-left: dotted 10 px #ff5566; border-bottom: dashed 10 px #000333; border-right: double 10 px #ff5566; text-align:center;"]Solid With Other Stuff and Different Borders[/div]Solid With Other Stuff and Different Borders
Border Radius
Outset TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
[div style="border:Outset;text-align:center;border-radius:0px 50px 0px 50px;"]INSERT TEXT HERE[/div]The part saying "border-radius:0px 50px 0px 50px;" is just a way to shortcut everything. Basically, the first figure is the top-left, followed by top-right, bottom-right, bottom-left.
Okay, so we've covered borders! Woohoo!
As a tip, just remember that no matter how many attributes you use, you can always use them together by squeezing them all within the "style" tag.
Background Images
These ones require you to state the width and height that is the exact size that you want you image to turn out.
[div style="width: 600px; height: 600px; background-image: url(INSERT URL HERE);"][/div]TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
You can also state if you want the background to repeat or not. You can do this with these codes. Use either x or y or both.
[div style="width: 600px; height: 600px; background-image: url(INSERT URL HERE); background-repeat: repeat-x;"][/div]Padding
This is the only way to position your div. Basically, the code include
padding (which covers all 4 sides)
padding-top
padding-bottom
padding-left
padding-right
You can check some of the example at the bottom for how it can be used. Basically, "padding" adds some space between the content inside a div, and the div itself.
Text Styles
Use the codes here to stylize your text!
[div style="font-family: georgia; color: #aaaaaa; font-size: 20px;"]TEXT[/div]TEXT
That's to change the font and color ans size.
You are only allowed to use certain fonts on Proboards. If you wish to use custom fonts, you can find them on Google Fonts. HOWEVER, this only works if the admins on CW add the new fonts into the forum. A guide to do that can be found here. So currently you can only use basic fonts.
A list of supported fonts can be found here: anotherhetaliaboard.proboards.com/thread/518
Now, let's go on to actually creating a posting template. I'll be doing one or two very simple and basic ones as an example. Those kind of simple ones that actually look nice, ya know.
Creating a simple scrolling that looks nice:
So this is perhaps one of the easiest, and nicest, posting template you can make. It mainly depends on how good you are at the graphics. I'm going to use this art by elesette as an example: fav.me/d6w13ro
First thing to do is to make the entire template on a drawing/photoediting software. I used PS. When I said the entire template, I mean the entire template. What I came up with was this: i103.photobucket.com/albums/m124/Johanna_Ong/VasskaExamplePostingTemplate_zps7e698651.png
As you can see, the template consists of 2 text fields. I'm also planning on adding a quote or lyrics to the template as well. This is perhaps slightly more complex than the simple "1 text field in the center" posting template, but I wanted to do something more unique. So here it is! Two text fields and a line of lyrics to go.
Right now, let's start with making out box to fit the template in. The coding should be:
[div align="center"][div style="width: 500px; height: 600px"][/div][/div]The image was 500x600, so that's how large I'm going to make the div. So now that you've got your empty "box", it's time to add the basic template. Think of it as adding the bottom background of the box.
[div align="center"][div style="width: 500px; height: 600px background-image: url(http://i103.photobucket.com/albums/m124/Johanna_Ong/VasskaExamplePostingTemplate_zps7e698651.png);"][/div][/div]You can preview your code now if you like. But next, we have to add the first text field. This is a bit of a trial and error kind of thing: you'll have to randomly try and position your text field at the right place. How do you create a text field? Use another div!
So I'm placing another div within our previous one, then I'm going to set it's position to "relative" as I want it to be affected by the div it is in. I'm just going to guess and check until I get the exact position and size. When you give a specific height to the text field, any text exceeding it will scroll if you use the overflow attribute as shown below. If you list the height as "auto", the height will be relative to how much text there is. Use Lorem Ipsum for your dummy text, it helps a lot. So here's the code:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt imperdiet lectus vel iaculis. Phasellus justo sem, suscipit a fringilla pellentesque, placerat at tortor. Maecenas lacinia ex ut eros vulputate dictum. Nam a metus ut libero viverra blandit. Nullam gravida finibus volutpat. Morbi quis metus neque. Maecenas tincidunt leo vel erat faucibus, ut mollis ante commodo.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
Morbi finibus venenatis ante eu porta. In consectetur lacinia eros in facilisis. Etiam cursus, dui vitae egestas faucibus, est sem varius sapien, sit amet facilisis dolor ligula hendrerit ligula. Integer pellentesque augue in dui sollicitudin convallis. Vestibulum vitae lacus luctus, dictum elit non, volutpat odio. Duis sit amet arcu est. Mauris magna neque, porttitor et sapien et, condimentum auctor risus. Nunc ut pulvinar nisi. Sed ullamcorper elit quis lectus tincidunt congue. Mauris varius lorem eu tincidunt interdum. Nullam eleifend, urna a congue pharetra, odio tellus porttitor arcu, eu cursus velit erat faucibus tellus. Nunc feugiat risus lorem, in malesuada sem semper vel. Proin fermentum nunc eu metus venenatis hendrerit. Duis dapibus ultricies purus.
Etiam non rutrum mauris. Quisque nisi nunc, tincidunt sit amet est in, tincidunt placerat erat. Suspendisse tempus, tellus vel semper fermentum, urna diam tincidunt tellus, id elementum sapien mi eu ex. Nulla facilisi. Mauris ullamcorper urna eget turpis lobortis, non elementum arcu porttitor. Nunc varius dolor arcu, non auctor leo aliquet eget. Donec varius metus at orci lacinia sodales. Phasellus molestie leo nec lorem sollicitudin, ut varius odio aliquet. Donec accumsan accumsan lectus, in imperdiet turpis. Donec mattis lacus a quam faucibus, quis imperdiet lectus molestie. Nullam lobortis interdum enim sed placerat. Phasellus ut massa est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ultrices arcu. Pellentesque sodales consequat magna, et dapibus neque posuere ut. Donec laoreet laoreet lacus, vel hendrerit tellus vulputate a.
Donec fringilla dapibus enim, ut ullamcorper mi. Morbi gravida non est at hendrerit. Proin ac enim tortor. Sed id massa velit. Curabitur faucibus massa dolor, sed finibus tellus sodales non. Nullam laoreet, sem sed molestie molestie, ex odio feugiat est, quis finibus ante lacus et elit. Integer molestie augue sed neque tincidunt fringilla. Sed vel leo viverra, aliquam dolor sit amet, efficitur odio. Duis vulputate sem est, vel dapibus mi eleifend maximus. In sit amet ligula lorem. Mauris nec purus nec lorem viverra sollicitudin. Nam feugiat in odio non semper. Phasellus id tristique mi.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
Morbi finibus venenatis ante eu porta. In consectetur lacinia eros in facilisis. Etiam cursus, dui vitae egestas faucibus, est sem varius sapien, sit amet facilisis dolor ligula hendrerit ligula. Integer pellentesque augue in dui sollicitudin convallis. Vestibulum vitae lacus luctus, dictum elit non, volutpat odio. Duis sit amet arcu est. Mauris magna neque, porttitor et sapien et, condimentum auctor risus. Nunc ut pulvinar nisi. Sed ullamcorper elit quis lectus tincidunt congue. Mauris varius lorem eu tincidunt interdum. Nullam eleifend, urna a congue pharetra, odio tellus porttitor arcu, eu cursus velit erat faucibus tellus. Nunc feugiat risus lorem, in malesuada sem semper vel. Proin fermentum nunc eu metus venenatis hendrerit. Duis dapibus ultricies purus.
Etiam non rutrum mauris. Quisque nisi nunc, tincidunt sit amet est in, tincidunt placerat erat. Suspendisse tempus, tellus vel semper fermentum, urna diam tincidunt tellus, id elementum sapien mi eu ex. Nulla facilisi. Mauris ullamcorper urna eget turpis lobortis, non elementum arcu porttitor. Nunc varius dolor arcu, non auctor leo aliquet eget. Donec varius metus at orci lacinia sodales. Phasellus molestie leo nec lorem sollicitudin, ut varius odio aliquet. Donec accumsan accumsan lectus, in imperdiet turpis. Donec mattis lacus a quam faucibus, quis imperdiet lectus molestie. Nullam lobortis interdum enim sed placerat. Phasellus ut massa est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ultrices arcu. Pellentesque sodales consequat magna, et dapibus neque posuere ut. Donec laoreet laoreet lacus, vel hendrerit tellus vulputate a.
Donec fringilla dapibus enim, ut ullamcorper mi. Morbi gravida non est at hendrerit. Proin ac enim tortor. Sed id massa velit. Curabitur faucibus massa dolor, sed finibus tellus sodales non. Nullam laoreet, sem sed molestie molestie, ex odio feugiat est, quis finibus ante lacus et elit. Integer molestie augue sed neque tincidunt fringilla. Sed vel leo viverra, aliquam dolor sit amet, efficitur odio. Duis vulputate sem est, vel dapibus mi eleifend maximus. In sit amet ligula lorem. Mauris nec purus nec lorem viverra sollicitudin. Nam feugiat in odio non semper. Phasellus id tristique mi.
[div align="center"][div style="width:500px;height:600px;background-image:url(http://i103.photobucket.com/albums/m124/Johanna_Ong/VasskaExamplePostingTemplate_zps7e698651.png);"][div style="text-align:justify;width:250px;padding-left:110px;padding-top:70px;"][div style="height:270px;overflow:auto;"][div style="font-family:georgia;font-size:10px;color:#ffffff;"]INSERT TEXT HERE[/div][/div][/div][/div][/div]So now...the lyrics and the second text box. Do the same things as the one above:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt imperdiet lectus vel iaculis. Phasellus justo sem, suscipit a fringilla pellentesque, placerat at tortor. Maecenas lacinia ex ut eros vulputate dictum. Nam a metus ut libero viverra blandit. Nullam gravida finibus volutpat. Morbi quis metus neque. Maecenas tincidunt leo vel erat faucibus, ut mollis ante commodo.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
Morbi finibus venenatis ante eu porta. In consectetur lacinia eros in facilisis. Etiam cursus, dui vitae egestas faucibus, est sem varius sapien, sit amet facilisis dolor ligula hendrerit ligula. Integer pellentesque augue in dui sollicitudin convallis. Vestibulum vitae lacus luctus, dictum elit non, volutpat odio. Duis sit amet arcu est. Mauris magna neque, porttitor et sapien et, condimentum auctor risus. Nunc ut pulvinar nisi. Sed ullamcorper elit quis lectus tincidunt congue. Mauris varius lorem eu tincidunt interdum. Nullam eleifend, urna a congue pharetra, odio tellus porttitor arcu, eu cursus velit erat faucibus tellus. Nunc feugiat risus lorem, in malesuada sem semper vel. Proin fermentum nunc eu metus venenatis hendrerit. Duis dapibus ultricies purus.
Etiam non rutrum mauris. Quisque nisi nunc, tincidunt sit amet est in, tincidunt placerat erat. Suspendisse tempus, tellus vel semper fermentum, urna diam tincidunt tellus, id elementum sapien mi eu ex. Nulla facilisi. Mauris ullamcorper urna eget turpis lobortis, non elementum arcu porttitor. Nunc varius dolor arcu, non auctor leo aliquet eget. Donec varius metus at orci lacinia sodales. Phasellus molestie leo nec lorem sollicitudin, ut varius odio aliquet. Donec accumsan accumsan lectus, in imperdiet turpis. Donec mattis lacus a quam faucibus, quis imperdiet lectus molestie. Nullam lobortis interdum enim sed placerat. Phasellus ut massa est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ultrices arcu. Pellentesque sodales consequat magna, et dapibus neque posuere ut. Donec laoreet laoreet lacus, vel hendrerit tellus vulputate a.
Donec fringilla dapibus enim, ut ullamcorper mi. Morbi gravida non est at hendrerit. Proin ac enim tortor. Sed id massa velit. Curabitur faucibus massa dolor, sed finibus tellus sodales non. Nullam laoreet, sem sed molestie molestie, ex odio feugiat est, quis finibus ante lacus et elit. Integer molestie augue sed neque tincidunt fringilla. Sed vel leo viverra, aliquam dolor sit amet, efficitur odio. Duis vulputate sem est, vel dapibus mi eleifend maximus. In sit amet ligula lorem. Mauris nec purus nec lorem viverra sollicitudin. Nam feugiat in odio non semper. Phasellus id tristique mi.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
Morbi finibus venenatis ante eu porta. In consectetur lacinia eros in facilisis. Etiam cursus, dui vitae egestas faucibus, est sem varius sapien, sit amet facilisis dolor ligula hendrerit ligula. Integer pellentesque augue in dui sollicitudin convallis. Vestibulum vitae lacus luctus, dictum elit non, volutpat odio. Duis sit amet arcu est. Mauris magna neque, porttitor et sapien et, condimentum auctor risus. Nunc ut pulvinar nisi. Sed ullamcorper elit quis lectus tincidunt congue. Mauris varius lorem eu tincidunt interdum. Nullam eleifend, urna a congue pharetra, odio tellus porttitor arcu, eu cursus velit erat faucibus tellus. Nunc feugiat risus lorem, in malesuada sem semper vel. Proin fermentum nunc eu metus venenatis hendrerit. Duis dapibus ultricies purus.
Etiam non rutrum mauris. Quisque nisi nunc, tincidunt sit amet est in, tincidunt placerat erat. Suspendisse tempus, tellus vel semper fermentum, urna diam tincidunt tellus, id elementum sapien mi eu ex. Nulla facilisi. Mauris ullamcorper urna eget turpis lobortis, non elementum arcu porttitor. Nunc varius dolor arcu, non auctor leo aliquet eget. Donec varius metus at orci lacinia sodales. Phasellus molestie leo nec lorem sollicitudin, ut varius odio aliquet. Donec accumsan accumsan lectus, in imperdiet turpis. Donec mattis lacus a quam faucibus, quis imperdiet lectus molestie. Nullam lobortis interdum enim sed placerat. Phasellus ut massa est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ultrices arcu. Pellentesque sodales consequat magna, et dapibus neque posuere ut. Donec laoreet laoreet lacus, vel hendrerit tellus vulputate a.
Donec fringilla dapibus enim, ut ullamcorper mi. Morbi gravida non est at hendrerit. Proin ac enim tortor. Sed id massa velit. Curabitur faucibus massa dolor, sed finibus tellus sodales non. Nullam laoreet, sem sed molestie molestie, ex odio feugiat est, quis finibus ante lacus et elit. Integer molestie augue sed neque tincidunt fringilla. Sed vel leo viverra, aliquam dolor sit amet, efficitur odio. Duis vulputate sem est, vel dapibus mi eleifend maximus. In sit amet ligula lorem. Mauris nec purus nec lorem viverra sollicitudin. Nam feugiat in odio non semper. Phasellus id tristique mi.
Insert Some Lyrics of Some kind
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt imperdiet lectus vel iaculis. Phasellus justo sem, suscipit a fringilla pellentesque, placerat at tortor. Maecenas lacinia ex ut eros vulputate dictum. Nam a metus ut libero viverra blandit. Nullam gravida finibus volutpat. Morbi quis metus neque. Maecenas tincidunt leo vel erat faucibus, ut mollis ante commodo.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
Suspendisse molestie egestas nulla id auctor. Cras feugiat erat lectus, vel rutrum leo faucibus et. Curabitur imperdiet nisi sit amet congue dictum. Quisque iaculis consequat laoreet. Cras lacinia quam ac iaculis vulputate. Pellentesque malesuada semper risus, ac hendrerit nibh posuere ut. Pellentesque dictum auctor erat, nec tincidunt lacus pulvinar quis. Nullam faucibus, diam scelerisque feugiat vulputate, diam sem dictum nisl, eu pulvinar tellus lacus quis lorem. Cras nec elit blandit, hendrerit magna in, consequat ante. Praesent pharetra ultrices bibendum. Ut consectetur orci tortor, vel finibus leo pretium vel. Nulla laoreet eros dignissim massa maximus, eu consequat ante maximus. Pellentesque placerat dignissim orci et viverra. Fusce semper velit ligula, ut dapibus diam semper id.
[div align="center"][div style="width:500px;height:600px;background-image:url(http://i103.photobucket.com/albums/m124/Johanna_Ong/VasskaExamplePostingTemplate_zps7e698651.png);"][div style="text-align:justify;width:250px;padding-left:110px;padding-top:70px;"][div style="height:270px;overflow:auto;"][div style="font-family:georgia;font-size:10px;color:#ffffff;"]INSERT TEXT HERE[/div][/div][/div][div style="padding-top:75px;"][div style="font-family:vivaldi;color:#ffffff;"]Insert Some Lyrics of Some kind[/div][/div][div style="text-align:justify;width:250px;padding-left:110px;padding-top:20px;"][div style="height:80px;overflow:auto;"][div style="font-family:georgia;font-size:10px;color:#ffffff;"]INSERT TEXT HERE[/div][/div][/div][/div][/div]And we're done! This might seem pretty complex, but that's only because we're dealing with three text fields. If yours contains only one, it'll be pretty easy to manage. ^^
Creating a simple non-scrolling that looks nice:
Creating a complex non-scrolling that looks nice:
Another complex non-scrolling that looks nice:
THIS IS WIP SO FAR!
