UBB.Developers Forums UBB.threads 6 V6 Modifications Templates [6.2 - 6.5] 5x3 array table wrappers mod

What is it?: A little more complex version of the original table wrappers mod. This one allows for smaller graphic files and more detailed graphics effects.

Why should you care?: It's a good way to dress up the table wrappers on your Threads site

Props to JustDave for making the whole table wrapper idea a reality. This is really his mod

Example: Check out the link in my signature. The graphics in this set do not have my domain name or binary. They do have the name of the style sheet at the top left, and UBB Threads at the bottom right.

Installation:

Back up yout tbopen.tmpl and tbclose.tmpl file -do it now...

Take a look at the tbopen and tbclose templates that I'm including with this mod. Edit the path to the graphics to match your site name and the path were you install the graphics for this mod.

The CSS files I've included are not complete! They just contain the extra classes that you'll need for this graphic set. My advice is to cut and past the contents of each one to it's corresponding style sheet via the admin panel (they are all default styles that come with Threads). You'll have to edit the path to match your domain and the directory where you installed the graphics.

Upload all the files to your server, making sure to put the tbopen.tmpl and tbopen.tmpl file in your templates/default directory.

Enjoy

Version 1.0 -initial release
Version 1.1 -fixed a missing closing table cell tag.
Version 1.2 -fixed the directory structure in the templates to stop bandwidth leaches.

You da man! Thanks.

Check your email

Thank you thank you!

Cool In was able to shave a few hundred bytes off my top image since it is now broken up in 3 images with only the top left containing the actual image. The rest are alot smaller than the ones you have packaged up with most being 41 bytes. However I can't get past the Photo Quality Images I use in that NOW top left image. The smallest one I have done is 1450bytes which beats the 1750bytes before.

I went one step further knowing graphics a bit and converted the gif down to a jpg which shaved it down to 1125bytes.

Most of the graphics you have packaged up can be compressed to one half or even a quarter of their size with any good graphics compression program. This will help save bandwidth and load time as well. This is what I had to do as we would not even want to try to load the images I created without compressing them.

I like this way of doing the table wrapper because the images are easier to work with.

I never really thought about compressing them further because they are already pretty small. Once they are downloaded to the clients browser cahce they won't be pulled from your web server again unless they refresh / reload a page or they clear their cache.

Why don't you send that image you use to me so I can see what I can do with it?

I am using the same program you are on your advice. Fireworks!

What I am saying is that compressing them saves load time. My side and corner graphics are 41K instead of 80-150k like the ones in your file. I am just saying that if you compress what you have then people will save time loading them. Alot of time people like you and I forget there are still people on dialup access. Thats why I try and compress things as much as possible. I doubt you can compress my topleft.jpg any more than I could. Your welcome to try but Photo Quality images only compress so far without losing quality.

What you did here is great. It saves file size a bit and anything saved is just that much better. You are becoming quite the template wizard.

Thanks

FireWorks is the only way to go for web design! Photoshop is cool, but FW is geared more toward designing graphics for a web site.

BTW: I'm on a 64K ISDN line in Italy. I know all about slow dial up

Here is the FireWorks PNG file for this mod.

I have cable access so I thought I would point out graphics sizes to you. I have alot of users that are mixed and when I design things I try and compress things as much as possible because there are alot of dialup people out there.

I especially have to be very careful as all the table wrappers I have designed so far the top one includes a photo quality image.

Or should I say now the top left one will contain a photo quality image. Yeah I appreciated the advice a few days back. I have been trying out fireworks and have been impressed. Although I compress the graphics more after designing them in fireworks.

Hey Dalantech I do have a specific question since you are very familiar to Fireworks and I am new to it.

How do you so those indented boxes that you place the binary and your site name in? I was thinking about doing one of them on my bottom right corner with my site name as well.

Here is how it's done:

• Use the rectagle tool to draw a rectangle. You can use the Window / Effect tool set to define the size.
• Go to Window / Object and set the roundness to 100%.
• Go back to the effects window and select Bevel and Embose / Inner Bevel. Set it to flat and inverted with an angle of 135 (all other settings just take the default).

...and you're done

I've attached a file with the frame I used for the graphics set and three grey bars showing the progresion of the effect. Just click on them and take a look at what I've done.

