phpBB3 custom Front page

[TFlan]

How to create a front page for your favorite phpBB3 theme.

If you want to see it in action: atrocitygaming.org

In this tutorial I will be using the Prosilver theme.

Files needed:
phpbb3/index.php
phpbb3/styles/<theme>/template/overall_header.html
phpbb3/styles/<theme>/template/overall_footer.html
phpbb3/styles/<theme>/templates/ucp_header.html
phpbb3/styles/<theme>/templates/ucp_footer.html
phpbb3/styles/<theme>/templates/ucp_main_front.html

Important Info:
You will need to study your own theme to make this work, find out which class's, id's are for what, etc. All I show you, is how it works.

Start the customization:
Open your index.php file. Go to line 124-129, should look like this:

// Output page
page_header($user->lang['INDEX']);

$template->set_filenames(array(
	'body' => 'index_body.html')
);

This area is where we will test weather we want your custom page, or your forums.

Now insert this in its place:

// Output page
$page = $_GET['page'];
switch($page):
	case "home":
		page_header("Home");
		$template->set_filenames(array(
			'body' => 'home.html')
		);
	break;
	case "forums":
		page_header($user->lang['INDEX']);
		$template->set_filenames(array(
			'body' => 'index_body.html')
		);
	break;
	default:
		page_header("Home");
		$template->set_filenames(array(
			'body' => 'home.html')
		);
	break;
endswitch;

Save it, and close it. Your done with the index.php file for now.

What that did was grab the page variable from the URL. Put it into a switch() function and if $page = "home" it calls for the custom front page which we will create in just a second. If $page = "forums" it calls for the original index page, which is the forum listing. However is $page is equal to neither of those, it defaults to the custom front page.

Switch() is just a different way of doing "if then else". Cleaner too, in my opinion.

If you want more custom pages just add

case "<page_var>":
	page_header("<page_header>");
	$template->set_filenames(array(
		'body' => '<template_path>')
	);
break;

after any other "break;"

Now we need to create the custom front page.

Create a blank new HTML file called "home.html".

Now insert this into that new file:

<!-- INCLUDE overall_header.html -->



<!-- INCLUDE overall_footer.html -->

As you can see its doing PHP function inside HTML comments. This is how phpBB's template system works. All PHP functions are a little modified and you can't actually do anything, very limited in fact.

Back on topic.

Save the file in your theme folder a "home.html".

This is your skeleton. Everything you put on your page should be in between your overall_header and overall_footer files.

NOTE: If you wish to change the look of your header/footer for your custom pages, DO NOT save over the original's otherwise it will look like that on your forums as well, save it as a different file and edit your custom page(s) accordingly.

As you may of noticed all phpBB variables are called on by this: {VARIABLE_NAME} All caps, and words spaced.

At the bottom of this tutorial you will find some everyday variables that you can use in your HTML template.

In this tutorial we are going to create a 2 columns with 1 sidebar and the main content on the right.

Insert this in between your header/footer.

<div class="panel bg3">
	<div class="inner">
		<span class="corners-top"><span></span></span>
		<div style="width: 100%;">
			<div id="cp-menu">
				<div class="cp-mini">
					<div class="inner">
						<span class="corners-top"><span></span></span>
						<!-- INCLUDE sidebar.html -->
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			</div>
			<div id="cp-main" class="ucp-main">
				<h2>{PAGE_TITLE}</h2>
				<div class="panel">
					<div class="inner">
						<span class="corners-top"><span></span></span>
						<h3>Sub Title</h3>
						Body Body Body Body Body Body Body Body Body Body
						Body Body Body Body Body Body Body Body Body Body
						Body Body Body Body Body Body Body Body Body Body
						Body Body Body Body Body Body Body Body Body Body
						<span class="corners-bottom"><span></span></span>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>

As you can see I added a file and used a variable, I added the sidebar.html file and used the {PAGE_TITLE} variable. This variable was set in the index.php file we edited earlier by this: page_header("Home");

Now because each theme is different, we need to take a look at a template that matches the custom page very well to get an idea of what we need for styles.

Open these 3 files: ucp_header.html, ucp_main_front.html, and ucp_footer.html

