Layouts, signatures, proboards HTML and BBC and more.

Layouts, signatures, proboards HTML and BBC and more. Sept 1, 2017 7:05:24 GMT -5

Quote

Post by ♕ DrunkenRoyalty on Sept 1, 2017 7:05:24 GMT -5

This is just my general self taught knowledge.

Okay, here i'll be posting (over time) some really basic coding and stuff.
Want to request certain codes or have any questions, just comment below!
Not every question will be answerable since i'm learning this of my own back by myself nor would I consider myself a teacher.

There is *'s inside the "[ ]" to make it see-able.
"[*font size="2"]" Just remove any stars from the codes!

This is all super useful for some amazing looking signatures and biographies!

Re-size font:

[*font size="2"]TEXT GOES HERE[/font*]
Change the number from 1 to 7 (1 being smallest).

Example:
Size 1 Text example here.
Size 7 Text

Font face:

[*font face="arial"]TEXT GOES HERE[/font*]

Change the font face name to anything such as "ms gothic" etc.
Example:
Comic Sans MS Text example here
Impact Text example here

(THERE IS A LIST OF FONTS IF YOU SCROLL TO THE LAYOUTS TUTORIAL)

Bold:

[*b]TEXT GOES HERE[/b*]

Example:

Text example here

Italic:

[*i]TEXT GOES HERE[/i*]

Example:

Text example here

Underline:

[*u]TEXT GOES HERE[/u*]

Example:
Text example here

Strike through:

[*s]TEXT GOES HERE[/s*]
Example:

~~Text example here~~

Spoilers:

[*spoiler]{SpoilerNameText}CONTENT GOES HERE[/spoiler*]

Remember that you only need 1 set of spoilers at the start and at the end, and you can put images, text and quotes inside them! However, for individual images you need to put spoilers on each of the images.
Example:

SPOILER: Click to show

{Supdawg}CONTENT GOES HERE

Pictures:

[*img]IMG ADDRESS GOES HERE[/img*]
Do you even need an example for this?

Re-size pictures:

[*img src="LINK GOES HERE" style="max-width:100%;"]

You can re-seize the image according to the percentage, e.g "max-width:90%;".
Too lazy to add an example it's kinda obvious.

Adding font colour:

[*color=#ffffff]text here[/color*]

The result will be like this text example. And you can change the 6-digit number to anything!

Moving/Sliding Text *or pictures:

[*move]Text here[/move*]

Example:

Text example here

How to make /basic/ layouts:

So search for your image. In this example layout I'm making for the tutorial, we're searching for "wolves playing".

When you find the image you need to make sure it is compatible with the layout you want to make. For instance:

Make sure the image is clear, and have plenty of "natural" looking space for you to add text boxes like so:

Don't try and squeeze in text boxes, they'll just look crap, it's better to have large text boxes. Making the codes is much easier that way as you'll see soon.
I highly suggest making the text boxes 50% opacity, it looks much cleaner and just nicer.
You don't have to make the text box white like mine, it's just an example and my favorite color to work with on layouts. c:
Anyways, go edit your image to your hearts desire then come back here. : )

Open this html tester!

Now when you get to the editor, there'll be some example HTML in there. Delete it, you don't need it. Now it's time to put in your first line of code:

<div style="background: url('DIRECT LINK OF YOUR IMAGE HERE'); width: XXXpx; height: XXXpx;">

And in the spaces that are green you need to fill in. For the direct link, you'll need to take a side trip to tinypic.com or something like it (tinypic is the best no-sign-up-required one, and imgur.com is the best one that allows you to login and have albums and stuff) in a new tab/window, upload your image and get the "direct link for layouts" at the bottom of the list of codes. Pate it in between the two quote marks. Then the XXXs. Those are there, because you need to enter the size of you layout image in PIXELS. Remember when you re sized your image to fit your desired page layout width with whatever editor you used? Now you need to enter that, the first number (generally 503 or 890) in the first space (the width: XXXpx;) and the other number that you got for the height in the other one.
Now press enter to go down a line and start on your first text box!

<div style="width: XXXpx; height: XXXpx; overflow: auto; text-align: XXXX; margin-top: XXXpx; margin-left: XXXpx; float: left;">

the XXXs in the width and height sections are width and height of your text boxes in pixels, once again. The best route here is just to to 100 x 100 for now and later when you have the layout code finished at one text box, you can adjust it one by one until it looks right.
The text-align is for how the text in the text box is aligned. It can be center, left, or right. Take your pick! And then, the margins!
The margins are the most important as they tell the computer where to put your text boxes. The margin-top is how far from the top of the image you're using the text box is, and the margin-left is how far from the left side it is- in pixels, of course.
A good place to start is to make both 50 and then as with the text box size, you will change it more later, when you can see how it looks the way it is.
Now, note that this code depends on where you are putting your text box. If you are putting it on the right side, you can change the "margin-left" to "margin-right" and change the "float: left" to "float: right". You can choose to have the "margin-top" become "margin-bottom" as well.

Once you fill that in, press enter, and start the code to customize your text further:

<font color="black" size="2" face="arial">

Replace "black" with any color you want- red, blue, green, orange, white, etc. If you aren't happy with just the generic colors like that, and pick one and put the code in instead- like #FFFF for example.
The size is the size of the text. It is usually 2. It can be 1 or 3 or 4 or 5 or whatever, but normally between 1-3, as any bigger is plain huge. Making it 1 can sometimes make the text show up distorted in some browsers, depending on the font you use, so I never make it smaller than 2, myself.
The "face" part is the font of your text. Check the image below to see examples of the internet safe fonts you can use! You may only use these fonts, as they come pre-installed on every computer, tablet, phone, etc. If someone doesn't have the font you chose, the layout will not show up, so this is important!
Note, for some reason, "Book Antiquia" is missing, but you can use that one to, it looks like old typewriter letters.

Now you can put in your random text, on a new line, and make sure to use a ton to make sure your box is going to scroll right. Like this:
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 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 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 text text text text text text text text text

And then you can end the code- like this:
</font></div>

And now go down another line and put:
</div>

And then it's time to press the submit button and see where your text box is. It won't be perfect yet, and you'll have to do a lot of changing and re submitting before it will look right. When you have text boxes under more text boxes you may need to use minus numbers, like -50 instead of 50. But when you finally get it right it should be a little like this:

#ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot #ImHot

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 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 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 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 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 text text text text text text text text text text text text text text text text

Want to use this example I made? Just ask me for the code.

One more note.
To make it work on proboards BBCode...
Go to computer -> open notepad -> paste the code there -> edit -> replace -> find the "<" and replace with "[" then find the ">" and replace with "]"

Hope this helps!

Youtube videos:

[*video size="SIZE" src="FULL VIDEO URL HERE"[/video*]
The "size" can be 'default' 'small' 'medium' or 'large'
Here's an example of 'small'

Server Status

Announcements

Staff

Developers

Our Discord

Layouts, signatures, proboards HTML and BBC and more.

Post by ♕ DrunkenRoyalty on Sept 1, 2017 7:05:24 GMT -5

Quick Reply

Shoutbox