Also go to view / grid and make sure show grid and snap to grid are selected. Also go to edit grid and set it to 10 x 10 pixels, if it's not set to 10 x 10 already (makes using the file easier).

Thanks I will give it a try.

Great hack Dalantech, much thanks. But there seems to be a problem with my site. It may be that I have the Who's Online box or Side-Bar. Anyways, here's a link to the page in question. The right bar around the main section as well as bottom aren't showing up.

BTW, if you want some extra border graphics, I could try to pop out a few. Any ideas or requests?

There is no hyperlink in your post, but I can tell you that if you do not see the right side or bottom then there is an extra closing table cell, table row, and or table tag somewhere that's killing off the html in the $tbopen variable. Look for closing tags where they should not be...

Ack. Sorry about that, don't know what happened. The URL is drumlines.org. I'll head off to look for those closing tags. Thanks!

I give up. I'm using the $tbopen template that came with your zip, so that can't be the problem. I looked through ubbthreads.tmpl, but there are just tables within tables and all kinds of table tags. Too much to trace for this chico. Thanks for your help, though!

It's not a problem with the files that I posted, it's a problem in the script / html that you are trying to use the table wrappers on. Somewhere in your file is a /td /tr and or /table where it's not suppose to be, so the closing table tags in the $tbclose variable are being ignored.

I had the same problem with the Priavay page I scripted recently. It turned out that I had some closing table tags in my privacy statement html that were causing the table wrappers to get cut off. If there is an error that effects the html in $tbclose you'll see it as missing graphics on the right side, bottom corners, and bottom of the table that's suppose to have the graphic wrapper around it.

In short: If you're not going to post your script so I (or someone else) can review it for you then you're gonna have to debug it yourself. I can't help you if you are only going to make half a post and then claim that the error is in my script...

P.S. It's working on my site, and many others...

Also, in my post there is a copy of a corrected ubbthreads.tmpl file. Did you upload it to your /templates/default directory?

Did you change all of the image urls in the tbopen.tmpl and tbclose.tmpl to your site and the directory where you stored the graphics?

Did you change all the background image urls in the CSS classes to your site and the directory on your server where you stored the images?

Whoa there pardner. I never said it was a problem with your file. I just thought you meant there was a problem in my $tbopen when you said, "...table tag somewhere that's killing off the html in the $tbopen variable." I guess I misread that.

And I don't know if I uploaded your copy of ubbthreads.tmpl from the old post. I have to fire up the ol' Beyond Compare later.

And I didn't know you wanted me to post my script. I'm new here, and if that's protocol, I wasn't aware and I'm sorry. I just thought the Infopop police didn't want entire scripts posted to the public. But I'll attach it to this post.

Not trying to bad-mouth your hack. I do appreciate all the work you have put into it. Kudos! And let's all just get along.

P.S. I attached the file as a .txt and it turned out partially ran, so I'm just going to quote it below.

[]
<? //UBBTREMARK

echo <<<UBBTPRINT

$only_favs

$BirthdayGreeting

$tbopen

UBBTPRINT;



