Now how cool is that: Christmas is not due for another couple of weeks and yet you get to put your hands on some new toys already. When speaking of toys in the context of a bulletin board such as ours, I am of course referring to BBCodes; among some other changes that is.
The last couple of weeks have been fairly busy for us, so we sure hope you appreciate the result of the countless hours of work we have put into this.
Not only did we add a few additional BBCodes, but also revamped some of the most popular existing ones. Another change affects images added via BBCode, as we have also replaced the add-on previously used for scaling down images with one of our own that better fits our needs and thus can handle things a bit more smartly. In addition to that, we have introduced a fixed limit for signature heights (350px). Any contents exceeding this limit will not be shown.
In the following, I will elaborate on the changes and new BBCodes in detail, show some example uses and give you some additional remarks. Please note that most of the new and updated BBCodes only work as intended if you have JavaScript enabled.
If you do not feel like taking the grand tour, at least have a look at the board FAQ for a complete list of all available BBCodes: BBCode List
BBCode: JUSTIFY
This BBCode is the result of a recent thread in our Suggestions forum created by Kentika - kudos to him for this truly great suggestion! If this BBCode is used on a text, all of its lines will be aligned so that they have the same width. Not only does justified text look great, but also makes reading a lot easier. In case you are wondering why this paragraph looks all tidy and is fairly easy to read: I am using this very BBCode here!
We have added an icon in advanced editor toolbar to allow an easier use of this BBCode:
Some placeholder text without justification:
In consectetur elementum ipsum, a tempus ligula eleifend non. Nullam ac condimentum turpis, id vulputate magna. Duis tincidunt rutrum augue vel semper. Proin at magna quis nisi tincidunt dapibus ac non nisl. Quisque ultrices lorem sed velit ullamcorper, non volutpat metus molestie. Nulla mollis cursus convallis. Vivamus libero metus, laoreet sit amet elementum ac, tristique nec enim. Mauris lacus ante, pharetra vel lacinia id, lobortis eu lorem. Vivamus sollicitudin ullamcorper sem, vel eleifend risus venenatis sed. Donec feugiat metus eget ipsum egestas ornare.
The same placeholder text with justification:
In consectetur elementum ipsum, a tempus ligula eleifend non. Nullam ac condimentum turpis, id vulputate magna. Duis tincidunt rutrum augue vel semper. Proin at magna quis nisi tincidunt dapibus ac non nisl. Quisque ultrices lorem sed velit ullamcorper, non volutpat metus molestie. Nulla mollis cursus convallis. Vivamus libero metus, laoreet sit amet elementum ac, tristique nec enim. Mauris lacus ante, pharetra vel lacinia id, lobortis eu lorem. Vivamus sollicitudin ullamcorper sem, vel eleifend risus venenatis sed. Donec feugiat metus eget ipsum egestas ornare.
[B]Some placeholder text without justification:[/B]
In consectetur elementum ipsum, a tempus ligula eleifend non. Nullam ac condimentum turpis, id vulputate magna. Duis tincidunt rutrum augue vel semper. Proin at magna quis nisi tincidunt dapibus ac non nisl. Quisque ultrices lorem sed velit ullamcorper, non volutpat metus molestie. Nulla mollis cursus convallis. Vivamus libero metus, laoreet sit amet elementum ac, tristique nec enim. Mauris lacus ante, pharetra vel lacinia id, lobortis eu lorem. Vivamus sollicitudin ullamcorper sem, vel eleifend risus venenatis sed. Donec feugiat metus eget ipsum egestas ornare.
[B]The same placeholder text [I]with[/I] justification:[/B]
[JUSTIFY]In consectetur elementum ipsum, a tempus ligula eleifend non. Nullam ac condimentum turpis, id vulputate magna. Duis tincidunt rutrum augue vel semper. Proin at magna quis nisi tincidunt dapibus ac non nisl. Quisque ultrices lorem sed velit ullamcorper, non volutpat metus molestie. Nulla mollis cursus convallis. Vivamus libero metus, laoreet sit amet elementum ac, tristique nec enim. Mauris lacus ante, pharetra vel lacinia id, lobortis eu lorem. Vivamus sollicitudin ullamcorper sem, vel eleifend risus venenatis sed. Donec feugiat metus eget ipsum egestas ornare.[/JUSTIFY]
BBCode: HR
This BBCode is not exactly new, it was already added a couple of weeks ago. However, since we didn't properly announce it back then, I feel it should be mentioned here. It was also given a little update and now supports the use of variable widths.
Let this be the first paragraph of some quite elaborate text. Separating this first paragraph from the following one can be achieved by adding a horizontal rule with a width of 75%.
We will separate this paragraph from the next one using a horizontal rule that has a width of 100px and is pretty thick.
This should do for a brief demonstration, for more examples, see: BBCode List
Let this be the first paragraph of some quite elaborate text. Separating this first paragraph from the following one can be achieved by adding a horizontal rule with a width of 75%.
[HR]75%[/HR]
We will separate this paragraph from the next one using a horizontal rule that has a width of 100px and is pretty thick.
[HR=thick]100px[/HR]
This should do for a brief demonstration, for more examples, see: URL=http://www.elitepvpers.com/forum/misc.php?do=bbcode#hr]BBCode List[/URL]
BBCode: SPOILER
This BBCode was remade from scratch in order for it to allow a more complex use. It now comes with a new look and supports options such as custom titles, as well as custom title colors and font styles (e.g. bold, italic etc.).
We have also added an icon in editor toolbar to allow an easier use of this BBCode:
[SPOILER=title: Best Number!, title-style: bold, title-color: red]42[/SPOILER]
[SPOILER=My Custom Title]If you just enter some random text as your option, it will be considered your custom title.[/SPOILER]
[RIGHT][SPOILER=Aligned Spoiler]You can still combine spoilers with alignments. Cool, huh?[/SPOILER][/RIGHT]
BBCode: IMG
Extensive changes were made to this BBCode as well, in order to allow for further customization. To allow an easier use of these new options, we added a new dialog window that will help you inserting images into your posts. You can open it by clicking on the following icon in the text editor toolbar:
By default, images in your posts will be added to what we like to call an implicit image gallery. It basically means that a larger version of your image is shown as you click on it. In addition to that, this will allow you to browse through all images in a post, rather than clicking on them one at a time in order to view the images in full size. Should you run into performance issues with transition animations, you should disable them in UserCP.
Note that the resize bars (the yellow ones) that used to be shown when an image was scaled down automatically have been removed without replacement; however, images will still be scaled to fit the post area, we just removed those bars as they seemed somewhat unnecessary and not exactly nice to look at either.
More images are placed in this spoiler. However, you should be able to browse these without opening the spoiler, but by clicking on the image above the spoiler.
You can't browse the below two images by clicking on one of the above images, because they have been placed in another group. You can only browse images, if they are in the same group. The group for the two images below is myGroup, whereas the group name used for the above images is default, because we did not specify any custom group name. Group names only have to be unique within a single post, so you can't browse images across two posts, even if the same group names are used.
There are a few things to consider when embedding images in URL BBCodes. If you embed an image into an URL BBCode and the URL used refers to anything other than an image, your image will not expand when clicked, but rather forward to the specified URL instead:
You can still have the image expand on click, rather than redirecting directly to your URL, by explicitly setting an option called expandable. Once the linked image is expanded, you will notice a link icon in the top middle of your image. This link will redirect to the given URL when clicked:
If the URL is pointing to an image with a common image extension (i.e. *.jpeg, *.jpg, *.gif, *.png) and no explicit option for expansion is set, your image will be treated as a thumbnail for the linked image, allowing you to include small images in your post but show a way larger and better quality version on click:
Try clicking on this image:
[IMG=First example image]http://i.epvpimg.com/paZve.jpg[/IMG]
[SPOILER=More Images]
More images are placed in this spoiler. However, you should be able to browse these without opening the spoiler, but by clicking on the image above the spoiler.
[IMG=Second example image]http://i.epvpimg.com/rB6Tb.jpg[/IMG]
[IMG=Third example image]http://i.epvpimg.com/sKa2d.jpg[/IMG]
[/SPOILER]
[SPOILER=Even More Images]
You can't browse the below two images by clicking on one of the above images, because they have been placed in another group. You can only browse images, if they are in the same group. The group for the two images below is [I]myGroup[/I], whereas the group name used for the above images is [I]default[/I], because we did not specify any custom group name. Group names only have to be unique within a single post, so you can't browse images across two posts, even if the same group names are used.
[IMG=title: Fourth example image, group: myGroup]http://i.epvpimg.com/9sTCg.jpg[/IMG]
[IMG=title: Fifth example image, group: myGroup]http://i.epvpimg.com/7WxRb.jpg[/IMG]
[/SPOILER]
There are a few things to consider when embedding images in URL BBCodes. If you embed an image into an URL BBCode and the URL used refers to anything other than an image, your image will not expand when clicked, but rather forward to the specified URL instead:
[URL=http://www.elitepvpers.com][IMG=This will bring you straight to elitepvpers when clicked!]http://i.epvpimg.com/GvDId.jpg[/IMG][/URL]
You can still have the image expand on click, rather than redirecting directly to your URL, by explicitly setting an option called [I]expandable[/I]. Once the linked image is expanded, you will notice a link icon in the top middle of your image. This link will redirect to the given URL when clicked:
[URL=http://www.elitepvpers.com][IMG=title: This will expand when clicked!, expandable: 1, group: uniqueGroupForDemo42]http://i.epvpimg.com/RMyAb.jpg[/IMG][/URL]
If the URL is pointing to an image with a common image extension (i.e. *.jpeg, *.jpg, *.gif, *.png) and no explicit option for expansion is set, your image will be treated as a thumbnail for the linked image, allowing you to include small images in your post but show a way larger and better quality version on click:
[URL=http://i.epvpimg.com/zyHVg.jpg][IMG=title: This will expand the image specified with the URL BBCode when clicked!, group: uniqueGroupForDemo43]http://i.epvpimg.com/30BKg.jpg[/IMG][/URL]
BBCode: GALLERY
This all-new BBCode allows you to add interactive image galleries to your posts and thus provides an elegant new way of adding larger numbers of images (max. 50 per gallery) to your posts.
In order for images to be used in a gallery, they must first be uploaded to the Internet by using an image hosting service such as epvpimg.
In order to ensure best performance for your gallery, it is recommended to provide every image that is supposed to be in your gallery in three different sizes. For the default aspect ratio (16:9), these sizes are as follows:
Basic view (the image shown as you view a post): 720x405px
Thumbnail view (the image shown when browsing thumbnails): 80x45px
Fullscreen view (the image shown in fullscreen mode): e.g. 1920x1080px
Galleries will still work if you only provide each gallery image in a single size. However, these images will then likely require automatic scaling, making your gallery slow. While this might not be an issue when only having a hand full of images, it sure will become an issue if you add a few dozen images to your gallery, all of which being way too large for basic and thumbnail view. Apart from that, image quality might suffer from automatic downscaling.
The syntax for gallery tends to become a bit complicated, especially if you have many images in your gallery. For this reason, we added a new dialog window that helps you creating a gallery. You can open it by clicking on the following icon in the advanced text editor toolbar:
Should you run into performance issues with galleries, you can disable transition animations as well as preloading of galleries in UserCP.
Here is an example for a very simple gallery, only providing a single image URL per gallery item:
Bad Example
The following is the proper way of adding images to your gallery; there are three different versions of each image specified per gallery item, I've also specified titles and descriptions for every image:
Here is an example for a very simple gallery, only providing a single image URL per gallery item:
[GALLERY=Bad Example][*]http://i.epvpimg.com/Mzb7f.jpg[*]http://i.epvpimg.com/Lunfd.jpg[*]http://i.epvpimg.com/nVTHc.jpg
[/GALLERY]
The following is the proper way of adding images to your gallery; there are three different versions of each image specified per gallery item, I've also specified titles and descriptions for every image:
[GALLERY=Good Example][*]image: http://i.epvpimg.com/vP4Jh.jpg,
thumb: http://i.epvpimg.com/1Dinc.jpg,
big: http://i.epvpimg.com/Mzb7f.jpg,
title: Preview 1,
description: First preview image.
[*]image: http://i.epvpimg.com/x1REe.jpg,
thumb: http://i.epvpimg.com/LD0Zd.jpg,
big: http://i.epvpimg.com/Lunfd.jpg,
title: Preview 2,
description: Second preview image.
[*]image: http://i.epvpimg.com/CsHKe.jpg,
thumb: http://i.epvpimg.com/WQ92h.jpg,
big: http://i.epvpimg.com/nVTHc.jpg,
title: Preview 3,
description: Third preview image.
[/GALLERY]
Signature Height Limitation
As I have already mentioned earlier, there is now a built-in height limit for signatures of 350px. Any content exceeding this limit will be cut off and not be shown. This will render the existing rule restricting the maximum height of signatures obsolete and thus result in less penalties on your end and less effort enforcing this rule on our end.
We have changed the signature preview so you can see right away whether or not your signature exceeds the limit: Edit Signature
Note that the contents of spoiler BBCodes are not affected by this limit, i.e. spoilers can still expand beyond the limit. So just make sure that your signature height does not exceed the limit while all spoilers are collapsed.
Additionally, images in signatures that are not embedded in a spoiler BBCode will now be scaled down so they do not exceed a height of 200px. So using images that are slightly larger than the limit previously set in the signature rules (i.e. 200px) is no longer an issue, however, keep in mind that the limitations in terms of file size (i.e. 300kB per image) still apply.
This should suffice for a brief introduction. Feel free to leave your feedback in this thread. If you have more complex questions and/or suggestions regarding any of the new BBCodes or changes, feel free to create a thread in main forum about it.
If you stumble across bugs, please do not hesitate and contact us right away. You should preferably do so by creating a thread in Complaint forum.
Thank you very much for your attention and have fun giving those new BBCodes a try!
Yeah, we've already noticed that this isn't working as intended yet. I will look into it, but I'm not sure what is causing this issue yet, as this is working just fine in my testing environment.
BBCodes for dummies 10/16/2013 - CO2 PServer Guides & Releases - 6 Replies im not after reputation or thanks or anything, im just sick of people who can't use BBCodes
for a full list and definition HERE
if you still can't understand here is more simple explanation
BBCodes are like html tags, you start it as '' and end it with '' without the quotes, and add the value (which is the text you want to edit or link or picture or anything) between them
this text is align to left by default
BBcodes und so nä! 07/08/2007 - Main - 3 Replies Hallo familie!1
kann mal mir wer sagen wie das mit den animierten bildern in der signatur geht? zb das mit dem roflvator und so das is rattengeil, will Ich aber nich kopieren is ja gemein! währe Net wenn ihr mich aufkären könnt sufu hat nix ergeben!!
text2schild.php?smilienummer=1&text=Hab euch lieb!1' border='0' alt='Hab euch lieb!1' />
