The Arcive of Official vBulletin Modifications Site.

Medi0cr3 · #1 02-01-2015, 06:57 AM

Custom Edited Template utilizing Jquery

Skill level: Late Beginner
Some Knowledge requred:
-PHP Syntax formatting
-Jquery Syntax formatting

If you dont know what JQuery is, check out some things on youtube of what people do with JQuery. Jquery is essentially JavaScript condensed into something everybody can use. I learned by sitting through many tutorials until I got the following process right. Many tutorials didn't have exactly what I needed, or were so old. I had to figure out things a lot on my own.

There's some interesting things you can do with the forum. I'm using Jquery and PHP to manipulate things in my database on my custom pages. I'm going to show you how I did it. This does require some knowledge of PHP and Jquery alike.

First off, I like to create templates of a page so that I can just copy and paste my code later. I'm using a forum that has some darker color grays for most of its make up. It looks nice. I added some CSS from a CSS creator I found on the net to give my page some effect of a 3D to it, so it doesn't appear as blocky on my custom pages.

Prior to creating files, I do have to recommend that you use a naming prefix for all your files. Such as "A_name.php". Keeping all your files close in the list is key. I also like to use NotePad++ as I can upload very quickly and mash my F5 key to see if the next iteration of code is working.

Lets get started!

Create a php file called "templater.php" and paste the following custom edited template into it. I got this edited template somewhere else on vbulletin years ago. I just use this same template as a starter for each new page.

Code:

<?php

// #######################################################################
// ############### CUSTOM TEMPLATE FOR YOUR USE ##########################
// ############### COMMENTED FOR READABILITY    ##########################
// ############### IF YOU WANT THE AUTH FUNC    ##########################
// ############### SEND ME A PRIV MESSAGE ON THE #########################
// ############### FORUM AND I WILL GET BACK SOON ########################
// #######################################################################

// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL);
ini_set("display_errors","true");

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

define('THIS_SCRIPT', 'somephpfilewithnoextension'); //Not sure if using the extension is required. I utilze A_ in the filename for my php file as its easy to find in the /forum directory. Ex. "A_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('Some Template Name',); //Not totally required.. Style & Template -> Style Manager -> Edit/Add Custom Template -> Custom Template Name Must be This.

// 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');

require_once('A_p.php'); //I have database connection code here.
require_once('A_fnc.php'); // I keep all my functions here.
// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################

$navbits = construct_navbits(array('' => 'Some Template Name')); //Style & Template -> Style Manager -> Edit/Add Custom Template -> Custom Template Name Must be This.
$navbar = render_navbar_template($navbits);
// ###### YOUR CUSTOM CODE GOES HERE #####
$pagetitle = 'Some Template Name'; //I have an Authorization function that looks at usergroupids in the database and allows access based off that. If this name is not the same name as in the database, the code will not run.
$templateColor = 'silver'; //Main template text color.

// ########## START DATABASE CONNECTION ##############
if(!$con) { die("Database connection services failed connection: <font size='4'> $pagetitle</font>  " . mysql_error()); }
mysql_select_db("DATABASE NAME", $con) or die("Database selection name fail: <font size='4'> $pagetitle</font> " . mysql_error());
// ########## END DATABASE CONNECTION ##############



//########################### START AUTHORIZATION FUNCTION ###########################
//####################################################################################
//if $pagetitle var, up top, is not exactly what is in the database, it will not load the Authorization.
$usergroupfield = $vbulletin->userinfo[usergroupid]; //Gets the usergroupid before authorization function is ran.
$NavAuth = getAuth($pagetitle,$usergroupfield,$con); //Runs the Authorization function.
//####################################################################################
//####################################################################################

//********* END DATABASE CONNECTION ***************
mysql_close($con);
//********* END DATABASE CONNECTION ***************

$templater = vB_Template::create('Some Template Name'); //Style & Template -> Style Manager -> Edit/Add Custom Template -> Custom Template Name Must be This.
$templater->register_page_templates();
$templater->register('navbar', $navbar);
$templater->register('pagetitle', $pagetitle);
$templater->register('NavAuth', $NavAuth);
$templater->register('templateColor', $templateColor);


//$template_hook[parse_templates] .= $templater->render();
print_output($templater->render());
?>

I have edited the code with comments to show you what I do with my custom templates. Dont forget to change your database name :P.

Create a new style template in your CPAdmin->Styles Manager for the forum style you want. I call it "TEMPLATE TEMPLATE". Copy and paste the following code into it.

