[tutorial] for posting templates

[Welshling]

How to make your own posting templates, for rpg purposes.

Firstly templates for posting purposes formerly known as enhanced ubbc tables or style tags, will not work in v5 coding. V5 uses div tags and css to style what it is that you want in your posting templates.

Below is a very basic, one div template for you to try out and keep adding on to. The more divs you add after this, the more advanced it becomes.

[div align="center"][/div] this div centers everything including your template and any and all text. remember to close it. And in between it you want to add your div styles for your template. See below.

and this is your basic one div template. a height property is not needed at this stage because it will keep on repeating with the more you type. If you want to add in a scroll-bar then you will need to add in a height and add overflow:auto; to your coding area. If you want to add a background image change the "background-color:white"; to this. background-image:url('400widthx200heighturl'); and to add more divs after this one. just keep adding more div styles inside these two closing divs.

[div align="center"][div style="width:400px;background-color:white;border:4px solid #000000;border-radius:10px;font-family:georgia;font-size:10px;text-align:justify;color:black;padding:3px;"]and this is your basic one div template. a height property is not needed at this stage because it will keep on repeating with the more you type. If you want to add in a scroll-bar then you will need to add in a height and add overflow:auto; to your coding area. If you want to add a background image change the "background-color:white"; to this. background-image:url('400widthx200heighturl'); and to add more divs after this one. just keep adding more div styles inside these two closing divs.[/div][/div]

Templates that use tables, have again altered slightly in v5 there is a new feature [ tbody ] which is a tag used to style the body of your template, such as background color. and the previously [ tr ] [ td ] tags can also be altered now to include border styles and or colorations. Below is a simple table template. Hopefully you find my instructions easy to follow and this whole post a good idea, if you do LIKE IT

this is where your post goes, keep typing to see the scroll bar pop up.

[div align="center"][table width="200"][tbody][tr][td style="border:2px solid red;padding:5px;"][div style="width:200px;background-color:black;border:#cb0077 2px solid;"][div style="width:160px;height:400px;overflow:auto;background-color:black;border:#a2ef00 4px solid;font-family:Tahoma;font-size:12px;color:#b9b9b9;text-align:justify;padding:8px;line-height:100%;letter-spacing:100%;margin-top:5px;margin-left:8px;margin-bottom:8px;"]this is where your post goes, keep typing to see the scroll bar pop up.[/div][/div][/td][/tr][/tbody][/table][/div]
is how i created the above table. And its not that complicated to get your head around.
The red outline, is the border for the one column one row table. This color can be changed as can the width and padding, just play around with the values.
See where it says table width, that is the width of the entire table, so if you wanted to make another column to the right of this one, then you would need to make the width wider and add in more table column coding. like so...

this is where your post goes, keep typing to see the scroll bar pop up.

here's the piece of coding for the above two column table, if anyone wants to use these feel free to edit them and play with them all you want. On the right hand side, you'd add in an image into the brackets area. Or edit to add in more text to suit.
[div align="center"][table width="400"][tbody][tr][td style="border:2px solid red;padding:5px;"][div style="width:200px;background-color:black;border:#cb0077 2px solid;"][div align="left" style="width:160px;height:400px;overflow:auto;background-color:black;border:#a2ef00 4px solid;font-family:Tahoma;font-size:12px;color:#b9b9b9;text-align:justify;padding:8px;line-height:100%;letter-spacing:100%;margin-top:5px;margin-left:8px;margin-bottom:8px;"]this is where your post goes, keep typing to see the scroll bar pop up.[/div][/div][/td][td style="border:2px solid red;padding:5px;"][div style="width:200px;background-color:black;border:#cb0077 2px solid;"][div style="width:160px;height:400px;background-image:('urlhere160x400');border:#a2ef00 4px solid;font-family:Tahoma;font-size:12px;color:#b9b9b9;text-align:justify;padding:8px;line-height:100%;letter-spacing:100%;margin-top:5px;margin-left:8px;margin-bottom:8px;"]
[/div][/div][/td][/tr][/tbody][/table][/div]

[Welshling]

This thread is getting a few likes, can someone sticky it maybe? Please.

[Brian]

Not something I would sticky in Support, but if you want I can move it to another board where there isn't an influx of 100+ different threads every weekday.

[Welshling]

yeah lol, it will get lost in the masses xD but i have saved the url so if anyone needs help n such

[Bennett 🚀]

There's a new plugin for posting templates, you can find the Style Tag plugin in the plugin library now.

[Welshling]

I know I have it

[Auburn]

Very-y awesome guide!

Say, is there any way to add box-shadows to this?
I tried but it didn't work for me.

[Bennett 🚀]

