Coding Basic v5 Templates
POST CREATED Aug 19, 2013 20:13:33 GMT -8
Pool Boy, lunar, and 6 more like this
Post by Deleted on Aug 19, 2013 20:13:33 GMT -8
here's the basic structure: (keep in mind, you can't combine div align=center with the rest. I don't know why, but pb doesn't like it. /shrug)
and then you add stuff like Border:10px solid white; bg color: light blue; color:white; set a width, text-align:justify; and you'll get something similar to this: (full list of variables allowed can be found here.)
Maybe you want some lyrics in there? (and maybe make those lyrics stand out? maybe make it a bit bigger and add some letter-spacing?) or perhaps an image?
If you want the text to wrap around the icon, add float:left; or float:right; to the styles with the image:
Except now the icon feels TOO CLOSE with the text, so you should add a margin on the image.
The difference between padding and margin: (first is padding, the second is margin).
viola. first template done with minimal effort. slap on credits and you're good to go.
Things you should try to play around with: line height 120% to 95%, font-sizes (but don't get too small), fonts, images, borders (try double? dashed? dotted? solid?), backgrounds, etc.
[div align="center"][div style="width:XXXpx; background-color:COLORHERE; color:TEXTCOLORHERE;"]
texttexttext
[/div][/div]
and then you add stuff like Border:10px solid white; bg color: light blue; color:white; set a width, text-align:justify; and you'll get something similar to this: (full list of variables allowed can be found here.)
The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
[div align="center"][div style="width:400px;text-align:justify;color:silver;border:10px solid white;background:rgb(64, 131, 148);padding:10px;"] The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
[/div][/div]
Maybe you want some lyrics in there? (and maybe make those lyrics stand out? maybe make it a bit bigger and add some letter-spacing?) or perhaps an image?
The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
all we can do is keep breathing ,
[div align="center"][div style="width:400px;text-align:justify;color:silver;border:10px solid white;background:rgb(64, 131, 148);padding:10px;"] The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
[div style="border-top:solid silver 1px;font-size:15px;letter-spacing:2px;text-align:center;"] all we can do is keep breathing ,
[/div][/div][/div]
If you want the text to wrap around the icon, add float:left; or float:right; to the styles with the image:
[img src="http://i.imgur.com/AGtEPKT.png" style="max-width:100%; float:left;"]
The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
all we can do is keep breathing ,
[div align="center"][div style="width:400px;text-align:justify;color:silver;border:10px solid white;background:rgb(64, 131, 148);padding:10px;"] [img src="http://i.imgur.com/AGtEPKT.png" style="max-width:100%;float:left;"] The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
[div style="border-top:solid silver 1px;font-size:15px;letter-spacing:2px;text-align:center;"] all we can do is keep breathing ,
[/div][/div][/div]
Except now the icon feels TOO CLOSE with the text, so you should add a margin on the image.
The difference between padding and margin: (first is padding, the second is margin).
The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
all we can do is keep breathing ,
[div align="center"][div style="width:400px;text-align:justify;color:silver;border:10px solid white;background:rgb(64, 131, 148);padding:10px;"] [img src="http://i.imgur.com/AGtEPKT.png" style="max-width:100%;float:left;border:5px solid white;margin-right:5px;"] The storm is coming but I don't mind, People are dying, I close my blinds, All that I know is I'm breathing now.
I want to change the world, Instead I sleep, I want to believe in more than you and me. But all that I know is I'm breathing, All I can do is keep breathing, All we can do is keep breathing now. All that I know is I'm breathing, All I can do is keep breathing. All we can do is keep breathing. All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing, All we can do is keep breathing now.
[div style="border-top:solid silver 1px;font-size:15px;letter-spacing:2px;text-align:center;"] all we can do is keep breathing ,
[/div][/div][/div]
viola. first template done with minimal effort. slap on credits and you're good to go.
Things you should try to play around with: line height 120% to 95%, font-sizes (but don't get too small), fonts, images, borders (try double? dashed? dotted? solid?), backgrounds, etc.