[BBCode] Impressions
This modification is in the archives.
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: Code:
.impression { color:red; min-height:120px; margin:0 100px 0 100px; padding:10px 0 0 120px; } ADD BELOW: Code:
.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">"{param}"<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: Code:
.impression { color:red; display:block; height:120px; margin:0 100px 0 100px; padding:10px 0 0 120px; } Download
This modification is archived, downloads are still allowed. |