Description Tut Backup

POST 1
<------------------------------------------------------------------------>

[center]More often than not I see people asking for help about how to code their descriptions or how to get pretty ones! Here, I'm going to compile a general list of HTML codes to use for your description, and I may set up a few templates for others to use as well. I'll add more to this as time goes on. If anyone can think of a code that should be on this list, PLEASE PM it to me!

[size=200]HTML Codes[/size]
[quote][b]Basic Image[/b]
[code]<img src="URL">[/code]

[b]Left/Right Aligned Image[/b]
[code]<img align="left/right" src="URL">[/code]

[b]Background Image[/b]
[code]<body background="">[/code]

[b]Background Color[/b]
[code]<body style=background-color:#FFFFFF>[/code]

[b]Font Color (NOTE: Insert your color in a hex format, following #FFFFFF, which is the code for white.)[/b]
[code]<font color="#FFFFFF">TEXT</font>[/code]

[b]Font Size[/b]
[code]<font size=10px>TEXT</font>[/code] or [code]<font size=+1>TEXT</font>[/code]

[b]Font Face[/b]
[code]<font face="font here">TEXT</font>[/code]
[b]For ease on the eyes and neater code, you can combine the font color, font size, and font face codes. [/b]
[b]Example:[/b][code] <font size="5" color="#FFFFFF" face="fantasy">TEXT</font>[/code]
[i]Keep in mind, only fonts the person viewing the profile has installed will be shown[/i]

[b]Invisible Text/Hide text (Can be used to make a description box preview)[/b]
[code]<div style=display:none;>TEXT</div>[/code]

[b]Align Left/Align Right Text[/b]
[quote]<p align=right/left>text here</p>[/quote]

[b]Basic Font Codes[/b]
[code]Bold: <b>TEXT</b>
Underline: <u>TEXT</u>
Strike: <s>TEXT</s>
Italic: <i>TEXT</i>[/code][/quote]

[size=150]How To Put Music In Your Description[/size]
[quote]More often than not, I see people having problems with getting music in their description. The most commonly used source is YouTube, but you can often find other sites like Soundcloud to embed music off of.

[b]1) Find a song you want in your description and find a share or embed button.

[img]http://i.imgur.com/MQn1bO5.png[/img][/b]

[b]2) Paste the code into your description.[/b]

[code]<iframe width="560" height="315" src="//www.youtube.com/embed/PlJvL0HzDQY?rel=0" frameborder="0" allowfullscreen></iframe>[/code]

[b]3) Change the size of the video to make it not visible! This will have a video playing in the background, but no one will know it's there. Sneaky, huh?[/b]

[code]<iframe width="0" height="0" src="//www.youtube.com/embed/PlJvL0HzDQY?rel=0" frameborder="0" allowfullscreen></iframe>[/code]

[b]3) [u]THIS IS VERY IMPORTANT![/u] Add [i]http:[/i] to the beginning of the URL in your code. This may not be needed for sources other than YouTube. If you do not, you and others will crash when they open your description![/b]

[code]<iframe width="0" height="0" src="http://www.youtube.com/embed/PlJvL0HzDQY?rel=0" frameborder="0" allowfullscreen></iframe>[/code]

[b]4) Replace ?rel with ?autoplay. This will cause your music to play automatically when the window is opened. If you are using a source other than YouTube, you may have to check an autoplay option when you are getting the embed code.[/b]
[code]<iframe width="0" height="0 src="http://www.youtube.com/embed/PlJvL0HzDQY?autoplay=1" frameborder="0" allowfullscreen></iframe>[/code]

Viola! You have music in your description.

[b]TO LOOP YOUR SONG...[/b]
Replace the embed url with the one here. Make sure the autoplay part is still there!
[code]<iframe width=0 height=0 src="http://www.youtube.com/embed/4YoKrsAXlT4?autoplay=1&loop=1&playlist=4YoKrsAXlT4" frameborder=0 allowfullscreen></iframe>"[/code]

[b]IF YOU ARE USING YOUTUBE AND YOUR MUSIC DOES NOT WORK...[/b]
-Check to make sure your volume on YouTube's player isn't muted. If it is, all other videos are going to be muted too, including the one you are embedding into your description!
[b]-Make sure that your video isn't blocked by a copyright law or company.[/b] My way of doing this is getting the embed url in your description.

