[BBCode] Impressions

This amused my members for about 30 seconds, perhaps you can achieve such dazzling results yourself! Very simple, just use [charactername][/charactername] tags to allow your members to throw amusing impressions into their posts. If they're anything like mine then they'll already do it regardless of whether the BBCode actually exists, so at least you can put a face to it. Must be a trend or something. Screenshot at the bottom!



INSTRUCTIONS
AdminCP > Styles & Templates > Style Manager > Main CSS

In the Additional CSS box at the bottom:

ADD:

.impression {
color:red;
min-height:120px;
margin:0 100px 0 100px;
padding:10px 0 0 120px;
}

AND for each character you want to add BBCode for (you can always include moderators if you're especially brave ) add the following CSS below the above code, I'll use Dr Evil as an example from hereon in, wherever his name occurs you replace it with the name of the character you want.

ADD BELOW:

.drevil {
background:transparent url(images/bbcode/drevil.png) no-repeat;
}

Upload the image you want to use with the Impression to your forum at the URL specified in the CSS above.


Now let's set up the fricken BBCode.

AdminCP > Custom BBCode > Add New BBCode

Title: Impression: Dr Evil
Tag: drevil
<div class="drevil impression">&quot;{param}&quot;<br /><br /><br /><br /><br /><br /></div>
Note: The endless <br />s are a workaround for yet another IE lack of support, I used this method because it is more flexible. If you're happy to go IE7/other browsers only at some point you can remove them or see the foot of this post for a less flexible but more compatible alternative.
Example: [drevil]How about no?[/drevil]
Description: (I'll leave that up to your own initiative!)



Save and you're done. Use them as you would any other BBCode. The four characters in the demo are zipped and included with the post to kick you off.



Demo:




Alternative Version:

Using min-height in the CSS allows for your characters to have different heights without you having to alter your code. However IE does not support it until IE7. Alternatively you can fix the height, which means you can remove all the <br />s from the BBCode and have cross-browser compatibility, but will not be able to add taller characters without changing the CSS to fit. If you're used much smaller characters before they will look a little lost in the larger-sized box.

If that's your preference, removed the min-height line and replace it with the highlighted lines here:

.impression {
color:red;
display:block;
height:120px;
margin:0 100px 0 100px;
padding:10px 0 0 120px;
}

[Davidov06]

Haha, this is awesome, although I have no use for it on my forum.

[Snake]

Thanks for the hack! I'll install it right away...