BBCode: [wonders]

[davidw]

Ok, this is my first "OFFICIAL" release so go easy on me. It's a small one - nothing fancy, while I work on the Bible script. This should be able to work on all 3.5.x and possibly 3.0.x versions (I've not tested it). I've always wanted something like this, but decided this morning to "just do it."

I would rate this an easy modification - most everyone should be able to install this.

If you have previously installed this hack, please replace the code with the new code (below) and remove your old images and insert the new ones (they are numbered differently).

Step 1: Upload the images to your images folder. If you upload them elsewhere, change the location in step 2 (replacement code) to accomodate.

Step 2: Go to your admincp => Custom BB Codes => Add New BB Code

Title Wonders

Tag wonders

Replacement (replace www.yoursite.com (http://www.yoursite.com) with your URL/path to images directory) Also, please note that you can alter the color of the wonder text in this area
<font color="#FE0202">wonders {param}</font> <table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="http://www.yoursite.com/images/cloud_101.gif" width="236" height="30" alt=""></td>
<td style="background-image: url(http://www.yoursite.com/images/cloud_102.gif);background-repeat:repeat-x;width:100%;height:30;" nowrap="nowrap" alt=""></td>
<td colspan="2"><img src="http://www.yoursite.com/images/cloud_103.gif" width="161" height="30" alt=""></td>
</tr>
<tr>
<td><img src="http://www.yoursite.com/images/cloud_104.gif" width="126" height="44" alt=""></td>
<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_105.gif)"></td>
<td><img src="http://www.yoursite.com/images/cloud_106.gif" width="51" height="44" alt=""></td>
</tr>
<tr>
<td style="background-image: url(http://www.yoursite.com/images/cloud_107.gif);repeat:repeat-y;width:126;height:100%;" nowrap="nowrap" alt=""></td>
<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_105.gif)" "background-repeat:no-repeat" alt=""><table border="0"><tr><td><font color="#FE0202">wonders {param}</font></td></tr></table></td>
<td style="background-image: url(http://www.yoursite.com/images/cloud_108.gif);repeat:repeat-y width:51 height:100%;" nowrap="nowrap" alt=""></td>
</tr>
<tr>
<td><img src="http://www.yoursite.com/images/cloud_109.gif" width="126" height="44" alt=""></td>
<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_105.gif)"></td>
<td><img src="http://www.yoursite.com/images/cloud_110.gif" width="51" height="44" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="http://www.yoursite.com/images/cloud_111.gif" width="236" height="30" alt=""></td>
<td style="background-image: url(http://www.yoursite.com/images/cloud_112.gif);background-repeat:repeat-x;width:100%;height:30;" nowrap="nowrap" alt=""></td>
<td colspan="2"><img src="http://www.yoursite.com/images/cloud_113.gif" width="161" height="30" alt=""></td>
</tr>
<tr>
<td><img src="http://www.yoursite.com/images/spacer.gif" width="126" height="1" alt=""></td>
<td><img src="http://www.yoursite.com/images/spacer.gif" width="110" height="1" alt=""></td>
<td><img src="http://www.yoursite.com/images/spacer.gif" width="100%" height="1" alt=""></td>
<td><img src="http://www.yoursite.com/images/spacer.gif" width="110" height="1" alt=""></td>
<td><img src="http://www.yoursite.com/images/spacer.gif" width="51" height="1" alt=""></td>
</tr>
</table> Example what today will be like

Description This is for a short text wonder bubble.

Use {option} No

Button Image (Optional) No

Save

Temporary demo location (fits 100% of your style):
http://www.christianboards.org/showthread.php?p=5731#post5731

Feel free to alter this as needed. This is my gift to you!

Version History

1.02 I've edited it a second time to include changes made by peterska2 (https://vborg.vbsupport.ru/member.php?u=43427) in which she helped me fix a repeat-y issue that plagued larger "wonders." A special thanks goes to her for helping me fix that issue. Thank you.

1.01 I've edited the code to clean it up a little.

[Dan]

Nice one christian :) Thought bubbles are cool heh.

[peterska2]

looks good :)

