Forged in Fire
Hey guys! Now that I've pretty much mastered bb code, I wanted to give a tutorial on how to make more advanced templates.
Judd Hunter
, I hope this helps you!!!
The basics:
Step 1: Start with a DIV. A DIV is the block behind the text that will give you your background. I try to always use max-width instead of just width in my code because it makes it more mobile-friendly. Your basic DIV code is going to look something like this:
You can add border-radius: 25px to give your DIV a rounded effect. The littler the number, the less round it will be. Please note you always want to place the code inside of the brackets and separate the different commands with a semi-colon.
You can also replace the background with different colors by googling a color and then "hex code", and that's where you'd replace the #add8e6 in my original code.
To make the background an image instead of a solid color or gradient, change the background code from background:linear-gradient: (colors here) to the following:
Of course, in my code above you'll want to replace my image URL with your chosen one. Taller images are going to work better for this so the image is contorted weirdly!!
2. Now that you have your background, lets spruce it up with some images. This step is OPTIONAL. If you don't care for any other images, please skip to step 3.
The coding for this is pretty easy. You simply plug in the following:
If you want it to be on the left or right, use this code:
For centered images, simply add the [ center ] command before the [ img ] code.
3. But where does your text go? Well, for that we need another DIV. You can use the code in step one, changing the background color to whatever you'd like, adjusting the width to look how you want. Then after the div, paste the text then make sure you finish it off with [ /div ] so the DIV won't continue on past it. If you want the DIV to appear next to an image, things get a little more complicated. There are two ways to do it- the first one is easier but the results don't always look great. The second one is more complicated are requires more fine-tuning, but is more customizable.
The fancy stuff:
This is what will take your template from basic to luv reacts.
Judd Hunter
, I hope this helps you!!!The basics:
Step 1: Start with a DIV. A DIV is the block behind the text that will give you your background. I try to always use max-width instead of just width in my code because it makes it more mobile-friendly. Your basic DIV code is going to look something like this:
Code:
[div=max-width:800px;background:linear-gradient(#add8e6, #add8e6, #add8e6);margin:auto;padding:10px; border:2px solid #000000;]You can add border-radius: 25px to give your DIV a rounded effect. The littler the number, the less round it will be. Please note you always want to place the code inside of the brackets and separate the different commands with a semi-colon.
You can also replace the background with different colors by googling a color and then "hex code", and that's where you'd replace the #add8e6 in my original code.
To make the background an image instead of a solid color or gradient, change the background code from background:linear-gradient: (colors here) to the following:
Code:
background:url('https://cdn.discordapp.com/attachments/547111021517602817/701771945468756018/scanlines.png')Of course, in my code above you'll want to replace my image URL with your chosen one. Taller images are going to work better for this so the image is contorted weirdly!!
2. Now that you have your background, lets spruce it up with some images. This step is OPTIONAL. If you don't care for any other images, please skip to step 3.
The coding for this is pretty easy. You simply plug in the following:
Code:
[img] url here [/img]
Code:
[IMG align="right/left"]<-- pick right or left, then insert URL here [/img]3. But where does your text go? Well, for that we need another DIV. You can use the code in step one, changing the background color to whatever you'd like, adjusting the width to look how you want. Then after the div, paste the text then make sure you finish it off with [ /div ] so the DIV won't continue on past it. If you want the DIV to appear next to an image, things get a little more complicated. There are two ways to do it- the first one is easier but the results don't always look great. The second one is more complicated are requires more fine-tuning, but is more customizable.
-
Code:
[FLOAT=left][div code here] - In this one, the fine tuning comes in by adjusting how far left/right it goes. You pretty much just have to play with it until it looks right.
Code:
[div code here; left:80px]
The fancy stuff:
This is what will take your template from basic to luv reacts.
- Have fun with the graphics! A lot of the compliments I've gotten have been on templates where I created custom graphics for it. If anyone is interested in seeing a tutorial on that as well, let me know down below and I'll be happy to make one.
- Margin & padding. Margin is going to be the space outside of your div. Padding is going to be the space inside separating the text/images from the border. I prefer an auto margin and a thicker padding, but this is totally adjustable depending on what kind of look you want!
- Scrolls boxes: To utilize this feature, add [ height: 500px ] (changing the px to where you like it) to your code, then add [ overflow:auto ]
- Like the drop-shadow effect? Add this code, and feel free to change the color for a unique look!
Code:
box-shadow: 10px 30px 90px 20px; color: #000000 - Make the text pretty by using this code. Please note the options are limited. If you want things like a signature or name in a super fancy way, your best bet is making a graphic via photoshop or a browser base like pic monkey and then insert the image. If you just want to make your post text like black / white or whatever, use the code at the end of this. Replace the parentheses with the RGB code (again, googling is your best bet here) of your choice as well as the font command.
Code:
[COLOR=rgb(0, 0, 0)][FONT=Georgia]
Last edited:
