toolblast
04-18-2006, 10:00 PM
TEMPLATE EDITING, USEFUL VARIABLES, AND CODE SNIPPETS
Hi everyone,
While doing a hunt on vb.org for a list of the main vbulletin variables that I would need to output certain values in custom templates I was making, my search resulted in a huge lack of information so I decided to put together a list that will hopefully help any vbulletin coding beginner that wants to create a custom template and output certain information:
EDITING TEMPLATES
To begin to understand what these variables and code snippets are for, you first need to know how to edit a template in the first place. It is very easy and VBulletin makes it as simple as possible to do so. Here are a few tips to get you started:
1) Login to your ADMINCP (www.yoursite.com/admincp)
2) Click STYLES & TEMPLATES on the left
3) Click STYLE MANAGER
You are now seeing a list of all of the styles/themes you have on your vbulletin forum. By default you'll have "Default Style" which is VBulletin's style that comes with the out-of-box system.
4) Click the "ALL STYLES OPTION" dropdown. You will now see a list of options you can do to your default style. A few to note are:
- Edit Templates
- Add New Template
- Add Child Style
- Delete Style
5) We are going to click on EDIT TEMPLATES and then click the GO button (if the page has not refreshed already to the edit templates area).
You will now see a list of templates and headers with a scroll bar to scroll through them all. A few templates and headers to note are:
- footer
- Forum Display Templates
- Forum Home Templates
- header
- Navigation / Breadcrumb Templates
These will be the ones you will edit most commonly. To edit a template, simply double click on its name. If you double-click on a blue header, it will dropdown the sub-templates that are under that header. For example, "Forum Home Templates", when double-clicked, will show "FORUMHOME" as a sub-template under that header.
For this tutorial we are going to just focus on the "header" template. So go ahead and double click it to begin.
USEFUL VARIABLES
Ok, so lets go over some very useful variables that you can use in your templates. Once you have opened the "header" template in the previous step, try typing in some of these variables to see what they output in your forum:
1. $vboptions - This variable outputs the url to your forum which you have set in your VBulletin general options. This is useful to use this instead of hardcoding in your website URL because in the future you may want to change your domain and don't want to have to search through your dozens of templates for where you hardcoded in the domain at the beginning.
2. $vboptions[bbtitle] - Outputs the title of your forum which is set in the general VBulletion options.
3. $bbuserinfo[username] - Very useful, this variable will output the username/nickname of the user currently logged in.
4. $headinclude - Used to output the header template
5. $vboptions[bburl]/usercp.php$session[sessionurl_q] - Useful url which will link to the USERCP for the user
6. $vboptions[bburl]/login.php?$session[sessionurl]do=logout&u=$bbuserinfo[userid] - Useful url which will log off the user when clicked
7. <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase> - This will show the last time the user logged into the forum. For example: You last visited: Today at 07:57 PM
8. $vboptions[bburl]/private.php? - URL to load the user's PM mailbox
9. $bbuserinfo[pmunread] - Will output how many unread PM's the user has
10. $bbuserinfo['field#'] - Will output the data that the user inputted for their user profile field which you can set up. Replace # with the number of the input field you want to display
11. $bbuserinfo['posts'] - Shows how many posts the user has
Have a variable to add to this list? Create a reply and I'll add it!
[B]CODE SNIPPETS
Ok, now I'll show you some code snippets that are particularly useful for custom templates. Most of these code snippets use the variables above.
1. Show if logged in user has new mail or not
Mailbox: <if condition="$bbuserinfo['pmunread']">
<b><a href="$vboptions[bburl]/private.php?"><font face="Verdana" size="1" color="#78818D"> <img src="blink_arrow.gif" width="3" height="6" border="0">$bbuserinfo[pmunread] new message(s)</b>.</font></a><else />No new messages.</if>
The parts to focus on here are:
a. <if condition="$bbuserinfo['pmunread']">
b. $bbuserinfo[pmunread] new message(s)
c. <else />No new messages.</if>
What this code snippet does is check if the user has new PM messages. If the user does, it outputs a message say he has x new message(s) and puts an animated graphic to attract attention. If the user doesn't have any messages, it simply outputs "No new messages".
2. Conditional output based on user fields
For this code snippet, you will need to have set up some user profile fields that you can use. To edit or create new ones, in your ADMINCP go to "User Profile Fields" and click "User Profile Field Manager".
<if condition="$bbuserinfo['field7']=='Paid Member' OR $bbuserinfo['field7']=='Trial Member'>Output paid member only stuff here</if>
What you would use this for is if you create a new profile field and call it "member status". When the user registers you can set this to automatically give them "Free Member" status, and this input fills in with the text "Free Member". Then, if they pay you, you can login and edit their profile so that this input says the text "Paid Member" or "Trial Member", in which case this code will output special stuff for them. You could also use usergroup's instead of profile fields for this. If you want to do that then use:
<if condition="is_member_of($bbuserinfo, 6)">
Ooo, you're an admin. You get this special content here.
</if>
And if you want multiple groups to be able to access the content:
<if condition="is_member_of($bbuserinfo, 4) // Mods
OR is_member_of($bbuserinfo, 5) // Supermods
OR is_member_of($bbuserinfo, 6)"> // Admin
Insert the special content here.
</if>
3. Annoy users who haven't posted
Well, as most people know, users sometimes signup just to read posts and never post any new ones or contribute to your community. To bug them to post you can use this code snippet:
<if condition="$bbuserinfo['posts']==0">
You haven't posted any new posts yet! Get posting and help to build this amazing community! :-)
</if>
4. Custom login box
Want to put a login box to your forum somewhere on a template? Try this:
<!-- login form -->
<form action="$vboptions[bburl]/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password)">
<script type="text/javascript" src="$vboptions[abspath]/clientscript/vbulletin_md5.js"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" width="60"><font size="1" face="Tahoma" color="#FFFFFF"> User Name:</font></td>
<td><input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" width="100"><font size="1" face="Tahoma" color="#FFFFFF">Password:
(</font><a href="login.php?do=lostpw"><font size="1" face="Tahoma" color="#FFFFFF">forgot?</font></a><font size="1" face="Tahoma" color="#FFFFFF">)</font></td>
<td><input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="forceredirect" value="1" />
<input type="hidden" name="vb_login_md5password" />
</form>
<!-- / login form -->
So there you have it, some tips to get you started. Goodluck and happy template customizing!
----
Chad Fullerton
www.chadfullerton.com
Hi everyone,
While doing a hunt on vb.org for a list of the main vbulletin variables that I would need to output certain values in custom templates I was making, my search resulted in a huge lack of information so I decided to put together a list that will hopefully help any vbulletin coding beginner that wants to create a custom template and output certain information:
EDITING TEMPLATES
To begin to understand what these variables and code snippets are for, you first need to know how to edit a template in the first place. It is very easy and VBulletin makes it as simple as possible to do so. Here are a few tips to get you started:
1) Login to your ADMINCP (www.yoursite.com/admincp)
2) Click STYLES & TEMPLATES on the left
3) Click STYLE MANAGER
You are now seeing a list of all of the styles/themes you have on your vbulletin forum. By default you'll have "Default Style" which is VBulletin's style that comes with the out-of-box system.
4) Click the "ALL STYLES OPTION" dropdown. You will now see a list of options you can do to your default style. A few to note are:
- Edit Templates
- Add New Template
- Add Child Style
- Delete Style
5) We are going to click on EDIT TEMPLATES and then click the GO button (if the page has not refreshed already to the edit templates area).
You will now see a list of templates and headers with a scroll bar to scroll through them all. A few templates and headers to note are:
- footer
- Forum Display Templates
- Forum Home Templates
- header
- Navigation / Breadcrumb Templates
These will be the ones you will edit most commonly. To edit a template, simply double click on its name. If you double-click on a blue header, it will dropdown the sub-templates that are under that header. For example, "Forum Home Templates", when double-clicked, will show "FORUMHOME" as a sub-template under that header.
For this tutorial we are going to just focus on the "header" template. So go ahead and double click it to begin.
USEFUL VARIABLES
Ok, so lets go over some very useful variables that you can use in your templates. Once you have opened the "header" template in the previous step, try typing in some of these variables to see what they output in your forum:
1. $vboptions - This variable outputs the url to your forum which you have set in your VBulletin general options. This is useful to use this instead of hardcoding in your website URL because in the future you may want to change your domain and don't want to have to search through your dozens of templates for where you hardcoded in the domain at the beginning.
2. $vboptions[bbtitle] - Outputs the title of your forum which is set in the general VBulletion options.
3. $bbuserinfo[username] - Very useful, this variable will output the username/nickname of the user currently logged in.
4. $headinclude - Used to output the header template
5. $vboptions[bburl]/usercp.php$session[sessionurl_q] - Useful url which will link to the USERCP for the user
6. $vboptions[bburl]/login.php?$session[sessionurl]do=logout&u=$bbuserinfo[userid] - Useful url which will log off the user when clicked
7. <phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase> - This will show the last time the user logged into the forum. For example: You last visited: Today at 07:57 PM
8. $vboptions[bburl]/private.php? - URL to load the user's PM mailbox
9. $bbuserinfo[pmunread] - Will output how many unread PM's the user has
10. $bbuserinfo['field#'] - Will output the data that the user inputted for their user profile field which you can set up. Replace # with the number of the input field you want to display
11. $bbuserinfo['posts'] - Shows how many posts the user has
Have a variable to add to this list? Create a reply and I'll add it!
[B]CODE SNIPPETS
Ok, now I'll show you some code snippets that are particularly useful for custom templates. Most of these code snippets use the variables above.
1. Show if logged in user has new mail or not
Mailbox: <if condition="$bbuserinfo['pmunread']">
<b><a href="$vboptions[bburl]/private.php?"><font face="Verdana" size="1" color="#78818D"> <img src="blink_arrow.gif" width="3" height="6" border="0">$bbuserinfo[pmunread] new message(s)</b>.</font></a><else />No new messages.</if>
The parts to focus on here are:
a. <if condition="$bbuserinfo['pmunread']">
b. $bbuserinfo[pmunread] new message(s)
c. <else />No new messages.</if>
What this code snippet does is check if the user has new PM messages. If the user does, it outputs a message say he has x new message(s) and puts an animated graphic to attract attention. If the user doesn't have any messages, it simply outputs "No new messages".
2. Conditional output based on user fields
For this code snippet, you will need to have set up some user profile fields that you can use. To edit or create new ones, in your ADMINCP go to "User Profile Fields" and click "User Profile Field Manager".
<if condition="$bbuserinfo['field7']=='Paid Member' OR $bbuserinfo['field7']=='Trial Member'>Output paid member only stuff here</if>
What you would use this for is if you create a new profile field and call it "member status". When the user registers you can set this to automatically give them "Free Member" status, and this input fills in with the text "Free Member". Then, if they pay you, you can login and edit their profile so that this input says the text "Paid Member" or "Trial Member", in which case this code will output special stuff for them. You could also use usergroup's instead of profile fields for this. If you want to do that then use:
<if condition="is_member_of($bbuserinfo, 6)">
Ooo, you're an admin. You get this special content here.
</if>
And if you want multiple groups to be able to access the content:
<if condition="is_member_of($bbuserinfo, 4) // Mods
OR is_member_of($bbuserinfo, 5) // Supermods
OR is_member_of($bbuserinfo, 6)"> // Admin
Insert the special content here.
</if>
3. Annoy users who haven't posted
Well, as most people know, users sometimes signup just to read posts and never post any new ones or contribute to your community. To bug them to post you can use this code snippet:
<if condition="$bbuserinfo['posts']==0">
You haven't posted any new posts yet! Get posting and help to build this amazing community! :-)
</if>
4. Custom login box
Want to put a login box to your forum somewhere on a template? Try this:
<!-- login form -->
<form action="$vboptions[bburl]/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password)">
<script type="text/javascript" src="$vboptions[abspath]/clientscript/vbulletin_md5.js"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" width="60"><font size="1" face="Tahoma" color="#FFFFFF"> User Name:</font></td>
<td><input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" width="100"><font size="1" face="Tahoma" color="#FFFFFF">Password:
(</font><a href="login.php?do=lostpw"><font size="1" face="Tahoma" color="#FFFFFF">forgot?</font></a><font size="1" face="Tahoma" color="#FFFFFF">)</font></td>
<td><input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="forceredirect" value="1" />
<input type="hidden" name="vb_login_md5password" />
</form>
<!-- / login form -->
So there you have it, some tips to get you started. Goodluck and happy template customizing!
----
Chad Fullerton
www.chadfullerton.com