JFB >> Skinning >> Webpage Maker

The Webpage Maker allows you to create custom pages of your choice within your forum. You can use full HTML and wrapper variable capabilities. It is located in the AdminCP under Skins and Templates → Webpage Maker. It provides basic and advanced functionality for page mangement. Simply hit create page to start making one, and save it. You are given a completely blank sheet to use HTML and Javascript.

Your created webpages will show up on the webpage maker home screen. Click on them to preview and get the links.

Webpage templates support “include keys.” This is a simple concept where you can create a webpage file that has information that you wish to be able to cross-change on multiple pages. For example, you create your header. It has some links that you update periodically. Maybe a logo. An announcement box. An entire layout. Keys will work for you here.

You do NOT need to use include keys to create webpages. Include keys should also only be assigned to pages that actually need them, otherwise it is just a waste.

In the following tutorial, we will demonstrate how include keys can be used in a layout to make things easier.

Create a new webpage, title it Webpage Header and give it an include key name of headerbit

Copy and paste the following code into the template:

<!-- Begin Header -->

	<div class="tableborder">

	<table width="100%" border="0" cellspacing="1" cellpadding="4">
		<tr>
			<td width="100%" align="center" class="maintitle">Welcome to our website</td>

    	</tr>
    		<tr>
    	<td colspan="2" class="pformstrip">
        	<div class="tableborder">
            <table width="100%" border="0" cellspacing="1" cellpadding="4">

            	<tr class="row2">
<td width="15%" class="row2" align="center" style="font-weight: normal;">
    	<a href='?act=Pages&kid=thewebpage'>Home</a>
    </td>	<td width="15%" class="row2" align="center" style="font-weight: normal;">
    	<a href='?act=Pages&kid=videopage'>Videos</a>

    </td>	<td width="15%" class="row2" align="center" style="font-weight: normal;">
    	<a href='index.php?act=Pages&kid=newspage'>News</a>

    </td>	<td width="15%" class="row2" align="center" style="font-weight: normal;">

    	<a href=''index.php?act=Pages&kid=aboutus'>About us</a>
    </td>	

</tr></table>
</tr>

</table>
</div>
<!-- End Header -->


<!-- Begin part of the table for the text -->

<br />
<div class='tableborder'>
<table cellpadding="4" cellspacing="0" border="0" width="100%"> 
        <tr align="center"><td width="100%" class='maintitle'><b>Welcome to our website.</b></span></td>
        </tr><tr align="center"><td class="row2" align="center" valign="top"> <table cellpadding="12" cellspacing="0" width="100%"> 
    <tr><td width="100%" align="center"><table cellpadding="0" cellspacing="0" width="100%"><tr><td width="100%">

This code is a basic header with a few links, such as a navigation menu. It also contains the first half of our “layout” where the text will be written. The code has been cut off on purpose, those who know HTML will see that the table does not close, but it will be in the next step. Now, save this page.

Create a new page, and call it Webpage Footer, and give it an include key name of footerbit

Copy and paste this code into it:

</td> 
          </tr> 
        </table></td> 
    </tr> 
  </table></td>

</table>
</div><br />

<!-- End of table for the text -->

<div align='center'>Test webpage &copy; me, all rights reserved</div>

This code is our footer. It finishes off the unclosed tables and divs in <% headerbit %> and brings it all together, with a small copyright added at the end. Now that our layout is done, we can start creating pages.

Create a new webpage, call it “homepage” and just do this:

<% headerbit %>
Hi, welcome to our website!
<% footerbit %>

Yes - that's it. That is all you have to do now if you want to make a new webpage and surround your layout in it. Because the system knows to replace headerbit and footerbit with your created include keys. It includes the contents of those keys into the page automatically.

How is this useful?

Think about this: even if you create 100 webpages including the <% headerbit %> and <% footerbit %> you created, when you update that headerbit or footerbit web page file, the update instantly takes effect on all of them. If you needed to change the navigation menu or add any new links, without include keys, it would take you forever. Additionally, it saves space

So in short: include keys save space, keep your pages neat and clean when editing so you don't need to see a lot of code, and best of all, they save time.

If you wish to visit pages by name rather than id number (which is the default) you can assign a key to them, and the include key itself on the webpage maker home area will become clickable. The link is different than the id number based system. This is useful if you want to hard-code links for a modification that you wish to give away to someone, or if you prefer to reference pages by name. Either method of accessing the pages works fine, however.

You can call any webpage template that you create via include keys using the board wrappers. Just be sure to turn the ability to use the keys ON in the ACP settings as well as the pages system turned online. Then, make sure you specify within each individual template if you want it to be usable in board wrappers. Essentially, you can use the include keys to create global wrapper bits for codes and anything else you wish.