PDA

View Full Version : Rounded Category Strip Borders Tutorial


semann
08-01-2006, 09:18 AM
For Displaying only in Forum Index:

In ForumHome > froumbit level1 nopostç

Replace All With:

<if condition="$forum[forumid] == 1">
<else />
</table>
<!-- bottom table setup -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="70" align="left" valign="top"><img src="$stylevar[imgdir_misc]/footer_left.gif" alt="" height="17"/></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/botcenter.gif)"><img src="$stylevar[imgdir_misc]/footer_bg.gif" alt="" width="100%" height="17" border="0"/></td>
<td width="70" align="right" valign="top"><img src="$stylevar[imgdir_misc]/footer_right.gif" alt="" height="17"/></td>
</tr>
</table>
<!-- End bottom table setup -->

<br />



</if>
<!-- top category table setup -->

<table width="100%" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="44" height="34" align="left" valign="top"><img src="$stylevar[imgdir_misc]/header_left.gif" alt="" width="44" height="34"/></td>
<td width="100%" class="tcat" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" valign="middle">


<div align="left"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><b>$forum[title]</b></a></div>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>


</td>
<td width="59" height="34" align="right" valign="top"><img src="$stylevar[imgdir_misc]/header_right.gif" alt="" width="59" height="34"/></td>
</tr>
</table>
<!-- End top category table setup -->

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="5%">&nbsp;</td>
<td class="thead" width="50%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="30%">$vbphrase[last_post]</td>
<td class="thead" width="5%">$vbphrase[threads]</td>
<td class="thead" width="5%">$vbphrase[posts]</td>
<if condition="$vboptions[showmoderatorcolumn]">
<td class="thead" width="5%">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
You'll need this images in /misc:
footer_bg.gif
footer_left.gif
footer_right.gif
header_bg.gif
header_left.gif
header_right.gifCustomize the red values.

For showing in Postbit Legacy:

Replace all Postbit > postbit_legacy:


<!-- post #$post[postid] -->
<if condition="$show['spacer']">
$spacer_open
<div id="edit$post[postid]" style="padding:0px 0px $stylevar[cellpadding]px 0px">
<if condition="!$post['islastshown']"><!-- this is not the last post shown on the page --></if>
</if>
<!-- top category table setup -->

<table width="100%" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="24" height="34" align="left" valign="top"><img src="$stylevar[imgdir_misc]/header_left.gif" alt="" width="44" height="34"/></td>
<td width="100%" class="tcat" style="background-image:url($stylevar[imgdir_misc]/header_bg.gif)" valign="middle">
$post[title]</td>
<td width="24" height="34" align="right" valign="top"><img src="$stylevar[imgdir_misc]/header_right.gif" alt="" width="59" height="34"/></td>
</tr>
</table>
<!-- End top category table setup -->

<table id="post$post[postid]" class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center">
<tr>
<if condition="$show['announcement']">
<td class="thead" style="font-weight:normal" colspan="2">
<img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" />
<phrase 1="$post[startdate]" 2="$post[enddate]">$vbphrase[x_until_y]</phrase>
</td>
<else />
<td class="thead" style="font-weight:normal" $post[scrolltothis]>
<!-- status icon and date -->
<a name="post$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /></a>
$post[postdate]<if condition="!$show['detailedtime']">, $post[posttime]</if>
$post[firstnewinsert]
<!-- / status icon and date -->
</td>
<td class="thead" style="font-weight:normal" align="$stylevar[right]">
&nbsp;
<if condition="$show['postcount']">#<a href="showpost.php?$session[sessionurl]p=$post[postid]&amp;postcount=$post[postcount]" target="new" rel="nofollow" id="postcount$post[postid]" name="$post[postcount]"><strong>$post[postcount]</strong></a></if>
<if condition="$show['inlinemod']">
<input type="checkbox" name="plist[$postid]" id="plist_$postid" style="vertical-align:middle; padding:0px; margin:0px 0px 0px 5px" value="$post[checkbox_value]" onclick="inlineMod.toggle(this)" />
</if>
</td>
</if>
</tr>
<tr valign="top">
<td class="alt2" width="175">

<if condition="$show['avatar']">
<div class="smallfont">
&nbsp;
<div align="left"><br />
<a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]
</phrase>
" border="0" /></a>
</div>
</div>
</if>

<div class="info" id="postmenu_$post[postid]">
<if condition="$show['profile']">
<a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>
<script type="text/javascript"> vbmenu_register("postmenu_$post[postid]", true); </script>
<else />
$post[musername]
</if>
</div>

