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
  #142  
Old 01-12-2010, 06:05 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 meissenation View Post
Anyone know why
HTML Code:
<strong></strong> and <ul></ul><li></li>
tags do not work in the custom page? I've never seen HTML just be ignored like that. I can view it in the source code for the page so I know it's not my cache just not refreshing but yet it's not doing what the HTML tags say to do.

http://www.mifbody.com/vbulletin/advertise.php

If you view the source and then compare where it says "SOLD" in red - it should be strong. All the headings should be strong for that matter.


Edit:
Weird -
HTML Code:
<b></b>
works perfectly fine, though...
View your css using something like firebug and you'll see that vb has added css that deals with those tags. If you don't like it, then modify it. You can add css to your own page to override the other.
Reply With Quote
  #143  
Old 01-12-2010, 06:08 PM
glen290's Avatar
glen290 glen290 is offline
 
Join Date: Apr 2008
Location: Haydock UK
Posts: 192
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Been trying to get this to work all day with no luck, just get a blank page every time, copied it exactly but no joy
Reply With Quote
  #144  
Old 01-12-2010, 06:13 PM
meissenation meissenation is offline
 
Join Date: Apr 2005
Posts: 476
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by glen290 View Post
Been trying to get this to work all day with no luck, just get a blank page every time, copied it exactly but no joy
I was getting a blank page too. This line has to be the EXACT name and case (upper case vs lower case) as your template name:
Code:
$templater = vB_Template::create('test');
For example - if your template is named TEST, you'll get a blank page.
Reply With Quote
  #145  
Old 01-12-2010, 06:14 PM
psypher psypher is offline
 
Join Date: Dec 2009
Posts: 17
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Awesome job, works great for me.
Reply With Quote
  #146  
Old 01-12-2010, 06:21 PM
glen290's Avatar
glen290 glen290 is offline
 
Join Date: Apr 2008
Location: Haydock UK
Posts: 192
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by meissenation View Post
I was getting a blank page too. This line has to be the EXACT name and case (upper case vs lower case) as your template name:
Code:
$templater = vB_Template::create('test');
For example - if your template is named TEST, you'll get a blank page.

Checked that a few times and still the same, must be doing something wrong creating the template.

I went in to style manager / add new template and named it test then pasted in the info from the first page (2nd box) is this correct ?
Reply With Quote
  #147  
Old 01-12-2010, 06:30 PM
meissenation meissenation is offline
 
Join Date: Apr 2005
Posts: 476
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
View your css using something like firebug and you'll see that vb has added css that deals with those tags. If you don't like it, then modify it. You can add css to your own page to override the other.
Thanks for the info, Lynne. Lots of learning to do. I absolutely hate this CSS stuff... wish I could just disable it and go back to the old system where everything just worked and looked correct. Change the CSS in one thing and now you've completely ruined the look of something totally unrelated. What happened to the good old days when you could just put <strong> if you want it to be strong and use UL?! LOL Crazy. Way too overcomplicated.

Anyway - thanks for the info, Lynne. Guess I'll have to create my own CSS (yuck) just to be able to use strong and ordered lists...

PS - frustration directed at VB development team, not you Lynne.
Reply With Quote
  #148  
Old 01-12-2010, 08:05 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 glen290 View Post
Checked that a few times and still the same, must be doing something wrong creating the template.

I went in to style manager / add new template and named it test then pasted in the info from the first page (2nd box) is this correct ?
Make sure you added the template to the style you are using on your site.

Quote:
Originally Posted by meissenation View Post
Thanks for the info, Lynne. Lots of learning to do. I absolutely hate this CSS stuff... wish I could just disable it and go back to the old system where everything just worked and looked correct. Change the CSS in one thing and now you've completely ruined the look of something totally unrelated. What happened to the good old days when you could just put <strong> if you want it to be strong and use UL?! LOL Crazy. Way too overcomplicated.

Anyway - thanks for the info, Lynne. Guess I'll have to create my own CSS (yuck) just to be able to use strong and ordered lists...

PS - frustration directed at VB development team, not you Lynne.
I just looked at your site. You aren't using your tags correctly. You need to go:
Code:
<ul>
<li>stuff</li>
<li>more stuff</li>
</ul>
You have <ul> tags all over in your list.

As for the css for strong, just add this in your custom css for the page:
HTML Code:
<style type="text/css">
strong {font-weight:bold;}
ul.unordered li {list-style-type: disc;list-style-position:inside;}
</style>
And then for your list:
HTML Code:
<ul class="unordered">
<li>stuff</li>
<li>more stuff</li>
</ul>
Reply With Quote
  #149  
Old 01-13-2010, 10:35 AM
glen290's Avatar
glen290 glen290 is offline
 