for($c=0;$c<$catsize;$c++) { //UBBTREMARK

echo <<<UBBTPRINT

<!-- CATEGORY LOOP START -->

<tr>

<td colspan="5" class="cleartable"><img src="{$config['images']}/blank.gif" width="1" height="1" alt="*" /></td>

</tr>

<tr>

<td align="center" valign="top" class="tdheader">

<table border="0" cellpadding="0" cellspacing="0"><tr><td class="{$catrow[$c]['NewMarker']}">

{$catrow[$c]['ToggleLink']}

</td></tr></table>

</td>

<td class="tdheader">

<img $imagestyle src="{$config['images']}/about.gif" alt="{$catrow[$c]['CatDesc']}{$catrow[$c]['NotShown']}" title="{$catrow[$c]['CatDesc']}{$catrow[$c]['NotShown']}" />

{$catrow[$c]['CatTitle']}

</td>

<td class="tdheader" align="center" width="9%">

{$ubbt_lang['THREAD_TEXT']}

</td>

<td class="tdheader" align="center" width="9%">

{$ubbt_lang['POSTS_TEXT']}

</td>

<td class="tdheader" align="center" width="40%">

{$ubbt_lang['LAST_POST']}

</td>

</tr>



<!-- BEGIN FORUM CODE LOOP _ DO NOT ALTER COMMENTS -->

UBBTPRINT;

for($f=0;$f<$forumsize[$c];$f++) { //UBBTREMARK

echo <<<UBBTPRINT

<tr>

<td valign="top" class="darktable">

<img src="{$config['images']}/{$forum[$c][$f]['boardfolder']}" alt="" />

</td>

<td class="darktable">

<font class="forumtitle">

<a href="{$config['phpurl']}/postlist.php?Cat=$Cat&Board={$forum[$c][$f]['Keyword']}">

{$forum[$c][$f]['Title']}

</a>

</font>

<br />

<table cellpadding="0" cellspacing="0">

<tr>

<td>

 

</td>

<td class="forumdescript">

{$forum[$c][$f]['Description']}

</td>

</tr>

</table>

{$forum[$c][$f]['modlist']}

</td>

<td align="center" class="threadtotal" nowrap="nowrap">

{$forum[$c][$f]['Threads']}

{$forum[$c][$f]['showthreads']}

</td>

<td align="center" class="posttotal" nowrap="nowrap">

{$forum[$c][$f]['Total']}

{$forum[$c][$f]['showposts']}

{$forum[$c][$f]['showna']}

</td>

<td class="posttime" nowrap="nowrap">

{$forum[$c][$f]['lastpost']}

<br />

     

{$forum[$c][$f]['lastposter']}

- {$forum[$c][$f]['time']}

</td>

</tr>

UBBTPRINT;

} //UBBTREMARK

} //UBBTREMARK

echo <<<UBBTPRINT

<!-- END CATEGORY LOOP -->

<!-- END OF FORUM LOOP -->

</table>

</td>

</tr>

</table>



<br />



<!-- WHOS ONLINE BOX MODIFICATION START -->

$tbopen

<tr>

<td class="tdheader">



Who's Online



</td>

</tr>

<tr>

<td class="lighttable">



{$whosOnline}



</td>

</tr>

$tbclose

<br />

<!-- WHOS ONLINE BOX MODIFICATION END -->



$tbopen

<tr>

<td colspan="3" class="tdheader">

<b>{$ubbt_lang['B_INFO']}</b>

</td>

</tr>

<tr>

<td width="45%" valign="top" class="lighttable">

<span class="small">

$welcomemessage

<br />

$toggleshowstart

$currentshow

$toggleshowstop

<br />

$registered {$ubbt_lang['REGED_USERS']}

<br />

{$ubbt_lang['NEW_MEM']}

<a href="{$config['phpurl']}/showprofile.php?User=$encnewusername&What=ubbthreads&Cat=$Cat">

$newusername

</a>

<br />

{$ubbt_lang['C_ONLINE']} $r {$ubbt_lang['C_ONLINE2']} $a {$ubbt_lang['C_ONLINE3']}

<br />

$edittimelinkstart{$ubbt_lang['OFFSET_TIME']}$edittimelinkstop

$time

</span>

</td>

<td width="30%" valign="top" class="lighttable">

<span class="small">

<b>{$ubbt_lang['VIEW_PAST']}</b>

<br />







<a href="{$config['phpurl']}/dosearch.php?Cat=$Cat&Forum=All_Forums&Words=&Match=Entire+Phrase&Old=1day&Limit=25">

{$ubbt_lang['PAST24']}

</a>

<br />







<a href="{$config['phpurl']}/dosearch.php?Cat=$Cat&Forum=All_Forums&Words=&Match=Entire+Phrase&Old=2days&Limit=25">

{$ubbt_lang['PAST48']}

</a>

<br />







<a href="{$config['phpurl']}/dosearch.php?Cat=$Cat&Forum=All_Forums&Words=&Match=Entire+Phrase&Old=1week&Limit=25">

{$ubbt_lang['PAST7']}

</a>

</span>

</td>

<td valign="top" class="lighttable">

<b>{$ubbt_lang['LEGEND']}</b>

<table border="0" cellpadding="0" cellspacing="2">

<tr>

<td>

<img src="{$config['images']}/newposts.gif" alt="*" />

</td>

