Wizard Pictures!

TUTORIALS WILL BE ADDED IF YOU WANT TO USE THESE! NEVER FEAR!

1) Coloured border - multiple images



This code is to wrap an image in a border (colour is changeable) and curve the edges. The size of the image can be adjusted, as well as the amount of curve or the colour of the border. It can also be used for single images, or more if you put a large table in! I will add tutorials later this evening to do that! For now, if you really can't wait, the image links (in the bracket <img src="URL" > can be replaced with your own GIFS.

CODE:

[div align="center"][table][tbody][tr][td style="padding:3px;"][div align="center"][img src="URL" style="max-width:180px;max-height:240px;padding:13px;border:6px solid #e1274e;border-radius:100px 100px 100px 100px;float:center;"][/div][/td][td style="padding:3px;"][div align="center"][img src="URL" style="max-width:180px;max-height:240px;padding:13px;border:6px solid #e1274e;border-radius:100px 100px 100px 100px;float:center;"][/div][/td][td style="padding:3px;"][div align="center"][img src="URL" style="max-width:180px;max-height:240px;padding:13px;border:6px solid #e1274e;border-radius:100px 100px 100px 100px;float:center;"][/div][/td][/tr][/tbody][/table][/div]

---

2) Square brackets - single image



This one is currently for a single image, but I'll make the option available for more! You can also copy and paste it into a table, similar to the above, and bracket colour can be changed. Same deal, insert the image into <img src="URL">.

CODE:

[div align="center"][div style="width:190px;font-family:courier new;font-size:12pt;text-align:justify;text-transform:uppercase;margin-top:5px;border-radius:20px;border-left:#666666 solid 3px;border-right:#666666 solid 3px;padding:10px;"][div align="center"][img style="max-width:75%;height:75%;width:75%;padding:13px;float:center;" src="URL"][/div][font color="9a78b4"]
[/font][/div][/div]

---

3. Table of images



This one is for multiple images, more like a traditional mood board. Square images resize to 200X200, but rectangular ones (as you can see with Sirius on the bottom left) will only resize one dimension. It's fairly simple but very useful! Insert images into each img src="http://placehold.it/200x200"

CODE:

[div align="center"][table style="text-align:center;font:12px optima;color:#4D393D;letter-spacing:-1px;line-height:90%;"][tbody][tr][td style="width:200px;padding-bottom:10px;"][img src="http://placehold.it/200x200" style="max-width:100%;"]
[/td][td style="width:200px;padding-bottom:10px;"][img style="max-width:100%;" src="http://placehold.it/200x200"]
[/td][td style="width:200px;padding-bottom:10px;"][img src="http://placehold.it/200x200" style="max-width:100%;"]
[/td][/tr][tr][td style="width:200px;padding-bottom:10px;"][img src="http://placehold.it/200x200" style="max-width:100%;"]
[/td][td style="width:200px;padding-bottom:10px;"][img src="http://placehold.it/200x200" style="max-width:100%;"]
[/td][td style="width:200px;padding-bottom:10px;"][img style="max-width:100%;" src="http://placehold.it/200x200"]
[/td][/tr][/tbody][/table][/div]


Again, I will post more detailed tutorials about how to tweak these - or you can find/build your own! Have fun!