<div class="smallfont">
<if condition="$post['musername']"><div class="pb_userinfo"><b>Name:</b> $post[musername]</div></if>
<if condition="$post['usertitle']"><div class="pb_userinfo"><b>Title:</b> $post[usertitle]</div></if>
<if condition="$post['joindate']"><div class="pb_userinfo"><b>$vbphrase[join_date]:</b> $post[joindate]</div></if>
<if condition="$post['field2']"><div class="pb_userinfo"><b>$vbphrase[location_perm]:</b> $post[field2]</div></if>
<if condition="$post['age']"><div class="pb_userinfo"><b>$vbphrase[age]:</b> $post[age]</div></if>
<div class="pb_userinfo"><b>$vbphrase[posts]:</b> $post[posts]</div>
<if condition="$show['reputation']"><div class="pb_userinfo"><if condition="$show['reppower']"><b>$vbphrase[reppower]:</b> $post[reppower]</if>$post[reputationdisplay]</div></if>
<div align="center">
&nbsp;$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon]</div>
</div>

</td>
<if condition="$show['moderated']">
<td class="alt2" id="td_post_$post[postid]">
<else />
<td class="alt1" id="td_post_$post[postid]">
</if>

<if condition="$show['messageicon'] OR $post['title']">
<!-- icon and title -->
<div class="smallfont">
<if condition="$show['messageicon']"><img class="inlineimg" src="$post[iconpath]" alt="$post[icontitle]" border="0" /></if>
<if condition="$post['title']"><strong>$post[title]</strong></if>
</div>
<hr size="1" style="color:$stylevar[tborder_bgcolor]" />
<!-- / icon and title -->
</if>

<!-- message -->
<div id="post_message_$post[postid]">$post[message]</div>
<!-- / message -->

<if condition="$show['attachments']">
<!-- attachments -->

<div style="padding:$stylevar[cellpadding]px">

<if condition="$show['thumbnailattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_thumbnails]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[thumbnailattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<div style="padding:$stylevar[formspacer]px">
$post[imageattachments]
</div>
</fieldset>
</if>

<if condition="$show['imageattachmentlink']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_images]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[imageattachmentlinks]
</table>
</fieldset>
</if>

<if condition="$show['otherattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attached_files]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[otherattachments]
</table>
</fieldset>
</if>

<if condition="$show['moderatedattachment']">
<fieldset class="fieldset">
<legend>$vbphrase[attachments_pending_approval]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
$post[moderatedattachments]
</table>
</fieldset>
</if>

</div>
<!-- / attachments -->
</if>

<if condition="$post['signature']">
<!-- sig -->
<div>
__________________<br />
$post[signature]
</div>
<!-- / sig -->
</if>

<if condition="$show['postedited']">
<!-- edit note -->
<div class="smallfont"> <hr size="1" style="color:$stylevar[tborder_bgcolor]" />
<em>
<phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]">$vbphrase[last_edited_by_x_on_y_at_z]</phrase>.
<if condition="$post['edit_reason']">$vbphrase[reason]: $post[edit_reason]</if>
</em>
</div>
<!-- / edit note -->
</if>

</td>
</tr>
<tr>
<td class="alt2">
$post[onlinestatus]
<if condition="$show['reputationlink']"><a href="#" onclick="reputation($post[postid]); return false;"><img class="inlineimg" src="$stylevar[imgdir_button]/reputation.gif" border="0" alt="<phrase 1="$post[username]">$vbphrase[add_to_xs_reputation]</phrase>" /></a></if>
<if condition="$show['reportlink']"><a href="report.php?$session[sessionurl]p=$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_button]/report.gif" alt="$vbphrase[report_bad_post]" border="0" /></a></if>
$post[iplogged]
&nbsp;
</td>
<if condition="$show['moderated']">
<td class="alt2" align="$stylevar[right]">
<else />
<td class="alt1" align="$stylevar[right]">
</if>
<!-- controls -->
<if condition="$post['editlink']">
<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
</if>
<if condition="$post['forwardlink']">
<a href="$post[forwardlink]"><img src="$stylevar[imgdir_button]/forward.gif" alt="$vbphrase[forward_message]" border="0" /></a>
</if>
<if condition="$post['replylink']">
<a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
</if>
<if condition="$show['quickreply'] AND !$show['threadedmode']">
<a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>
</if>
<if condition="$show['moderated']">
<img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" />
</if>
<!-- / controls -->
</td>
</tr>
</table>
<!-- bottom table setup -->
<table border="0" width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="70" align="left" valign="top"><img src="$stylevar[imgdir_misc]/footer_left.gif" alt="" height="17"/></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/footer_bg.gif)"><img src="$stylevar[imgdir_misc]/footer_bg.gif" alt="" width="100%" height="17" border="0"/></td>
<td width="70" align="right" valign="top"><img src="$stylevar[imgdir_misc]/footer_right.gif" alt="" height="17"/></td>
</tr>
</table>
<!-- End bottom table setup -->