If you haven't noticed these are the User Control Panel templates. Open your User Control Panel with the theme your editing in your browser. Look at where things are and look at the source code. Better yet, if you have Firefox, download the Web Developer Toolbar. If you have it click Information->Display ID & Class Details. This will add information boxes to each element on your page telling you what style it uses to create that portion of the page. This is where I cannot help you. You must study your theme and find out what it uses and where.

OK! Now that you know how to create the template and how to add them to the system it's time to go over the HTML template system.

You can do anything you want with the templates, just don't make your theme live until you have tested them.

The sidebar.html page is just a template page that is exactly like the home.html page. You add your navigation menu, recent posts, etc etc there, but it just makes all your custom pages call upon the same page, making editing A LOT easier and cleaner.

Here is a list of common variables that you can use for your templates:

{LAST_VISIT_DATE}	- Last visit date
{TOTAL_USERS_ONLINE}	- Total # of users oline
{LOGGED_IN_USER_LIST}	- Users logged in
{S_USER_LOGGED_IN}	- Is a user logged in?
{S_USERNAME}		- Username
{CURRENT_TIME}		- Current Time
{PRIVATE_MESSAGE_INFO} - Private Messages (shows if new one)
{U_PRIVATEMSGS}		- Link to Message Center
{L_PROFILE}		- UCP Link Info
{U_PROFILE}		- Link to UCP
{L_LOGIN_LOGOUT}	- Logout Link Info
{U_LOGIN_LOGOUT}	- Logout link with SID
{L_LEGEND}		- Legend Info (Just says "Legend")
{LEGEND}		- Legend
{U_MCP}			- Are you a Mod? / Mod Link
{L_MCP}			- Mod Link Info

Those are just some basics, you can find more by searching google, or looking through the source code of the ./include/ files.

AND YOU CAN MAKE YOUR OWN!!!

Heres how:
By using the "$template->assign_vars(array());" function.

This is the simple format:

$template->assign_vars(array(
	'VARIABLE_NAME' 	  => $variable_name,
	'VARIABLE_NAME_2' 	=> $variable_name_2)
);

Somehow the developers were able to issue code ethics.

For each variable all words must be seperated with a '_'. All variable names must be short and sweet, not one letter variables. For the assign_vars() function all variables must be organized into column unless a line break is between them (as shown above, they are in columns).

aye I know, it's odd, but it bring a format to the coding that everyone can understand to an open source project, which is VERY important.

You can do anything with the variable names, BUT add a prefix to the variable that is unique so you don't accidentally overwrite another, like adding your initials then an _ then the variable name, something like that.

To add custom PHP scripts just place them in their own file and add an include('<file_path>'); in the switch() function in the index.php file with the right page case.

So I can do this if I want to add a recent posts section in my sidebar.html page:

$sql = "SELECT * FROM `phpbb_topics` ORDER BY `topic_time` DESC LIMIT 5";
$result = mysql_query($sql);
for($o=0;$o<mysql_num_rows($result);$o++){
	$id = mysql_result($result, $i, 'topic_id');
	$fid = mysql_result($result, $i, 'forum_id');
	$title = mysql_result($result, $i, 'topic_title');
	$recent_posts .= "<a href=\"./viewtopic.php?f=".$fid."&t=".$id."\">".$title."</a><br />";
}
$template->assign_vars(array(
	'RECENT_POSTS' 	=> $recent_posts)
);

And then add in my sidebar.html page {RECENT_POSTS} where I want the recent posts to be displayed.

Hope this makes sense, and you learned something. I wrote this at 4:30am if you didn't see the posting time, so any mistakes you see just point them out and I will fix them asap.

Thanks!

----

Any questions/comments/complaints just ask, feedback is always a + even if its bad!

 

[AceHart]

Isn't this a bit of an overkill just to plug a boring site?
I would also recommend to read the official page instead.


We really do need a graveyard here too...

 

[duyen]

+rep for Variable list...

 

[TFlan]

Isn't this a bit of an overkill just to plug a boring site?
I would also recommend to read the official page instead.


We really do need a graveyard here too...

No idea what that means but when I was looking to do this myself I couldn't find anything on it. I found phpBB's about_us tutorial, but that really didn't fit this.