<td class="small">

 {$ubbt_lang['L_NEW']}

</td>

</tr>

<tr>

<td>

<img src="{$config['images']}/nonewposts.gif" alt="*" />

</td>

<td class="small">

 {$ubbt_lang['L_NONEW']}

</td>

</tr>

<tr>

<td align="center">

<img class="newpostsincat" src="{$config['images']}/catexpand.gif" alt="{$ubbt_lang['CATLEGEND']}" />

</td>

<td class="small">

 {$ubbt_lang['L_NEW']}

</td>

</tr>

<tr>

<td align="center">

<img src="{$config['images']}/catexpand.gif" alt="{$ubbt_lang['CATLEGEND']}" />

</td>

<td class="small">

 {$ubbt_lang['L_NONEW']}

</td>

</tr>

</table>

<!--Start of Birthday Mod - by JoshPet-->

<tr class="lighttable">

<td class="small" valign="top" colspan="3">

<b>$TodayIntro</b> $todaybday

<b>$MonthIntro</b> $thismonthbday

$BirthdayWarning

</td>

</tr>

<!--Birthday Mod End-->

</td>

</tr>

$tbclose



<br />



UBBTPRINT;

/* UBBTREMARK */ ?>
[/]

You can post templates and bits of scripts.

We can't post any whole or modified infopop scripts as they are copyrighted, but my understanding is that we can post template files.

Welcome.

There was a goofy ubbthreads.tmpl file that came with 6.2 (myhome.tmpl too). Those have been fixed in 6.2.1. But they created havoc with tablewrappers.

Sorry, I reread my reply to you and realized that it came out kinda harsh (and that was not my intention).

Now let's fix your script

Look for



It should be



That should fix it for you

That did the trick! Thanks much.

No problem , and sorry about the earlier post. I really didn't mean to come accross so abrasive

nice work with this

Coming from someone like you that's high praise, thanks!

There was a missing closing table cell tag in the tbclose.tmpl file that, odly enough, only showed up under IE 5.2.2 on the Mac! The zip in the initial post has been updated. If you want to fix your tbclose.tmpl file look for



and replace that with



Sorry for the inconvenience:(

Ah; just found this. I dont suppose someone could explain to be how export the PNG file (in Fireworks) once I've made my changes?

Do you mean "how do I cut graphics in Fireworks?" ?

Michael Under file menu there should be an option to export as a gif. If you just save it then it is PNG by default

Door knob here... I get spacer.gif with missing images around my tables.. I know I am missing something here. Should I change the spacer.gif to the appropiate images for the theme? But if I do this doesn't that keep the same images for all the style sheets since they all use the same open close template?

Got it duh.... wrong url path forgot to add ubbthreads

Hmm..I am not sure what original CSS I modified to get my current EFS look.Dalantech do you have any suggestions on which one of your CSS sheets I should append to mine? Eventually I will have to modify the .png file to get my own color scheme but I want to get a feel for the look first.

[edit]Hmm well I started with using the greenday.css values and It doesnt quite seem to work like it should...[/edit}

You could use any one of the addtional style sheets classes that are included in the mod. Just make sure you upload all the graphics, templates, and you edit one of the CSS sheets to include the new classes. Don't forget to change the path info in the templates and CSS!

I used greenday.css and it seems to have changed my IIP index page layout.How do I make the pal boxes smaller again? Also I am fairly new to Fireworks also..I managed to edit your .png file to get my own color scheme but do you think maybe you could point me in the right direction on making the individual .gif files for my wrappers? I'm trying to avoid the tutorial How do I make the gifs from the png?

The table wrapper will only "shrink" down to 180 pixels wide. If the pal boxes look a little wider then it's normal. Kinda tough to get an decent effects with less than 90 pixels on each side.

As for cutting gif files: Set the grid to 10 x 10 pixels and enable "snap to grid". Then use the mask tool to highlight the areas that you want to cut into gifs. Make sure you set alpha transperancy before you cut the corners

only my left side PAL boxes are wider than they were before.The right side is the same.

The right side may have been large enough so that the table wrappers don't have an effect.

lol ok...I hate to be a bother but if you look at my signature link can you tell me why the right side PAL boxes are the correct size and the left side pal boxes changed? They were identical sizes before