Code:

 
<!---------------------------------------- ------------------------------------->
<!-- Copy and paste everything below this line into a NEW TEMPLATE ------------->
<!-- A lot of work went into discovering what was only necessary to ------------->
<!-- maintain all functions of vbulletin in a custom template...... ------------->
<!----------------------------------------- TEMPLATE 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}

<!------------------------------------------- ------------------------------------------>
<!------------------------------------------- ------------------------------------------>
<!------------------------------------------- ------------------------------------------>
<!-- START: Javascript script codes below -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="myAdmin.js"></script>

<style>

.hideTHEM { display:none; }
#P1p { cursor:pointer; }
#P2p { cursor:pointer; }
#P3p { cursor:pointer; }

#P1 {
-moz-box-shadow: 0 0 5px 5px #1D1D1D;
-webkit-box-shadow: 0 0 5px 5px#1D1D1D;
box-shadow: 0 0 5px 5px #1D1D1D;
background: rgb(37,37,37); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,37,37,1) 0%, rgba(66,66,66,1) 49%, rgba(37,37,37,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,37,37,1)), color-stop(49%,rgba(66,66,66,1)), color-stop(100%,rgba(37,37,37,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
}
#P2 {
-moz-box-shadow: 0 0 5px 5px #1D1D1D;
-webkit-box-shadow: 0 0 5px 5px#1D1D1D;
box-shadow: 0 0 5px 5px #1D1D1D;
background: rgb(37,37,37); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,37,37,1) 0%, rgba(66,66,66,1) 49%, rgba(37,37,37,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,37,37,1)), color-stop(49%,rgba(66,66,66,1)), color-stop(100%,rgba(37,37,37,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
}
#P3 {
-moz-box-shadow: 0 0 5px 5px #1D1D1D;
-webkit-box-shadow: 0 0 5px 5px#1D1D1D;
box-shadow: 0 0 5px 5px #1D1D1D;
background: rgb(37,37,37); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,37,37,1) 0%, rgba(66,66,66,1) 49%, rgba(37,37,37,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,37,37,1)), color-stop(49%,rgba(66,66,66,1)), color-stop(100%,rgba(37,37,37,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,37,37,1) 0%,rgba(66,66,66,1) 49%,rgba(37,37,37,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
}

.tt {border-collapse:collapse;border-spacing:0;border:none;}
.tt td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tt th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tt .tt -w57h{font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif !important;}
.tt .tt -s6z2{text-align:right}

</style>


<!-- END: Javascript scripts codes above -->
<!------------------------------------------- ------------------------------------------>
<!------------------------------------------- ------------------------------------------>
<!------------------------------------------- ------------------------------------------>
  </head>
  <body>

<!----------------------------------------- END TEMPLATE CODE / BEGIN YOUR CODE ---------------------------->
<vb:if condition='$NavAuth == 1'><!-- START AUTH: Only lets the following display if the authorization function sets to 1 -->
    {vb:raw header}
    {vb:raw navbar}
<!-- To enable vbulletin to send POST/GET requests to the server, the tokens must be sent -->
<form action=''  method='post'>
<input type='hidden' name='s' value='{vb:raw session.sessionhash}' />
<input type='hidden' name='securitytoken' value='{vb:raw bbuserinfo.securitytoken}' />
<!-- Always include the above in your forms. I use this setup in all my custom templates -->

    <div id='pagetitle'> 
      <h1></h1>
    </div>


<!----------------------------------------START P1----------------------------------------------- ------->
    <h2 class='blockhead'>
<table class="tt" style="undefined;table-layout: auto; width: 100%; margin auto; white-space: nowrap;">
<colgroup>
<col style="width: 929px">
<col style="width: 52px">
</colgroup>
  <tr>
    <th class="tt-w57h"><p id='paragraph1'>Paragraph1</p> <font color='orange' size='2'>{vb:raw error}</font></th>
    <th class="tt-s6z2"><p id='P1p'>>>></p></th>
  </tr>
   </table>
</h2>

    <div class='blockbody'>
      <div class='blockrow'>

<div id='P1'>
<!--Your custom code-->
</table>
</div></div>
</div>
<br>
<!----------------------------------------END P1----------------------------------------------- ------->
<!----------------------------------------START P2 ------------------------------------------------->
    <h2 class='blockhead'>
<table class="tt" style="undefined;table-layout: auto; width: 100%; margin auto; white-space: nowrap;">
<colgroup>
<col style="width: 929px">
<col style="width: 52px">
</colgroup>
  <tr>
    <th class="tt-w57h"><p id='paragraph2'>Paragraph2</p></th>
    <th class="tt-s6z2"><p id='P2p'>>>></p></th>
  </tr>
   </table>
</h2>
    <div class='blockbody'>
      <div class='blockrow'>
<div id='P2'>

<!--Your custom code-->

</div></div>
</div>
<br>
<!----------------------------------------END P2----------------------------------------------- ------->
<!----------------------------------------START P3----------------------------------------------- ------->

   <h2 class='blockhead'>
<table class="tt" style="undefined;table-layout: auto; width: 100%; margin auto; white-space: nowrap;">
<colgroup>
<col style="width: 929px">
<col style="width: 52px">
</colgroup>
  <tr>
    <th class="tt-w57h"><span id='paragraph3'>Paragraph3</span></th>
    <th class="tt-s6z2"><p id='P3p'>>>></p></th>
  </tr>
</table>
</h2>
    <div class='blockbody'>
      <div class='blockrow'>
<div id='P3'>
<!--Your custom code-->
     
</table>
 </div> </div></div>
<br>

<!-----------------------------------END P3 --------------------------------------- ------->

</font><!-- END PRIMARY TEMPLATE COLOR -->
</form>
<vb:else /></div> <!-- END AUTH and START DEFAULT VIEW for Non Authorized Users -->
{vb:raw header}
{vb:raw navbar}



<div id='pagetitle'>
      <h1>{vb:raw pagetitle}</h1>
</div>

<center><font size='10' color='red'>***** Under Construction ******</font></center>
</vb:if><!-- END DEFAULT VIEW -->


<!----------------------------------------- END TEMPLATE CODE / END YOUR CODE ---------------------------->
   {vb:raw footer}
  </body>
</html>

In the above mentioned code in the <script></script> tags you'll see that there's a .js file for the Jquery and an .js file for your Jquery. I like to use the google one so that my browser caches it. If Jquery ever gets updated, I can easily google JQuery CDN. https://developers.google.com/speed/...evguide#jquery

Next you'll need some Jquery. Create a new file called "JQUERY TEMPLATE.js". Copy and paste the following code.

Code:

$(document).ready(function() { // START OF DOC
	//$('#P2').hide();
	//$('#P3').hide();
	//Functions to load on document load.
	
	//END FUNCTIONS TO LOAD 
	//Clickable Things here......
	$( "#P1p" ).click(function() {
		$( "#P1" ).toggle('slow',function(){
		var $link = $("#P1p");
		$('html,body').animate({scrollTop: $('#P1p').offset().top}, 1000);
			$(this).is(":visible") ? $link.text("<<<") : $link.text(">>>");
		});
	});
	$( "#P2p" ).click(function() {
		$( "#P2" ).toggle('slow',function(){
		var $link = $("#P2p");
		$('html,body').animate({scrollTop: $('#P2p').offset().top}, 1000);
			$(this).is(":visible") ? $link.text("<<<") : $link.text(">>>");
		});
	});
	$( "#P3p" ).click(function() {
		$('html,body').animate({scrollTop: $('#P3p').offset().top}, 1000);
		$( "#P3" ).toggle('slow',function(){
		var $link = $("#P3p");
			$(this).is(":visible") ? $link.text("<<<") : $link.text(">>>");
		});
	});

	$('#approve').click(function() { somefunction(); });
	

	//END Clickable Things....
}); //END OF DOC
function somefunction() {
	var value = 1; //You can even do $("#IDOFHTMLELEMENT").text; instead of 1. The idea is to DO=SOMETHING for the PHP Trigger
	var str = "phptrigger="+value+"secondPHPtrigger=1";
	//console.log(str);
	$.ajax({ 
			url: 'A_MYjq.php', //Set this to the php file that handles all the Jquery requests, you can not use the same template.php file. PHP cant be called on a page you are viewing. It has to be a separate file.
			dataType: 'json',  //Review Jquery documentation for more options on this.
			type: 'post',      //Review Jquery documentation for more options on this.
			data:  str,        //The variable you want to send into your PHP page
			success: function(data) {
				//console.log(data);
					//$('#confirmMSG').html(data.result1).show();
					//$('#confirmMSG').html(data.result2).show();
					
			},
			error: function(data) {
				console.log("failure message: "+data);
			}
	});
}

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06866 seconds Memory Usage 2,416KB Queries Executed 12 (?)
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 (4)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (2)post_thanks_box (2)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (2)post_thanks_postbit_info (2)postbit (2)postbit_onlinestatus (2)postbit_wrapper (1)showthread_list (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_threadedmode.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo 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_threaded showthread_threaded_construct_link 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 post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!