Jun 28, 2013 16:50:07 GMT -8 Auburn said:

Very-y awesome guide!

Say, is there any way to add box-shadows to this?
I tried but it didn't work for me.

Proboards takes out the box-shadow property when displaying divs with styles

Like this should have a box shadow...

[ratedxsuperstar]

Okay, so I'm having difficulty in transferring my enhanced codes to the proboards 5 system. I read somewhere that you change style to div style= but I wasn't really sure how to apply it.
This is part of one of my enhanced tags which is not working. Would someone be able to modify it to how it should be just so I'm aware of what changes I need to make and how they apply? Would be very grateful, cheers


[atrb=style,background-color: ffffff,bTable][style=width: 500px; text-align: center;]BROTHERS TRINITY[/style]
[atrb=style,background-color: 221c1c,bTable][style=width: 200px; height: 200px; text-align: center; padding: 2px;][/style][style=width: 250px; height: 200px; overflow: auto; text-align: justify; padding: 2px;]TYLER LUCAS WOLFE
TWENTY SIX | STEPHEN AMELL[/s][/size][/font][/color]
Being the oldest brother is always bound to have its share of responsibilities, but having the responsibility of protecting his brothers from the evil they are born to fight is another thing entirely. He is cool minded, always trying his hardest to look out for his brothers and play the authority figure most of the time. He sees that they are growing up, however will still treat them as his younger brothers. In addition to his werewolf abilities, Tyler possesses the ability to knock back or stun foes through a powerful howl-like manuover when he is full of rage or anger. This can also crumble objects if powerful enough.[/font][/size][/style][/td][/tr][/table]

[нαηηαн]

Thanks for this guide! And ratedxsuperstar , I am going to try and get that code working for you but no promises. In my experience if you put that code into the BB Code form when posting, then switch to preview and back it should change for you... I might just be crazy so like I said I'll try and see how to make that work for you.

[Welshling]

This thread isn't for requesting help with either bbcode or div styles, it is merely a help topic and if you require help with either bbcode or div styles then its advised that you start a topic in the support boards.

Thanks.

[1218lopes]

Hi would you like to little help me,,,,,
Actually i have made my own blog and i want to change my template
i don't want default because this is not good please tell me how can i change?
I am waiting for someone

[Former Member]

This is for proboards forums, 1218lopes, not blogs unless I misunderstand you. Likewise, this thread itself is not for help. If you do indeed need help with a Proboards Forum, you should post in Layout Templates but not in this thread, make your own thread here. =)

[Meadow]

How do I insert the code?

[Former Member]

Jun 28, 2013 16:50:07 GMT -8 Auburn said:

Very-y awesome guide!

Say, is there any way to add box-shadows to this?
I tried but it didn't work for me.

If I may weigh in on this... I can help with the box shadow stuff. Actually there are several codes/tags that I've managed to accidentally discover in my ongoing quest to accentuate my posts, one of them being background images. I say "accidentally", though, because I am not a programmer by any means myself. But I've been experimenting a lot, studying CSS, and examining the codes of certain webpages, for fun. If you use Google Chrome, you can do the latter by right-clicking anywhere on a webpage and then clicking "Inspect Element", or just "Inspect". Look in the "Filter" section especially, which is typically at the bottom-left of the screen. Anything you see there that grabs your interest can usually be put with div styles, span styles ect.

I've found some enjoyable tricks that you can use from this webpage: www.w3schools.com/cssref/default.asp. I learned how to adjust the opacity of certain elements in your posts, and indeed, about box shadows, from there.

I also think it's worth pointing out that there are many tags that you can add styles to. Images, spans (that's what I used in the two examples above), and as Welshling says in the original post, divs and tables as well. Spans are for linear strings of text only, being bound and limited by the line height. If you know span styles then you can use the background image property as a highlighter, like this. Divs, on the other hand, encompass larger blocks of text such as paragraphs. These latter are much better for background images, because with spans it only shows a narrow strip the same size as the line height, and then repeats this all throughout the length of the message.

Anyway, these are the respective codes I've used for this post:

[span style="opacity:0.3;"]insert text here[/span],
[span style="border:1px solid black;box-shadow:2px 2px 3px black;"]insert text[/span],
and [span style="backgrond-color:yellow;"]insert text[/span].

0.0 opacity is complete transparency whilst 1.0 is not transparent. With the box shadows ([span style="box-shadow:#px #px #px color;"]insert your text[/span]), the first value is the horizontal length of the shadow in pixels, the second number the vertical length. Third number is the shadow radius, and then you have the colour of the shadow. Change the values to whatever you need. I recommend using box shadows with divs though instead of spans, because divs are like a proper box.