Join Date: Apr 2008
Location: Haydock UK
Posts: 192
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
Make sure you added the template to the style you are using on your site.

Only using the default style on my test board, still no joy..
Reply With Quote
  #150  
Old 01-13-2010, 11:54 AM
meissenation meissenation is offline
 
Join Date: Apr 2005
Posts: 476
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
Make sure you added the template to the style you are using on your site.


I just looked at your site. You aren't using your tags correctly. You need to go:
Code:
<ul>
<li>stuff</li>
<li>more stuff</li>
</ul>
You have <ul> tags all over in your list.

As for the css for strong, just add this in your custom css for the page:
HTML Code:
<style type="text/css">
strong {font-weight:bold;}
ul.unordered li {list-style-type: disc;list-style-position:inside;}
</style>
And then for your list:
HTML Code:
<ul class="unordered">
<li>stuff</li>
<li>more stuff</li>
</ul>
Lynne -

Thanks for your help, I sincerely appreciate it. The UL tags are being used correctly, though. I extracted just the content of the block and pasted it here:
HTML Code:
Advertising with the Michigan FBody Association is a sure fire way to get more customers to your local shop! What better way to get local customers interested in your products than to advertise them on a website that thousands of Michigan residents would see? Let's take a look at the features that each Sponsor gets!<br> 
<br> 
 
<b>Premier Package - $200 per Year</strong> - Ultimate Exposure! </b><b><font color="red">SOLD!</font></b> 
<UL> 
<LI>Premier Package = Ultimate in Company Exposure!</LI> 
<UL> 
<LI>This package is only available to ONE company at a time! With this package, you not only do you get everything that is offered in the "Gold" package, but your company will have sponsored <strong>FOUR</strong> trophies for the annual Spring Meet & Greet! That's right, each <b>1st Place</b> Generation-Specific trophy (1st Place - 1st Generation, 1st Place - 2nd Generation, etc) will be sponsored by your company with this package! Instant recognition for being a sponsor that helps make our Meet & Greet possible, your company's name will be mentioned throughout the course of the Meet & Greet and at the Awards ceremony!</LI> 
</UL> 
<LI>Banner on EVERY MiFbody.com Page</LI> 
<UL> 
<LI>Your banner will be displayed in the top right corner of every single page on MiFbody.com. Your banner will also rotate in the Horizontal Banner section as well as the Right Sponsor Bar section. That's right - your banner is guaranteed to be displayed once on every single page, and the potential for up to three different locations on the page! <b>Now that's some exclusive exposure!</b></LI> 
</UL> 
<LI>SubForum under the Sponsor Section</LI> 
<UL> 
<LI>The sub forum allows sponsors to post specific company information, deals, specials, new products, etc that you want to advertise.</LI> 
</UL> 
<LI>Right Sponsor Bar Banner</LI> 
<UL> 
<LI>A 100 pixel wide banner is displayed on the main vBulletin templates such as the Forum Home, Forum Display, and Show Thread templates. </LI> 
</UL> 
<LI>Horizontal Banner Section</LI> 
<UL> 
<LI>To ensure even more exposure, we've implemented a random rotating banner section that displays above the main content area. That way your company's banner will get maximum exposure on many pages that the average user navigates through. </LI> 
</UL> 
<LI>Banner Statistics (Upon request)</LI> 
<UL> 
<LI>Banner Impressions (times the banner is shown on the page) and Banner Clicks are logged by default. Upon request, we can pull up your impressions and clicks to let you know how well your banner is doing.</LI> 
</UL> 
<LI>Company Flier / Brochure</LI> 
<UL> 
<LI>At our annual Spring Meet & Greet, we will hand out a Sponsor-provided flier upon registration and check-in. This will get your product information into the hands of over 200 people! </LI> 
</UL> 
</UL> 
<br> 
 
<b>Platinum Package - $150 per Year</b> - Better Exposure!
<UL> 
<LI>Two Sponsored Spring Meet & Greet Trophies!</LI> 
<UL> 
<LI>With the Gold "Plus" Package, your company will be sponsoring two Non-Generation specific trophies for our Annual Spring Meet & Greet! This will give you even more exposure than the Gold and Silver package! When we are holding the awards ceremony, your company's name will be mentioned as being the sponsor of the trophy! This is a great way to get recognition for your company.</LI> 
</UL> 
<LI>SubForum under the Sponsor Section</LI> 
<UL> 
<LI>The sub forum allows sponsors to post specific company information, deals, specials, new products, etc that you want to advertise.</LI> 
</UL> 
<LI>Right Sponsor Bar Banner</LI> 
<UL> 
<LI>A 100 pixel wide banner is displayed on the main vBulletin templates such as the Forum Home, Forum Display, and Show Thread templates. </LI> 
</UL> 
<LI>Horizontal Banner Section</LI> 
<UL> 
<LI>To ensure even more exposure, we've implemented a random rotating banner section that displays above the main content area. That way your company's banner will get maximum exposure on many pages that the average user navigates through. </LI> 
</UL> 
<LI>Banner Statistics (Upon request)</LI> 
<UL> 
<LI>Banner Impressions (times the banner is shown on the page) and Banner Clicks are logged by default. Upon request, we can pull up your impressions and clicks to let you know how well your banner is doing.</LI> 
</UL> 
<LI>Company Flier / Brochure</LI> 
<UL> 
<LI>At our annual Spring Meet & Greet, we will hand out a Sponsor-provided flier upon registration and check-in. This will get your product information into the hands of over 200 people! </LI> 
</UL> 
</UL> 
<br> 
 
