BBCode: [wonders]

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 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 [wonders]what today will be like[/wonders]

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/showt...=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 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.

[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]

Originally Posted by FreshFroot

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]

Originally Posted by christianb

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?

[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.