Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[HOW TO - vB4] Create your own vBulletin page
Lynne's Avatar
Lynne
Join Date: Sep 2004
Posts: 41,180

 

California/Idaho
Show Printable Version Email this Page Subscription
Lynne Lynne is offline 11-15-2009, 10:00 PM

This is an updated article on how to create your own vbulletin powered page. It's only for use with vB4.

This is NOT my work. I'm posting this from another thread where vB Style took the time to write this out. And his work is based on the article by Gary King here - How to create your own vBulletin-powered page! (uses vB templates)

Instructions to Create your Own Page:


1. Create the php page:
- Create a new file, whatever you want to call it (let's say test.php).
- Open up test.php and add the following (replace TEST with whatever template you want to show - WARNING: the template name is CASE SENSITIVE!!!):
Code:
<?php

// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// #################### DEFINE IMPORTANT CONSTANTS #######################

define('THIS_SCRIPT', 'test');
define('CSRF_PROTECTION', true);  
// change this depending on your filename

// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array();

// get special data templates from the datastore
$specialtemplates = array();

// pre-cache templates used by all actions
$globaltemplates = array('TEST',
);

// pre-cache templates used by specific actions
$actiontemplates = array();

// ######################### REQUIRE BACK-END ############################
// if your page is outside of your normal vb forums directory, you should change directories by uncommenting the next line
// chdir ('/path/to/your/forums');
require_once('./global.php');

// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################

$navbits = construct_navbits(array('' => 'Test Page'));
$navbar = render_navbar_template($navbits);

// ###### YOUR CUSTOM CODE GOES HERE #####
$pagetitle = 'My Page Title';

// ###### NOW YOUR TEMPLATE IS BEING RENDERED ######

$templater = vB_Template::create('TEST');
$templater->register_page_templates();
$templater->register('navbar', $navbar);
$templater->register('pagetitle', $pagetitle);
print_output($templater->render());

?>
- Be sure to change 'TEST' to the actual template name (WARNING: the template name is CASE SENSITIVE!!!), and change 'test' to the filename or a unique name for the page. Also, change 'Test Page' and 'My Page Title' to whatever you want to show in the navbits, such as 'Viewing Member Profile' (just an example).

2. Create the Template:
- If you are in debug mode, create the template in your MASTER STYLE so it shows up in all your styles, otherwise make sure you create the template in the style you are using. If following the page above, call the template TEST (WARNING: the template name is CASE SENSITIVE!!!) with the following content:
HTML Code:
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
  <head>
    <title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
    {vb:raw headinclude}
    {vb:raw headinclude_bottom}
  </head>
  <body>
    
    {vb:raw header}
    
    {vb:raw navbar}
    
    <div id="pagetitle">
      <h1>{vb:raw pagetitle}</h1>
    </div>
    
    <h2 class="blockhead">Title</h2>
    <div class="blockbody">
      <div class="blockrow">
        Text
      </div>
    </div>
    
    {vb:raw footer}
  </body>
</html>
.
Instructions to Add your Page to the Who's Online List (WOL):
Create two plugins using the following hooks. Replace mypage and similar with your information.

1. hook location - online_location_process:
Code:
switch ($filename)
{
    case 'test.php':
        $userinfo['activity'] = 'mypage';
        break;
// add more cases here if you have more than one custom page. no need for multiple plugins. one plugin can handle all.
}
.
2. hook location online_location_unknown:
Code:
switch ($userinfo['activity'])
{
    case 'mypage':
        $userinfo['where'] = '<a href="test.php?'.$vbulletin->session->vars[sessionurl].'">My Page</a>';
        $userinfo['action'] = "Viewing My Page";
        $handled = true;
        break;
// add more cases here if you have more than one custom page. no need for multiple plugins. one plugin can handle all.
}
.
The colored part in the code above shows what you need to change in the plugins (both reds should be the same and both blues should be the same, whereas green can be whatever you want).


Please see this article for help with rendering templates - [vB4] Rendering templates and registering variables - a short guide
Reply With Quote
  #732  
Old 12-30-2011, 04:56 AM
Okuma Steve Okuma Steve is offline
 
Join Date: May 2010
Posts: 32
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by HMBeaty View Post
You need to make the css for ul and li
Could you translate that into "idiot" for me?
Reply With Quote
  #733  
Old 12-30-2011, 05:06 AM
HMBeaty's Avatar
HMBeaty HMBeaty is offline
 
Join Date: Sep 2005
Posts: 4,141
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hmm....I stand corrected.... Looking back on a few of my custom pages, I have them working just fine using what you have above. Do you mind posting what you have in your entire template?

--------------- Added [DATE]1325225260[/DATE] at [TIME]1325225260[/TIME] ---------------

Also, your php file so we can make sure everything is correct in there
Reply With Quote
  #734  
Old 12-30-2011, 05:37 AM
Okuma Steve Okuma Steve is offline
 
Join Date: May 2010
Posts: 32
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Here is my php file:

PHP Code:
<?php

// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// #################### DEFINE IMPORTANT CONSTANTS #######################

define('THIS_SCRIPT''supporter');
define('CSRF_PROTECTION'true);  
// change this depending on your filename

// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array();

// get special data templates from the datastore
$specialtemplates = array();

// pre-cache templates used by all actions
$globaltemplates = array('supporter',
);

// pre-cache templates used by specific actions
$actiontemplates = array();

// ######################### REQUIRE BACK-END ############################
// if your page is outside of your normal vb forums directory, you should change directories by uncommenting the next line
// chdir ('/path/to/your/forums');
require_once('./global.php');

// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################

$navbits construct_navbits(array('' => 'Supporter Info'));
$navbar render_navbar_template($navbits);

// ###### YOUR CUSTOM CODE GOES HERE #####
$pagetitle 'Become a Supporter!';

// ###### NOW YOUR TEMPLATE IS BEING RENDERED ######

$templater vB_Template::create('supporter');
$templater->register_page_templates();
$templater->register('navbar'$navbar);
$templater->register('pagetitle'$pagetitle);
print_output($templater->render());

?>
--------------- Added 29 Dec 2011 at 22:39 ---------------

And here is my template:

(Please pardon my first grade understanding of html!)

HTML Code:
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
  <head>
    <title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
    {vb:raw headinclude}
    {vb:raw headinclude_bottom}
  </head>
  <body>
    
    {vb:raw header}
    
    {vb:raw navbar}
    
    <div id="pagetitle">
      <h1>{vb:raw pagetitle}</h1>
    </div>
    
    <h2 class="blockhead">Supporter Info</h2>
    <div class="blockbody">
      <div class="blockrow">
<p>Become a Supporter! </p>
<br />
<font size="2"><p><b>What is a Supporter? </b></p></font>
<br />
<p>A supporter is someone who donates to the site to help keep it up and running. Currently the majority of revenue for the site is generated from the little bit of advertising we allow and donations from our users. </p>
<br />
<br />
<font size="2"><p><b>How much is it?</b> </p></font>
<br />
<p>The current cost to become a supporter: </p>
<br />
<ul>
<li><p>1 year - $15</p></li>
<br />
<li><p>2 years - $30</p></li>
<br />
<li><p>5 years - $50</p></li>
<br />
<li><p>15 years - $100</p></li>
</ul>
<br />
<br />
<font size="2"><p><b>What’s in it for me? </b></p></font>
<br />
<p>We do have additional benefits for anyone that becomes a supporter, and may add more in the future. The benefits only last as long as your subscription length, but you can re-up anytime.</p>
<br />
<p>The current upgrades are: </p>
<br />
<ul>
<li>Larger Private Message inbox! Supporter’s inboxes can hold up to 1,000 messages! </li><br />

<li>A new icon to go under your user name when you post. It looks like this: </li> <br />

<img src=http://www.theoutdoorstrader.com/images/ranks/supporter1.png width="130" height="30"/>
</ul>
<br />
<br />
<br />
<font size="2"><p><b>Sign me up!</b></p></font>

<br />
<p>If you would like to become a supporter you can click the banner below and it will take you to your “paid subscriptions” page in your profile. </p>
<br />
<p>Once there, just select a subscription length in the dropdown box and click “order.” Then it will take you to a screen where you will select your payment method. Currently the only method accepted is paypal. You do not have to have an account with paypal to use it. </p>
<br />
<p>If you would prefer to send a check or money order, you can mail it to the address listed at the bottom of this article. Please be sure to include your username with your check so we know which account to credit the donation to. </p>
<br />
<a href=http://www.theoutdoorstrader.com/payments.php > <img src=http://www.theoutdoorstrader.com/images/donate.png /> </a>
<br />
<br />
<p><b> Mailing Address for Donations:</b> </p>
<br />
<p>The Outdoors Trader
<br />PO Box 813669
<br />Smyrna, GA 30081 </p>
<br />
<p></p>
<br />
<font size="2"><p><b>What if I am already a supporter and want to donate? </b></p></font>
<br />
<p>Well, that’s awesome! We appreciate it very much! </p>
<br />
<p>If you are already a supporter and would like to donate more, you can do so by clicking the paypal link below and entering whatever amount you would like to donate. </p>
<br />
<p>Again, thank you very much! </p>
<br />
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="PVCDABEX7X7TA">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
     
      </div>
    </div>
    
    {vb:raw footer}
  </body>
</html>
Reply With Quote
  #735  
Old 12-30-2011, 05:00 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Okuma Steve View Post
I am having a small problem and want to see if anyone can assist me.

I am trying to create a list with HTML and it isn't recognizing it, any ideas?

Here is a sample of what I am putting in:

<ul>
<li> item name </li>
<li> item name </li>
</ul>

I used the same code in making a new faq item and it worked fine, but not working in this form.

Link to faq item:

http://www.theoutdoorstrader.com/faq.php?faq=supporter

Link to new form:

http://www.theoutdoorstrader.com/supporter.php
This has already been covered in this thread. Here's one of the posts - https://vborg.vbsupport.ru/showpost....&postcount=150 You can go backwards to read the whole conversation.
Reply With Quote
  #736  
Old 12-30-2011, 07:00 PM
Okuma Steve Okuma Steve is offline
 
Join Date: May 2010
Posts: 32
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I think I understand now, but I still can't get it to work.

I pasted the style code into the header of my template, is that right?

Here is my current template:

HTML Code:
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
  <head>
    <title>{vb:raw vboptions.bbtitle} - {vb:raw pagetitle}</title>
    {vb:raw headinclude}
    {vb:raw headinclude_bottom}


<style type="text/css">
strong {font-weight:bold;}
ul.unordered li {list-style-type: disc;list-style-position:inside; display: list-item; margin-left: 2.5em; padding-left: 0;}

ul.unordered ul li {list-style-type: circle; display: list-item;margin-left: 2.5em; padding-left: 0;}
</style>


  </head>
  <body>
    
    {vb:raw header}
    
    {vb:raw navbar}
    
    <div id="pagetitle">
      <h1>{vb:raw pagetitle}</h1>
    </div>
    
    <h2 class="blockhead">Supporter Info</h2>
    <div class="blockbody">
      <div class="blockrow">

<p>Become a Supporter! </p>
<br />
<font size="2"><p><b>What is a Supporter? </b></p></font>
<br />
<p>A supporter is someone who donates to the site to help keep it up and running. Currently the majority of revenue for the site is generated from the little bit of advertising we allow and donations from our users. </p>
<br />
<br />
<font size="2"><p><b>How much is it?</b> </p></font>
<br />
<p>The current cost to become a supporter: </p>
<br />
<ul>
<li><li><p>1 year - $15</p></li>
<br />
<li><p>2 years - $30</p></li>
<br />
<li><p>5 years - $50</p></li>
<br />
<li><p>15 years - $100</p></li>
</ul></il>
<br />
<br />
<font size="2"><p><b>What?s in it for me? </b></p></font>
<br />
<p>We do have additional benefits for anyone that becomes a supporter, and may add more in the future. The benefits only last as long as your subscription length, but you can re-up anytime.</p>
<br />
<p>The current upgrades are: </p>
<br />
<li><ul>
<li>Larger Private Message inbox! Supporter?s inboxes can hold up to 1,000 messages! </li><br />

<li>A new icon to go under your user name when you post. It looks like this: </li> <br />

<img src=http://www.theoutdoorstrader.com/images/ranks/supporter1.png width="130" height="30"/>
</ul></li>
Reply With Quote
  #737  
Old 12-30-2011, 07:38 PM
rabeel rabeel is offline
 
Join Date: Jun 2010
Posts: 18
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Looking great. But i am new and it take time for me to do this kind of experements on online forum. i guess should try on localhost.
Reply With Quote
  #738  
Old 12-30-2011, 11:38 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

If you copy paste some code, you need to understand what it means. "ul.unordered" means a <ul> tag of class "unordered". I would guess you did not assign a class to your <ul> tag. (I cannot get to your page to see if that is the case.)
Reply With Quote
  #739  
Old 12-31-2011, 01:20 AM
Okuma Steve Okuma Steve is offline
 
Join Date: May 2010
Posts: 32
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I wouldn't get anything done if I understood all of it before I did it!

What page can you not get to? I posted links in my earlier post and in my last post I included the HTML from my template.

Is there something else I need to link to or post here?
Reply With Quote
  #740  
Old 12-31-2011, 01:41 AM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

If you want to use that css, then:
<ul class="unordered">

You'll want to get rid of the <p> around the items in the <li> tags also.
Reply With Quote
  #741  
Old 12-31-2011, 04:04 AM
Okuma Steve Okuma Steve is offline
 
Join Date: May 2010
Posts: 32
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
If you want to use that css, then:
<ul class="unordered">

You'll want to get rid of the <p> around the items in the <li> tags also.
Thanks! Works great now.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:10 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.06123 seconds
  • Memory Usage 2,413KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (3)bbcode_code
  • (3)bbcode_html
  • (1)bbcode_php
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (3)pagenav_pagelinkrel
  • (11)post_thanks_box
  • (58)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete