jfb-skinning-webpage-maker [Jcink.com Wiki]

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 management. 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.

Include Keys

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 show up on multiple pages while retaining an easy way to keep it up to date. For example, you create your header for multiple skins. It has some links that you update periodically, or maybe a logo or an announcement box. So having one webpage being called via include key in 4 skin's wrappers means you only have to update the web page instead of updating every skin individually.

You do not need to use include keys to create webpages. Though if you wish to visit pages by name rather than id number (which is the default) you can assign a key to them. Then 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.

Using Webpage Maker

Enabling Webpage maker

To enable the web pages and include keys:

  1. Log into the Admin CP (if not already done.)
  2. On the left panel, click: “Skins & Templates”
  3. Then, still on the left panel, click: “Webpage Maker”
  4. In the right panel, set: “Turn webpages online?” to “Yes”
  5. Then set: “Enable Include Keys for Board Wrappers?” to “Yes” (See note 1)
  6. Click: “Save settings”.

There, now you can begin to make webpages/keys for use.

Notes:

  1. While this step is optional and you can leave it set to “No”, setting this to “Yes” is a good idea if you plan to use include keys. (Even if you don't plan on using them, you can safely leave it set to “Yes” as it won't affect anything else.)

Creating a Webpage

  1. Log into the Admin CP (if not already done.)
  2. On the left panel, click: “Skins & Templates”
  3. Then, still on the left panel, click: “Webpage Maker”
  4. In the right panel, Click the button marked: “Create new webpage”
  5. In the page that loads now, you will see:
    Web page title - This is what you call the page. (And how it would appear if you linked to it.)
    Include key title - This is what you'll use to include the page in the wrappers. (See note 1)
    “Allow key use in Board Wrappers?” - Must be set to “Yes” use for the board wrappers.
    Content - This is where you put the actual HTML/Javascript
  6. Fill the above options out as necessary/desired.
  7. When you're done, click: “Create webpage”

Notes:

  1. Include keys have a 12 character limit. So names like: “myfirstwebpagemakerpage” will be too long.

Adding an include key to a wrapper

  1. Log into the Admin CP (if not already done.)
  2. On the left panel, click: “Skins & Templates”
  3. Then, still on the left panel, click: “Manage Skin Sets”
  4. On the page that loads in the right, scroll down and locate the skin you want to add the key to. Click “Wrappers” by it's name.
  5. In the page that loads now, locate the spot you want to put the include key (EX- for a javascript code you may want to put it just above the </body> tag.)
  6. Now put in <% include-key's-title %> (Which you can just copy from the the webpage maker's page, it'll be listed under the heading: “Include Key”. Make sure to copy from the ”<” to the ”>”, including the ”<” and ”>” ) EX- <% affiliates %> or <% MotM %>
  7. When you're finished, click: “Save changes”

Sample Webpage w/ Incl. Keys

1. Create the header

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.

2. Create the footer

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.

3. Page creation

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.

 
jfb-skinning-webpage-maker.txt · Last modified: 2013/02/05 14:33 by viruszero