<!-- post $post[postid] popup menu -->
<div class="vbmenu_popup" id="postmenu_$post[postid]_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$post[username]</td>
</tr>
<if condition="$show['profile']">
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$post[userid]">$vbphrase[view_public_profile]</a></td></tr>
</if>
<if condition="$show['pmlink']">
<tr><td class="vbmenu_option"><a href="private.php?$session[sessionurl]do=newpm&amp;u=$post[userid]"><phrase 1="$post[username]">$vbphrase[send_private_message_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['emaillink']">
<tr><td class="vbmenu_option"><a href="sendmessage.php?$session[sessionurl]do=mailmember&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_email_to_x]</phrase></a></td></tr>
</if>
<if condition="$show['homepage']">
<tr><td class="vbmenu_option"><a href="$post[homepage]"><phrase 1="$post[username]">$vbphrase[visit_xs_homepage]</phrase></a></td></tr>
</if>
<if condition="$show['search']">
<tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=finduser&amp;u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[find_more_posts_by_x]</phrase></a></td></tr>
</if>
<if condition="$post['userid'] AND $show['member']">
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=addlist&amp;userlist=buddy&amp;u=$post[userid]"><phrase 1="$post[username]">$vbphrase[add_x_to_buddy_list]</phrase></a></td></tr>
</if>
</table>
</div>
<!-- / post $post[postid] popup menu -->

<if condition="$show['spacer']">
</div>
$spacer_close
</if>
<!-- / post #$post[postid] -->
You need the same images as above.

Thanks Any questions please post.
b2w
08-01-2006, 01:35 PM
Do I have to have the rounded images? Is that what you mean by this:

footer_bg.gif
footer_left.gif
footer_right.gif
header_bg.gif
header_left.gif
header_right.gif

?
Elsie
08-01-2006, 01:51 PM
yes.

if i understand it all right, you add an *image* of a curve in the corner cells of the table (as the cell bg) so it creates an illusion of the table itself having rounded corners. :)
b2w
08-01-2006, 02:16 PM
yes.

if i understand it all right, you add an *image* of a curve in the corner cells of the table (as the cell bg) so it creates an illusion of the table itself having rounded corners. :)

OK then I can't do it...I don't have any images like that and I have three styles that I use. I would have been nice though.
Elsie
08-01-2006, 02:53 PM
i think the idea is that you make the images yourself, to suit your style :)
Hell³
08-01-2006, 03:13 PM
Um... I think (this is personal opinion of course) some people that is not so savvy on (X)HTML use might be a little wary of doing a full template replacement. While it's easier for them to do, considering that those templates are very prone to be updated with each new vbulletin upgrade, this tutorial would be more usefull if you detail the changes you have done to the templates... or recomend them to analize the differences themselves if you don't want the hassle ;)

And one other thing on that note... is this compatible with the vb 3.6 templates?
semann
08-01-2006, 03:16 PM
i dont know if its 3.6 compatible but it is 3.5.4 compatible
Hell³
08-01-2006, 03:19 PM
Might want to clarify that too, then.
Peggy
08-01-2006, 03:47 PM
If it's compatbible with 3.5.4 then it's most likely not with 3.6, since postbit and postbit legacy are two templates that get either reverted or edited in 3.6
Elsie
08-02-2006, 01:35 AM
and, of course, if you do a full template replacement then you lose any other modifications you may have made to it before. and that could be very annoying!
semann
08-02-2006, 08:20 AM
Ok here you go with the part to add

http://www.vbulletin-faq.com/forum/showthread.php?t=1399
MetalPrincess
10-29-2006, 12:13 AM
I did manage to get this to work with 3.6 but I have just 2 problems. One theres this little white space at the rounded corners that I cannot seem to get rid of. And 2 at the very top there is the "Forum, Last Post, Threads, Posts" strip I need that to go away too. Because it puts this info in each cat area. Any help would be great.


MP