[TUTORIAL] Custom Post Backgrounds in bbcode

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment! No new topics are allowed in this forum.
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: MOD Development Forum rules

On February 1, 2009 this forum will be set to read only as part of retiring of phpBB2.
dubtribe
Registered User
Posts: 61
Joined: Sun Dec 14, 2003 12:48 am

[TUTORIAL] Custom Post Backgrounds in bbcode

Post by dubtribe »

Custom Post Backgrounds with BBcode Turorial:

I'm no code head. but i figured this out and thought i would share it.

:arrow: an example of the results (for better of for worse) can be enjoyed
HERE

:arrow: you can download this text and it's example images
HERE

this post and subsequent tutorial are in reference to the following topic and its contents:

http://www.phpbb.com/phpBB/viewtopic.php?t=171599

:!:
dss

Code: Select all

############################################ ################## 
## MOD Title:             Custom Post Backgrounds in BBCode 
## MOD Author:          Dubtribe <just doing this to be nice <> >
##		Taken from and entirely based upon the following Mod Author's work:
##		<Rob/Darkie < admin@ayenee.com > http://www.ayenee.com
##		ESQARE < admin@turkiyeforum.com > http://www.turkiyeforum.com
##		All i did was combine them, and demonstrate how to make your own.
##		I couldn't code my way out of the bathroom to save my life!
## MOD Description:    This mod displays the text on a custom background when using bbcode. 
## MOD Version:        none 
## Compatibility:      2.0.6 - 2.0.8a
## 
############################################################# 
##Notes: This mod is to be published on www.phpbb.com/phpBB/viewforum.php?f=16 ONLY 
##         This is an example mod meant to empower you and will not install with Easy Mod.
############################################################# 
## Installation Level: Easy (to install) Moderate (to customize)
## Installation Time:  ~1 Minute 
## Files To Edit:      2 
##      /includes/bbcode.php 
##      /templates/subSilver/bbcode.tpl 
##      
## Included Files:     9
##   phpbb root/images/bubble_01.gif
##   phpbb root/images/bubble_02.gif
##   phpbb root/images/bubble_03.gif
##   phpbb root/images/bubble_04.gif
##   phpbb root/images/bubble_05.gif
##   phpbb root/images/bubble_06.gif
##   phpbb root/images/bubble_07.gif
##   phpbb root/images/bubble_08.gif
##   phpbb root/images/bubble_09.gif
## 
############################################################# # 
## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD 
############################################################# # 
# 
#-----[ COPY ]------------------------------------------------ 
# 
copy phpbb root/images/ to your phpbb root/images/*.* 

// and make a note of this directory, you'll need in a minute.

# 
#-----[ OPEN ]------------------------------------------------ 
# 
includes/bbcode.php 

# 
#-----[ FIND ]------------------------------------------------ 
# 

// [QUOTE] and [/QUOTE] for posting replies with quote, or just for quoting stuff. 
$text = str_replace("[quote:$uid]", $bbcode_tpl['quote_open'], $text); 
$text = str_replace("[/quote:$uid]", $bbcode_tpl['quote_close'], $text); 

# 
#-----[ AFTER, ADD ]----------------------------------------- 
# 
   // [cartoon] and [/cartoon] for posting text in a cartoon dialogue balloon. 
$text = str_replace("[cartoon]", $bbcode_tpl['cartoon_open'], $text);
$text = str_replace("[/cartoon]", $bbcode_tpl['cartoon_close'], $text);


#
#
# CUSTOMIZE NOTES: This is the basic method of creating bbcode
# you can make other backgrounds and this is where you set the commands to use 
# the code in phpbb.
#
# so let's say you wanted to make another background.
# you would come back here, and enter this code again.
# Replace all the commands with the words "cartoon" with your own new title.
# 
# Proceed to the next tutorial section for what to do next.
#
#


# 
#-----[ OPEN ]------------------------------------------------ 
# 
/templates/subSilver/bbcode.tpl 

# 
#-----[ FIND ]------------------------------------------------ 
# 

<!-- END email --> 

# 
#-----[ AFTER, ADD ]----------------------------------------- 
#
# NOTES: Not everyone uses phpbb as their index page. This code assumes you do not.
# the directory you were asked to remember is very important now.
# DO NOT CUT AND PASTE THIS CODE: 
# read it, and replace the example directiory with your own. 
# It is not required to enter http://www.yourdomain.com/
#
 
<!-- BEGIN cartoon_open -->
    <TABLE WIDTH=80% BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<tr>
    <TD width="61"><IMG SRC="YOUR PHPHBB ROOT/images/bubble_01.gif" WIDTH=61 HEIGHT=54 ALT=""></TD>
    <TD width="436" background="YOUR PHPBB ROOT/images/bubble_02.gif"></TD>
    <TD width="29"><IMG SRC="YOUR PHPBB ROOT/images/bubble_03.gif" WIDTH=29 HEIGHT=54 ALT=""></TD>
    </tr>
<tr>
    <TD height="69" background="YOUR PHPBB ROOT/images/bubble_04.gif"></TD>
    <TD background="YOUR PHPBB ROOT/images/bubble_05.gif"><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">

#
# Another NOTE: regarding this tag: '<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">'
# THis is entirely optional. You can choose preset sizes and faces if you like.
# Also, adding html like <blockquote> will help to center the text in the bubble and make it look a lot better.
# But none of this is required.
#

<!-- END cartoon_open -->

<!-- BEGIN cartoon_close -->
    </font></td>

#
# NOTE AGAIN: IF you chose to use font and html tags for the text, then you want to close them here.
# and by here i mean where the </font> tag is above.
#


    <td background="YOUR PHPBB ROOT/images/bubble_06.gif"></td>
</tr>
<tr>
    <td><IMG SRC="YOUR PHPBB ROOT/images/bubble_07.gif" WIDTH=61 HEIGHT=30>
    </td>
    <td background="YOUR PHPBB ROOT/images/bubble_08.gif"></TD>
    <td><IMG SRC="YOUR PHPBB ROOT/images/bubble_09.gif" WIDTH=29 HEIGHT=30>
    </td>
    </tr>
</table>
<!-- END cartoon_close -->

# 
#-----[ SAVE/CLOSE ALL FILES ]-------------------------------- 
# 
# CUSTOMIZE NOTES:
#
# This layout and these images were created by me in a simple image editing application
# you can easily create any backgrounds you want, and then lay the pieces out into html.
# 
# the corners should be placed images (see code above) but to make the background
# able to change with the size of the post, you need to make all the other images 
# background files.
#
# IT IS NOT ENOUGH TO SIMPLY CHANGE MY IMAGES TO YOUR OWN.
# this will work, but it will look lousy.
#
# You can add as many different backgrounds as you like.
# simply follow steps one and two here (using your images and your html)
# and you have a nice way to customize your phpbb posts.
#
# HOW TO CALL THE CODE:
# this is where this is not complete.
# you can show my example here (once properly installed) by creating a new message
# and using the bbcode you wrote to call it:
# 
# [cartoon] enter your message [/cartoon]
#
# NOW you should understand better why i urged you (mid mod) to worry about details 
# like <font> and <blockquote> tags in the code itself.
#
# You can either go back and add them.
# Or you can enable these HTML commands in the admin control panel/general controls 
# and then add them into your posts.
#
# The problem is:
# I have no idea how to make these new backgrounds into dropdown or button menus 
# for users to select from the posting pages.
#
# I find this handy so that only the admins and mods (and crafty view source heads) can
# use these backgrounds.
#
# You may want them to be for everyone...
#
# In that case, i suggest you contribute to this mod, and make it happen.
#
# I hope it worked out, and i really hope you understood me.
# good luck and have fun!
#
# dubtribe
# http://www.imperialdub.com
#
# EoM 

totoelectro
Registered User
Posts: 358
Joined: Tue Dec 11, 2001 8:47 am
Location: Nimes (South of France)
Contact:

Post by totoelectro »

great idea :wink:

User avatar
SixthSphere
Registered User
Posts: 116
Joined: Fri Aug 08, 2003 4:32 pm

Post by SixthSphere »

now THAT is cool... awesome idea
Are you a Saturn Car Enthusiast?
Check out www.SixthSphere.com!

User avatar
Cryo
Registered User
Posts: 455
Joined: Tue Oct 21, 2003 5:28 pm
Location: Canada
Name: Chris
Contact:

Post by Cryo »

Wow that is cool gonna add it right away good job!

User avatar
Rookie7
Registered User
Posts: 189
Joined: Mon Mar 10, 2003 3:32 pm
Contact:

Post by Rookie7 »

Very nice!

User avatar
LaZeR
Registered User
Posts: 671
Joined: Sat Jun 29, 2002 8:38 pm
Contact:

Post by LaZeR »

Yes indeed :wink: Meant to say before thanks for sharing this and good idea branching it off this way from the other thread as we sorta took it in a different direction.

I may even add this if I can get ahold of those other two captions-bubbles -The notepaper and thinkbubble :?: I assume the general instructions would apply to these also by simply creating the new bbcode(s) by the example and replacing the image directives?

danb00
Registered User
Posts: 1025
Joined: Sun Dec 15, 2002 9:41 pm
Location: Inside Mod:Extreme PHPBB
Contact:

Post by danb00 »

hmmm


now personally why dont you team up with the person doing the post in a pic thing

then that way you could improve it and add more stuff
phpBBModded.com - Modding phpBB

danb00
Registered User
Posts: 1025
Joined: Sun Dec 15, 2002 9:41 pm
Location: Inside Mod:Extreme PHPBB
Contact:

Post by danb00 »

quick little fix

Code: Select all

<!-- BEGIN cartoon_open --> 
    <TABLE WIDTH=80% BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0> 
<tr> 
    <TD width="61"><IMG SRC="YOUR PHPHBB ROOT/images/bubble_01.gif" WIDTH=61 HEIGHT=54 ALT=""></TD> 
    <TD width="436" background="YOUR PHPBB ROOT/images/bubble_02.gif"></TD> 
    <TD width="29"><IMG SRC="YOUR PHPBB ROOT/images/bubble_03.gif" WIDTH=29 HEIGHT=54 ALT=""></TD> 
    </tr> 
<tr> 
    <TD height="69" background="YOUR PHPBB ROOT/images/bubble_04.gif"></TD> 
    <TD background="YOUR PHPBB ROOT/images/bubble_05.gif"><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"> 


really should be (will cause less problems and should work better)

Code: Select all

<!-- BEGIN cartoon_open --> 
    <TABLE WIDTH=80% BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0> 
<tr> 
    <TD width="61"><IMG SRC="images/bubble_01.gif" WIDTH=61 HEIGHT=54 ALT=""></TD> 
    <TD width="436" background="images/bubble_02.gif"></TD> 
    <TD width="29"><IMG SRC="images/bubble_03.gif" WIDTH=29 HEIGHT=54 ALT=""></TD> 
    </tr> 
<tr> 
    <TD height="69" background="images/bubble_04.gif"></TD> 
    <TD background="images/bubble_05.gif"><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"> 
As the phpbb root patch is already given :)

Now the other part that has the fonts in it

Code: Select all

    <td background="images/bubble_06.gif"></td> 
</tr> 
<tr> 
    <td><IMG SRC="images/bubble_07.gif" WIDTH=61 HEIGHT=30> 
    </td> 
    <td background="images/bubble_08.gif"></TD> 
    <td><IMG SRC="images/bubble_09.gif" WIDTH=29 HEIGHT=30> 
    </td> 
    </tr> 
</table> 
<!-- END cartoon_close --> 

Code: Select all

why not for

<font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif">
instead of hardcoding it into the mod, get it to use the template .css
phpBBModded.com - Modding phpBB

dubtribe
Registered User
Posts: 61
Joined: Sun Dec 14, 2003 12:48 am

Post by dubtribe »

LaZeR wrote: Yes indeed :wink: Meant to say before thanks for sharing this and good idea branching it off this way from the other thread as we sorta took it in a different direction.

I may even add this if I can get ahold of those other two captions-bubbles -The notepaper and thinkbubble :?: I assume the general instructions would apply to these also by simply creating the new bbcode(s) by the example and replacing the image directives?


Hi,
glad you like it.

dig, this was a tutorial for making your own backgrounds, and using the code (credited in my tutorial's header) to develop your own cool backgrounds and insert them with bbcode into any post you like on your board.

i just scanned some torn paper, and then made a simple table, inserted the pictures until it looked ok, and then applied the code as described in the mod.

in theory, you could really use anything as a bbcode inserted background.

mess with it. have fun.

come back please, and show us what you did!

dss

dubtribe
Registered User
Posts: 61
Joined: Sun Dec 14, 2003 12:48 am

Post by dubtribe »

danb00 wrote: quick little fix


Thank you for looking over the code.
This was intended as a tutorial to assist a few people in making custom backgrounds for their posts as bbcode.

in the turotial notes i explained why i used the root dir, and not a simple ../.*. formulae. essentially, not everyone has phpbb in the same place. and as this was not meant to be a cut and use mod, but a path to empower your mind and show you how you could literally use anything as a background in a post, i felt it was better (in a way) to obstruct the code to get you thinking about where you keep these files and how the code works.

maybe that was kinda lame... dunnoe.

as for teaming, i am so down to team. i posted within the forum and was essentially overlooked.

another person was asking me about how to make this a post by post option, so i thought i would attempt to stimulate development and code education by sharing the solution i came up with.

i am always into sharing whatever will be useful with anyone who is developing a mod.

thanks again.

dss

danb00
Registered User
Posts: 1025
Joined: Sun Dec 15, 2002 9:41 pm
Location: Inside Mod:Extreme PHPBB
Contact:

Post by danb00 »

what i mean is

there is no need to add the full url for the file

as if it's a phpbb mod

then it's got to be calledup in the phpbb root

so no need for a full url :)

this works fine and will cause less errors :)


as on some servers you get this when doing it your way

http://fullsitetoim.com/forum/images/test.gif

now it will then try and load an image,and will display it like this!
http://fullsitetoim.com/fforum/http://f ... s/test.gif

or something like it.
phpBBModded.com - Modding phpBB

User avatar
LaZeR
Registered User
Posts: 671
Joined: Sat Jun 29, 2002 8:38 pm
Contact:

Post by LaZeR »

dubtribe wrote: i just scanned some torn paper, and then made a simple table, inserted the pictures until it looked ok, and then applied the code as described in the mod.


8) By following your tutorial and peeking at your "source" I was able to pull off the [paper] code. (oh yea I sorta borrowed your images from my "cache") :lol:

But I haven't been able to get the comic looking cloud bubble hicky to look right. - Noticed yours doesn't seem to either. Oh well nifty how it is anyhow. Thanks again for sharing the code.

theanimewizard
Registered User
Posts: 646
Joined: Tue Jul 08, 2003 9:24 pm
Contact:

Post by theanimewizard »

WOW, greay BBCodes =P

ESQARE
Translator
Posts: 181
Joined: Fri Aug 08, 2003 9:49 pm
Location: Turkey
Contact:

Post by ESQARE »

Thanks dubtribe. very good :D

User avatar
TurtleX
Registered User
Posts: 245
Joined: Sat Apr 24, 2004 9:19 pm

Post by TurtleX »

Wow! Great mod. Do you mind if I use the images from your site? I like the torn paper and cards.

Post Reply

Return to “[2.0.x] MODs in Development”