* peterska2 bookmarks for later

[lasto]

its a quote hack or similar
/me likes

[FreshFroot]

nice one mate :)

Just to addon, is there a way to change the font color? It's very light and barly readable...

[Krahl]

Cute. My sites are mostly "dark" skinned, I'll see how it looks. ;)

[Atakan KOC]

Nice Thanks....

[Gizmo5h1t3]

nice this....as mentioned above tho, on dark styles, the terxt is invisible...how can we change that??

[projectego]

Looks interesting... I think I will use this. Thanks. :)

[Tulsa]

Why are there so many different images to upload but the same size bubble is showing on all posts?

[davidw]

The bubble is made up of 13 images, cut up so that they form tables and rows (to fit correctly). There are even images that have nothing in them, but its for making sure it flows corrrectly. The two images 03 and 11 are a set width, but I have set them to flow 100% of the remainder of the width of the post (repeating horizontally - repeat-x).

Btw, I won't be back until Tuesday to answer any other questions due to going out of town. I hope this answers your question. If not, I will try to explain better when I return.

[FreshFroot]

anyway to change the text color yet? Dark forums with that, don't work out nicly.....

[davidw]

As in what's inside the bubble? If so, it might have to be a CSS replacement as I fought with other issues on that. Not sure. I'll be gone most of the day but I could play around with that tomorrow.

[Bubble #5]

anyway to change the text color yet? Dark forums with that, don't work out nicly.....
Have you tried just changing the font color through BBCode?

[davidw]

Just a thought... you may be able to play around with this line
<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_07.gif)" "background-repeat:no-repeat" alt="">wonders {param}</td>

by adding a color tag before the ending </td> tag and enclosing the "wonders {param}"
<font color="#FE0202">wonders {param}</font>

which would make the result look like this:
<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_07.gif)" "background-repeat:no-repeat" alt="">wonders {param}</td>

[Bubble #5]

which would make the result look like this:

I think you mean it would look like this:

<td colspan="3" style="background-image: url(http://www.yoursite.com/images/cloud_07.gif)" "background-repeat:no-repeat" alt=""><font color="#FE0202">wonders {param}</font></td>

:bunny:

[davidw]

I'm not the best on expressions, but yes. :)

[Bubble #5]

You're aware (I hope) that the ends don't render correctly if there is more than a few simple lines of text right? :confused:

[davidw]

I do know that - couldn't figure out (that day) how to set that correctly. I was thinking about doing a repeat-x;repeat-y; but never got on it. I will try to work on that tomorrow.

Edit. Actually I'd have to re construct the bubble, keep the current repeat-x and use repeat-y on the new ones - 6 and 8 won't work.

[davidw]

Hack has been updated, with peterska2's help on the repeat-y issue. All users who have installed this hack, please remove the original code and images and replace with updated.

[moonclamp]

What happens if a [wonders] post is quoted, will it affect the rendering/scale?

[davidw]

I've quoted one on my site here (http://www.christianboards.org/showthread.php?t=1585) to show what it does.

[SweetHome]

Nice Thanks..

[RFViet]

how to make the bubble smaller ??

[davidw]

The best & easiest way to make the bubble smaller is to edit the images - you can make it whatever size you want that way. I created the bubble based on drawing one in photoshop and then slicing the bubble up. :)

[RFViet]

The best & easiest way to make the bubble smaller is to edit the images - you can make it whatever size you want that way. I created the bubble based on drawing one in photoshop and then slicing the bubble up. :)
do you still have psd file ??

[RFViet]

I think this is about the code ,not the graphic !!

http://img133.imageshack.us/img133/640/wonder0mh.jpg

[davidw]

I'll have to check tomorrow at work, pretty sure I do.

[davidw]

I don't have the PSD anymore. For some reason it is not where I saved it. It is possible that I lost it Wednesday of last week when my system crashed - I am on a remote profile and it was on my desktop.

[htscpl]

Hey, works great! *** clicks installed ***

Thanks!

[marcsmith73]

reserved for later

[davidw]

This modification is no longer supported.
This modification has been marked re-usable.