<iframe width="0" height="0 src="[b]http://www.youtube.com/embed/PlJvL0HzDQY?autoplay=1[/b]" frameborder="0" allowfullscreen></iframe>

Copy the bolded part and paste it into your URL bar. If it plays, then you are doing something wrong with your code! However, if you get a message like the one below, unfortunately, your song of choice is blocked by a copyright company.

[img]http://i.imgur.com/KhzabQA.png[/img]

(Often times if the company is VEVO, you need to just get a different version of that song off YouTube. VEVO is just silly like that!) You can either just get a different (and equally as awesome!) song off of YouTube, or search for the same song from another source. I often use SoundCloud as a nice alternative.[/quote][/center]

<----------------------------------------------------------------------->

POST 2

<-----------------------------------------------------------------------


[center][size=200]RESOURCES/TIPS[/size]
If you have any cool resources or nice tips for descriptions, PM them to me or post them below! (Or not. That's okay too.)

[size=150]Blending the edges of your playby[/size]
[quote]Often, some playbys just don't agree with your background, or they just don't look good! This trick usually only works well with a SOLID background color. Save your image to your computer and use [b]http://tuxpi.com/photo-effects/vignette[/b] to fade your picture into your background. Use the options on the side to strengthen the fade or make it fade in further to your image.

RESULT:

[img]http://i.imgur.com/iC8RoHO.png[/img]
[/quote]
[size=150]How to get a super snazzy, super cool color scheme going![/size]
[quote]It just TICKS ME OFF when my playby has colors that don't match my text or my background. Often getting the exact colors off your playby can be hard. That's where THIS nifty program comes in!
GetColor! is a simple color dropping program that can quickly and easily grab the hex codes off of anything you'd like.
[img]http://i.imgur.com/k7nOQKs.png[/img]
It's the best.
I use this to quickly grab colors for my layout and background, matching my playby and making a nice, pretty, synchronized description!

[b]Wonderful.[/b]
[/quote]
[size=150]Making an nifty, invisible quote for your preview box.[/size]
[quote]Have you ever seen a snazzy description preview box (like mine) that shows some sort of life-changing, edgy quote?
[img]http://i.imgur.com/45NWEPh.png[/img]
It just leaves you boggled, doesn't it? [b]Mostly because you can't find that quote ANYWHERE in the associated description![/b] Except for maybe...
[img]http://i.imgur.com/kw0uSiy.png[/img]
(gasp) HERE! Yes, if you select in the right places, you can unveil my tricks, figure out the secrets, break the illusion!

To be a master illusion master like I am, you first must find some sort of edgy, mind-boggling, life-changing quote that just describes your character's terrible life to a T. I either use song lyrics or some sort of cool quotes from like, quotes.com or something. Just Google it. It'll work.

Next, you need to put it in the very beginning of your description! This is so it's the first thing that appears in your preview box.

In order to make it invisible on your actual description, you need to make it the same color as your background. You can use the GetColor! tool I linked to earlier for that or just remember your background color. That's cool too.

Finally, so it's the only thing in your description preview box, you need to add in an unnecessary amount of spaces to shove everything else away. Sometimes, if you want it to be all fancy with spaces between the words too, you can do that also. It's cool.

[img]http://i.imgur.com/dXiN4yu.png[/img]

If it works, then congratulations, you're in the cool kids club.
(Sometimes, this just doesn't work out with your description layout! It's a trial and error thing. Sorry!)[/quote]

[size=150]Making Fancy Fadey Text[/size]
[quote]Some people have pretty fancy fadey text in their descriptions and it just makes you [b]boil[/b] with envy, now doesn't it? You know what I'm talking about...
[img]http://i.imgur.com/RGTA2eW.png[/img]
These!
Now you can have your very own fadey text, using the [b]Vex Color Fader![/b] [size=50]Only four payments of 19.95![/size]
Using the GetColor color picker and this together is bound to make a gorgeous description, darling.
Knock yourself out.

http://www.vex.net/~x/xfade/advanced.html[/quote]

[size=150]Font Face Lists/Resources[/size]
[quote]
This list is lacking in size, because I'm lacking in resources! Please PM me any good [b]font lists[/b] if you know of any. Thanks!
http://www.angelfire.com/fl5/html-tutorial/fontlist.htm
http://cssfontstack.com/
http://www.tutorialspoint.com/html/html_fonts_ref.htm[/quote]

[size=150]Seamless Background Resources[/size]
[quote]
Using non-seamless backgrounds is totally non-cool. This list is lacking in size, because I'm lacking in resources! Please PM me any good [b]background resources websites[/b] if you know of any. Thanks!
http://subtlepatterns.com/
http://www.patterncooler.com/
http://www.tumblr.com/tagged/seamless-background
http://www.backgroundlabs.com/[/quote]
[quote][/quote]

[size=150]Hex Color Resources[/size]
[quote]
Here are a bunch of lists of hex codes and the colors they represent. To be updated later. I'm lazy.
http://www.december.com/html/spec/colorcodes.html (Thanks, Kai!)
http://www.computerhope.com/htmcolor.htm (Thanks, Jonathon!)
http://www.w3schools.com/tags/ref_color_tryit.asp (Thanks, Decius!)[/quote][/center]


---------------------------------------------------------------

POST 3

---------------------------------------------------------------

[center][size=200]TEMPLATES[/size]
It's up to you to make pretty color schemes in these! Go all out.
No credit needed since these are easy to make. Feel free to edit and change the code as you wish! Just make sure you say I made them if asked -- thanks! Suggestions are welcome.

[quote]to do list
add fancy names to them[/quote]

[size=150]{PARAGRAPHS??? WHOAH}[/size]
Added [u]Sep. 12th 2014[/u]
[quote][img]http://i.imgur.com/5tTWFMW.png[/img]
http://pastebin.com/RHkrgRx3[/quote]
[size=150]{Center Aligned??? WOAH}[/size]
Added [u]Sep. 4th 2014[/u]
[quote][img]http://i.imgur.com/t7aoPGz.png[/img]
[code]http://pastebin.com/xTFZzaGw[/code][/quote]

[size=150]{The Babe}[/size]
[quote][img]http://i.imgur.com/NKIgfHW.png[/img]
[code]http://pastebin.com/MZfQT5Xx[/code][/quote]
[size=150]{Simple Top/Bottom Quotes}[/size]
[quote][img]http://i.imgur.com/lpMtn9K.png[/img]
[code]http://pastebin.com/gJWvP2Hx
[/code][/quote]

[size=150]{Center/Playby Based}[/size]

[quote][img]http://i.imgur.com/fktphtO.png[/img]
[code]http://pastebin.com/Q9MF5tC2[/code][/quote]

[size=150]{Center/Text Based}[/size]
[quote][img]http://i.imgur.com/2OKoGn1.png[/img]
[img]http://i.imgur.com/Z2KGsWx.png[/img]
[code]http://pastebin.com/VHF5C6s3[/code][/quote]
[size=150]{Left Aligned/Text Based}[/size]
[quote][img]http://i.imgur.com/UXnkKla.png[/img]
[code]http://pastebin.com/G0iRJWZ1
[/code][/quote]

[size=150]{Right Aligned/Text Based}[/size]
[quote]
[img]http://i.imgur.com/UEvhqvO.png[/img]
[code]
http://pastebin.com/WX4CASJm[/code][/quote]

[size=150]{Dashes and Stuff}[/size]
[quote][img]http://i.imgur.com/2onp8S1.png[/img]
[code]http://pastebin.com/6TMkVtqi[/code][/quote][/center]


-------------------------------------------------

POST 4/5

-------------------------------------------------


[center]starting today i will make an update log every time i change something to the guide to keep track of it's progress and alert people if there's something new through that fancy 'latest post' thing!!!

[size=150][b]September 5th, 2014[/b][/size]
-Transferred templates over to Pastebin to remove clutter from the guide.
-New template based off Blythe's current description
-Started dating templates
-FINALLY added suggested hex code resources[/center]

[center][size=150][b]September 12th, 2014[/b][/size]
-New template[/center]