<b>Gold Package - $100 per Year</b> - Good Exposure!
<UL> 
<LI>SubForum under the Sponsor Section</LI> 
<UL> 
<LI>The sub forum allows sponsors to post specific company information, deals, specials, new products, etc that you want to advertise.</LI> 
</UL> 
<LI>Right Sponsor Bar Banner</LI> 
<UL> 
<LI>A 100 pixel wide banner is displayed on the main vBulletin templates such as the Forum Home, Forum Display, and Show Thread templates. </LI> 
</UL> 
<LI>Horizontal Banner Section</LI> 
<UL> 
<LI>To ensure even more exposure, we've implemented a random rotating banner section that displays above the main content area. That way your company's banner will get maximum exposure on many pages that the average user navigates through. </LI> 
</UL> 
<LI>Banner Statistics (Upon request)</LI> 
<UL> 
<LI>Banner Impressions (times the banner is shown on the page) and Banner Clicks are logged by default. Upon request, we can pull up your impressions and clicks to let you know how well your banner is doing.</LI> 
</UL> 
<LI>Company Flier / Brochure</LI> 
<UL> 
<LI>At our annual Spring Meet & Greet, we will hand out a Sponsor-provided flier upon registration and check-in. This will get your product information into the hands of over 200 people! </LI> 
</UL> 
</UL> 
<br> 
 
<b>Silver Package - $50 per Year</b> 
<UL> 
<LI>Right Sponsor Bar Banner</LI> 
<UL> 
<LI>A 100 pixel wide banner is displayed on the main vBulletin templates such as the Forum Home, Forum Display, and Show Thread templates. </LI> 
</UL> 
<LI>Banner Statistics (Upon request)</LI> 
<UL> 
<LI>Banner Impressions (times the banner is shown on the page) and Banner Clicks are logged by default. Upon request, we can pull up your impressions and clicks to let you know how well your banner is doing.</LI> 
</UL> 
<LI>Company Flier / Brochure</LI> 
<UL> 
<LI>At our annual Spring Meet & Greet, we will hand out a Sponsor-provided flier upon registration and check-in. This will get your product information into the hands of over 200 people!  </LI> 
</UL> 
</UL> 
<br> 
 
<b>Spring Meet & Greet Trophy Sponsorship - $30 / trophy</b><br> 
Each year, we hold a Spring Meet & Greet car show. We have a number of trophies that are awarded to show winners and for a small price you can get recognition at our show too! For only $30 per trophy, you can sponsor one of the trophies at our Meet & Greet - when we get to awarding the trophy, your company's name will be announced to everyone at the show! Likewise, we will have a small flier that will be given out at registration/check-in that will thank all of the trophy sponsors and will give their company information - website, address, contact information. The people at our show know where to go to thank you by buying your products! <strong>Please note: the trophy sponsorship will be applied at the next possible car show. If you sponsor the trophy before this year's show, it will be applied to this year's show. Obviously, if you sponsor a trophy after our car show has already happened for the year, it will be applied to next year's show.</strong> 
 
<br><br> 
Want to know more information about advertising with the Michigan Fbody Association? Send an email to our advertising e-mail address and we will be in contact with you as soon as possible to discuss the packages in more detail.<br><br><center><a href="mailto:advertising@mifbody.com">Advertising Email Address</center> 
</font>
If you copy and paste that into notepad and save it as an HTML it will work correctly - the UL tags that are all over the place are creating nested lists.
Reply With Quote
  #151  
Old 01-13-2010, 02:24 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Try this for your css:
Code:
<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>
And you aren't nesting them correctly. The <li></li> needs to be around the nested list, ie:
HTML Code:
<LI>SubForum under the Sponsor Section 
  <UL> 
  <LI>The sub forum allows sponsors to post specific company information, deals, specials, new products, etc that you want to advertise.</LI> 
  </UL>
</LI>
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 02:22 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.06409 seconds
  • Memory Usage 2,416KB
  • 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
  • (8)bbcode_code
  • (9)bbcode_html
  • (8)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