vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   Programming Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=188)
-   -   How To Place Profile Info In Fieldset Style Boxes In postbit_legacy (https://vborg.vbsupport.ru/showthread.php?t=119480)

peterska2 06-22-2006 10:00 PM

How To Place Profile Info In Fieldset Style Boxes In postbit_legacy
 
This tutorial explains how to box profile information into individual fieldsets using two different methods in postbit_legacy.

I recommend using either one or the other of these effects as using them together will have a negative impact on the resulting postbit_legacy layout.

While this tutorial deals soley with the posts and join date part of the template, it gives easy to follow steps to use this on all your postbit information.


Fieldsets With Legends (no conditionals)

In your postbit_legacy template find
Code:

<div>
$vbphrase[posts]: $post[posts]
</div>

and replace with
Code:

<div>
<fieldset>
<legend>$vbphrase[posts]</legend>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="smallfont" align="center">$post[posts]</td>
</tr>
</table>
</fieldset>
</div>

There are a number of important details in this replacement code, so now we will look at each of them in turn.

Firstly, we have retained the
Code:

<div>
as this is used to place each piece of information on a new line. If this is omitted, then the layout will be compromised.

Next we have the
Code:

<fieldset>
This tells us that we are creating a fieldset box and everything until this is exited will be included within the box.

This is followed by
Code:

<legend>$vbphrase[posts]</legend>
This creates the title for the box which is emedded into the box border. You can place anything that you wish to use as the title for the box between the legend tags.

Now we move onto the content. In order to populate the box, we must first create a table to place the contents in. To do this we use the following code:
Code:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="smallfont" align="center">

This tells us that we are creating a content table to fill the width of the fieldset box, with no border, no cellspacing and no cellpadding. We do not need to use cellspacing or cellpadding as the fieldset has padding included automatically. You will also notice that there is no class specified apart from smallfont. This is because we want it to use the same class as that section of the postbit (usually alt2). The smallfont class is used to ensure that the text remains a set style throughout the template. Finally in this section is the alignment for the content (in this case center). If you wish to have the content left aligned, then just remove this part of the code.

The next thing to be added is the actual content for the cell we have created. In this case we are using
Code:

$post[posts]
to display the postcount.

Finally, we need to close everything that we have opened, otherwise the rest of the page will attempt to nest itself within the first fieldset of the first post on the page. To do this, add
Code:

</td>
</tr>
</table>
</fieldset>
</div>

to the end of your content.

You will now have a box in your postbit that looks like this:

https://vborg.vbsupport.ru/



Fieldsets With Legends (using conditionals)

These are done in exactly the same manner, but the conditional must remain around the outside of the code.

An example of this is the join date information included in the above image.

The code used to generate this is
Code:

<if condition="$post['joindate']">
<div>
<fieldset>
<legend>$vbphrase[join_date]</legend>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="smallfont">
$post[joindate]
</td>
</tr>
</table>
</fieldset>
</div>
</if>

You will notice that the rest of the code is identical to that used for ths post count, apart from the conditional, the phrase to use in the legend, and the actual content.



Fieldsets Without Legends

If you like this effect, but don't want the labels to be separated from the information, then you can use the exact same methods used in the above examples apart from a couple of changes. This then provides a solid border around the information.

Looking at the post count code again, the replacement code would be
Code:

<div>
<fieldset>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="smallfont">
$vbphrase[posts]: $post[posts]
</td>
</tr>
</table>
</fieldset>
</div>

You will notice that this time we have not included a legend and have left the label next to the details to be posted.

Again, using the items that have conditionals simply involves placing this code within the if code.

The resulting effect using this method is:

https://vborg.vbsupport.ru/


I hope that you find this technique useful. If you use it and would like to be added as a live demo for this effect please post the URL to a page on your site where this is in action.

Mark.B 06-23-2006 09:49 PM

Fieldset boxes are the spawn of satan.....

I think inset/outset boxes look ok, or just proper boxes that match the style colours.

I don't know why I hate fieldsets but I just do.

Nice tutorial though...I know most people like fieldsets.

patrickstar 08-21-2006 01:14 AM

hello peterska2, ive added fieldsets to my postbit and now i wanna add a fieldset for the skyp, aim, yahoo, and msn info.

but the problem i have is if the user does not have that info filled out then that user still has the fieldset but its blank and doesnt look good.

is that what you mean by using the conditional method?

thanks.

peterska2 08-21-2006 01:19 AM

Yes, try putting
Code:

<if condition="$post[skypeicon] || $post[msnicon] || $post[icqicon] || $post[aimicon] || $post[yahooicon]">
before the fieldset and
Code:

</if>
after
Code:

</fieldset>

patrickstar 08-21-2006 01:30 AM

this is what i had:
Code:

<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div> </div></td>
and this is what i tried, using the yahoo as an example:
Code:

<if condition="$show['yahooicon']"><div>
<fieldset class="fieldset"><legend><b>Contact:</b></legend>
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div></td> 
</fieldset></div> </if>


peterska2 08-21-2006 01:38 AM

Code:

<if condition="$post[skypeicon] || $post[msnicon] || $post[icqicon] || $post[aimicon] || $post[yahooicon]"><div>
<fieldset class="fieldset"><legend><b>Contact:</b></legend>
<div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div>
</div></td> 
</fieldset></div> </if>

That should work

patrickstar 08-21-2006 01:40 AM

Quote:

Originally Posted by peterska2
Yes, try putting
Code:

<if condition="$post[skypeicon] || $post[msnicon] || $post[icqicon] || $post[aimicon] || $post[yahooicon]">
before the fieldset and
Code:

</if>
after
Code:

</fieldset>

work great! thanks alot, i might have had it if i kept playing with it, but im sure you saved me a lot of time, thanks!!

and one more question, i added a fieldset for the 'status', and what happens is it puts the word status twice.


<fieldset class="fieldset"><legend><b>Status:</b></legend>
$post[onlinestatus] </fieldset>

im thinking this might be a phrase change fix?? or can i edit this?

peterska2 08-21-2006 01:55 AM

You might need to change your template postbit_onlinestatus

patrickstar 08-21-2006 05:57 PM

yep, just edited out 'status:' in the template postbit_onlinestatus

thanks for all the help.

Ohiosweetheart 09-04-2006 12:47 AM

is there a way to wrap the entire left side of postbit_legacy... enclose everything... in a fieldset (without legend of course)?


All times are GMT. The time now is 09:28 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01304 seconds
  • Memory Usage 1,759KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (19)bbcode_code_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete