Applying What You ve Learned


Applying What You've Learned

Now, the following sections walk through the development of the site and apply the techniques learned in the previous chapters.

Website Install and Preparation

First, you install a clean copy of PostNuke version .750. Standard default settings are fine. The initial install shows the plain ExtraLite theme and has a variety of blocks and modules you simply don't need for your club site.

The first step in the process is postinstall cleanup. Remove the PostNuke install files; this includes both the install.php file in the root and the /install/ directory itself.

Now go to the Administration Menu and edit the site's blocks. Deactivate the Reminder, Languages, and Poll blocks. As mentioned previously, the site will include a poll, but it will incorporate the Advanced Polls module, which has its own block.

Tip

When initially setting up your site, deactivate undesired blocks and modules rather than deleting them completely; it provides an extra layer of backup security while you are building the site. Modules and blocks can be deleted later after you have everything running smoothly.


Now go to the Modules Administration table and deactivate the AutoLinks, Banners, Ephemerids, FAQ, Polls, Quotes, Reviews, and Stats modules. These are all relatively self-contained modules that can be removed without affecting the rest of PostNuke. Cleaning up the unneeded modules drops more than a row of icons from the Administration Menu. This simplifies the interface to a more manageable level before you start building the site (see Figure 11.1).

Figure 11.1. It's easier to manage with a simplified interface.


For the last part of the cleanup, browse to the Website Configuration page with the Settings link. Enable the Support for Legacy Modules in the form and submit the settings. Making that change ensures there are no problems with older, non-pnAPIcompliant modules running on PostNuke .75.

Third-Party Module Installs and Setup

You now add four third-party modules to enhance the site's features:

  • Advanced Polls

  • pnFlashGames

  • PNphpBB2

  • PostCalendar

All of these modules were discussed at length in the previous chapters. When you are building up a site like this with multiple known modules, you have the option of installing them together or separately. Performing individual installs can make the process a little easier to follow if you are having issues with PostNuke's complexity, but after you are quite comfortable with the interfaces, you'll find batch-installing groups of modules to be much faster.

Note

Advanced Polls is found in Chapter 6, "User Interaction Modules," PNphpBB2 and PostCalendar were both covered in Chapter 7, "Community Building Modules," and you can learn more about pnFlashGames in Chapter 8, "Online Gaming Modules."


Simply decompress all of the modules' contents to their respective folders first. Then with all the files ready, go to the Modules Administration table and click the Regenerate link to see all of the new modules in the list at the same time. Initialize and Activate the new modules in turn to complete the process.

Advanced Polls

Back at the Administration Menu, select the Advanced Polls icon to configure the module. Create a new poll using the question: "What's your favorite numismatic collectible?" Provide the following options: Ancient/Medieval, Bi-Metallics, Commemoratives, Early U.S., Errors, Gold, Modern U.S., Modern World, and Paper Notes.

Be certain to change the Date and Time Poll Closes fields to a later date so the poll does not close immediately. You want the polls to be open to anonymous visitors, so set the Poll Authorization Method to "Cookie" to help prevent duplicate entries.

Browse to the Blocks Administration screen and create a new right-side block for the poll. Set the Title field to "What do you think?" and the type to "Advanced Polls/Show a Poll." Commit the block to see the activated site poll (see Figure 11.2).

Figure 11.2. Showing a poll.


The site will eventually have many polls, so a link in the Main Menu will be useful. This is also a good time to clear out unneeded entries in the Main Menu. Edit the block and remove the AvantGo, FAQ, Reviews, and Stats lines. Then create a new line after News for alphabetical consistency. Use the title "Polls," the URL "{advanced_polls}," and the description "Tell us what you think." Now, users will be able to click the link, "Polls," to access the poll system (see Figure 11.3).

Figure 11.3. Don't leave links to deactivated modules in the Main Menu.


pnFlashGames

The pnFlashGames module initially comes with a number of preinstalled games. For the club example, you want just one game that you assume is entertaining to the site members. For this example, use the game Billiard Training, a classy pool-style game available for free at the pnFlashGames site (www.pnflashgames.com).

After installing the module, enter the administration area and delete the existing games: Airfox, Pacman, Snake, Space Invaders, Swarm, and Tetris. Because there will be only one game, you also do not need the preexisting categories: Action Games, Puzzle Games, Racing Games, Arcade Games, Classic Games, and Space Games. Remove them all.

The new game's files should be placed in the module's games folder as follows:

 modules/pnFlashGames/games/billiard_training.swf 

The other games can be deleted at this time for additional cleanup. Then create a new game called Billiards. Set the Width and Height fields to 500 each to make the game a little larger on the screen. The game file location should be the same as the path shown previously. Submit the game.

Rather than have a link in the menu, this single game is better served by a side block. A menu link to the pnFlashGames module is great when you have multiple games, but the browse interface is simply unneeded for sites with only one game.

Go to the Blocks Administration and create a new block called Game Break with the pnFlashGames' Random Game block type. Both the Random Game and Newest Game options consistently display the one game, but the Newest Game block prompts users to play other games, which does not work well for sites with only one game installed. The Random Game block more appropriately encourages users to beat the high score of the displayed game. Move the new block down below the Main Menu, and you have a block like that shown in Figure 11.4.

Figure 11.4. Highlighting site features in a side block.


PNphpBB2

Now, you install the forum module. You use the powerful PNphpBB2 system, but like many PostNuke modules, it provides more customizing options than you need. Thankfully, the default settings are very good for most sites.

After the install, go to the forum Administration screen and create two categories:

Numismatic Discussion and Buy, Sell, and Trade. The existing test category can be renamed to simplify the process, but if you've added both categories in addition to the test area, just delete the default entry.

Create a series of forums under the general Discussion category with these titles: Ancient/Medieval, Bi-Metallics, Commemoratives, Early U.S., Errors, Gold, Modern U.S., Modern World, and Paper Notes. Under Buy, Sell, and Trade, make these forums: Wanted to Buy, For Sale, and Will Trade.

Like the Advanced Polls module, you need a link in the Main Menu block for users. Insert a line after the Downloads link using the title "Forum," the URL "[PNphpBB2]," and the description "Join the community." The basic forum is now functionally available, as shown in Figure 11.5.

Figure 11.5. No community is complete without a forum.


PostCalendar

PostCalendar is a very simple install initially. At this point, you are only concerned with base functionality and not appearance, so just create a new PostCalendar block on the right. Check the calendar display option to show the month table. By default, the block appears above the poll (see Figure 11.6) and with the default template; it has some text color issues you'll work out through interface polishing.

Figure 11.6. Setting dates to keep the group informed.


Core Module Setup

The installs are now complete, but you still need to configure a few of the core modules to prepare the site for content. First, set up the News system. For this club site, you don't need the Categories features, but a few news topics are definitely in order.

Topics

In the book's downloadable materials, four example topic icons are available:

 icon-coinnews.gif icon-coinevents.gif icon-clubinfo.gif icon-dealstips.gif 

Place them in the root topics folder to match this path:

 /images/topics/icon-coinnews.gif 

Now browse to the Topics Administration screen. Remove the two default topics and add in the four new images. Name the topics respective to the previous filenames with these titles:

  • Coin News

  • Numismatic Events

  • Club Information

  • Deals & Tips

Remove the spaces for the name fields, and use the title names for the text titles. For example, the "Coin News" name should be entered as "coinnews." Figure 11.7 shows the completed topics with their new images.

Figure 11.7. Customizing topics to fit your site.


Web Links

Now head over to the Web Links module to set up a few categories and entries there. First create the following categories:

  • Associations

  • Coin Clubs

  • Collection Software

  • Good Dealers

  • Grading Companies

  • History and Education

In addition, to initially seed the link system, use the information in Table 11.1:

Table 11.1. Sample Web Links

ASSOCIATIONS

URL

American Numismatic Association

www.money.org

American Numismatic Society

www.amnumsoc.org

Canadian Numismatic Association

www.canadian-numismatic.org

Professional Numismatists Guild

www.pngdealers.com

Society of Paper Money Collectors

www.spmc.org

Young Numismatists of America

www.ynaclub.org

GRADING COMPANIES

URL

ANACS

www.anacs.com

Independent Coin Grading

www.icgcoin.com

Numismatic Guaranty Corporation

www.ngccoin.com

PCGS

www.pcgs.com

PCI

www.pcicoins.com

SEGS

www.segsgrading.com


After you are done, click the Web Links module link in the Main Menu to try out the categories and initial links (see Figure 11.8).

Figure 11.8. Adding links your visitors will find useful.


Permissions

The default PostNuke permissions settings work for nearly all of this site's needs. The one exception is the Polls block. Polls for this site need to be made available to anyone, but to do that you need to make one permissions change. Browse to the Permissions module and add a new entry above the bottom Unregistered groups' lines. It should look like this:

 Unregistered    advanced_polls::     .*    Comment 

This grants Unregistered users full comment access to all polls, and it overrides the lesser access for Unregistered users because it is above their entries.

Site Settings

The final core module you set up is the main Website Configuration page. Click the Settings link under Administration to configure the site. Nearly all of the options are perfectly fine in their default settings, so there are only a few fields you update at this time.

First change the site name to "Numismania" and enter "We're crazy about coins!" into the Slogan field. The Time Zone Offset drop-down list box should always be changed to your local time. And as this is intended to be a smaller-scale club site, reduce the story count on the home page to five. Scroll down and save the changes.

Interface

For many people, the thought of developing a new website begins with the interface design. Although it's a good idea to have a layout planned for your site initially, with PostNuke you can't really get to the layout on most sites until you have decided which modules and blocks will be present and how the content is expected to be handled. These early decisions form the foundation on which you can then add themes with colors and styling.

Note

More information on theme development is found in Chapter 10, "Themes." For more advanced information on theme design, you can also try Chapter 15, "Customized Themes."


You are finally to the point at which there is enough structure to the site that the theme can be applied. After initial theme development, most developers go back and adjust the blocks or modules to fill content holes that sometimes appear as the final site starts to come into focus. That also leads back to more theme work, and the cycle continues with smaller and smaller adjustments until the site is finalized. The polishing period gets smaller with more PostNuke development experience, but it's certainly quite normal.

Developing a new Xanthia theme for the site begins with a copy of the pnDefault theme folder. Rename the copy to Numismania. You can, of course, immediately jump to the Xanthia Administration screen and activate the theme; the resulting test view is shown in Figure 11.9.

Figure 11.9. Starting out with a default theme.


However, the easiest way to set up the initial Xanthia theme is by editing the initialization file. If you have activated the Numismania theme, deactivate it now. In your text editor, load the xaninit.php file found in the theme's root.

The file defines seven example palettes starting at about line 55, but you really only need one for your theme. Delete all of the entries in favor of this one:

 CreatePalette($skinName, $skinID, 1, 'NumisPal01', '#FFFFFF', '#F6F7FF', '#E6E8F6', '#B1B6D3', '#7F85A9', '#686E93', '#EAEDED', '#E1E5E5', '#FF9900', '#434765', '#7B8284', '#575B7D', '#000080', '#800080', '#F0E68C'); 

Be certain to set the default toggle to "1" to make this the active theme. These colors provide a simple cool blue palette that matches the topic images you installed earlier.

The xaninit.php file defines the initial templates and zones. The default entries are shown as an example and are more than you need for your simple club site. Comment out the references to topcenter, tcblock, botcenter, bcblock, inblock, isblock, and dsblock in both the theme templates and theme zones sections. The following is an example of the changes for the first section, templates:

 // Create theme templates // CreateThemeTemplate($skinID, <template label>, <template filename>, <template type>); CreateThemeTemplate($skinID, 'master', 'master.htm', 'theme'); CreateThemeTemplate($skinID, 'lsblock', 'lsblock.htm', 'block'); CreateThemeTemplate($skinID, 'rsblock', 'rsblock.htm', 'block'); CreateThemeTemplate($skinID, 'table1', 'table1.htm', 'theme'); CreateThemeTemplate($skinID, 'table2', 'table2.htm', 'theme'); CreateThemeTemplate($skinID, 'News-index', 'News-index.htm', 'theme'); CreateThemeTemplate($skinID, 'News-article', 'News-article.htm', 'theme'); CreateThemeTemplate($skinID, 'News-index2', 'News-index2.htm', 'theme'); // CreateThemeTemplate($skinID, 'topcenter', 'topcenter2.htm', 'theme'); // CreateThemeTemplate($skinID, 'tcblock', 'tcblock.htm', 'block'); // CreateThemeTemplate($skinID, 'botcenter', 'botcenter.htm', 'theme'); // CreateThemeTemplate($skinID, 'bcblock', 'bcblock.htm', 'block'); // CreateThemeTemplate($skinID, 'inblock', 'inblock.htm', 'block'); // CreateThemeTemplate($skinID, 'isblock', 'isblock.htm', 'block'); // CreateThemeTemplate($skinID, 'dsblock', 'dsblock.htm', 'block'); CreateThemeTemplate($skinID, 'mainmenu', 'mainmenu.htm', 'block'); CreateThemeTemplate($skinID, 'ccblock', 'ccblock.htm', 'block'); 

Between the theme template and theme zones lines is a line that defines all the zones:

 // Add zones for theme pnModSetVar('Xanthia', $skinName.'newzone','|1:Upper Top Zone:ZUPPERTOP|2:Logo Zone:ZLOGO|3:Full Banner A:ZBANNERA|4:Channel Zone:ZCHANNEL|5:Full BannerB:ZBANNERB|6: Channel SubTop:ZSCHANNELTOP|7:Half Banner:ZBANNERC|8:Channel SubBot:ZSCHANNELBOT|9:Col3 Left:ZCOL3SLEFT|10:Col3 Center:ZCOL3SCENTER|11:Col3 Right:ZCOL3SRIGHT|12:Inner Left Column:ZINCOLLEFT|13:Inner Right Column:ZINCOLRIGHT|14:Center Block:ZCCBLOCK'); 

You know you don't need the banner or channel zones, so they can be dropped as well. For this example, I've changed the way the function is called to make it easier to manage your zone initializations. The shortened version with the change looks like this:

 // Add zones for theme    $tmpZoneList = "|1:Upper Top Zone:ZUPPERTOP".                   "|2:Logo Zone:ZLOGO".                   "|3:Col3 Left:ZCOL3SLEFT".                   "|4:Col3 Center:ZCOL3SCENTER".                   "|5:Col3 Right:ZCOL3SRIGHT".                   "|6:Inner Left Column:ZINCOLLEFT".                   "|7:Inner Right Column:ZINCOLRIGHT".                   "|8:Center Block:ZCCBLOCK"; pnModSetVar('Xanthia', $skinName.'newzone',$tmpZoneList); 

The use of the separate temporary variable helps to visualize the zones built in to the theme.

Now, you edit the site's templates. Browse to the Xanthia Administration page and click the Configure Xanthia link. Two settings on this page are helpful at this point to change. First check the Force Templates Recompilation check box. This makes template changes timelier. Next uncheck the Store Templates in Database check box so the theme always looks to the physical files you are editing. These toggles can be changed back after the theme is finished.

For this design, you keep the basic three-column layout common to PostNuke sites, but the left blocks are combined into a single column. A single image is used for the header, and the title of the site is graphically built in to the image so there is no need for the text display. Figure 11.10 illustrates the general idea.

Figure 11.10. Three-column layout.


Tip

Use matching background colors without borders to link together block areas into larger shapes.


When approaching the styles, note that the style sheet included with pnDefault also has extra classes defined. The main classes PostNuke core modules call are pn-normal, pn-title, pn-pagetitle, pn-sub, pn-logo, pn-logo-small, and pn-button. Specifying the major tags, such as body, a, TD, and img, is also important, but for most of the other classes, if they are not called by the theme, they can be removed. Add these additional classes for the Numismania theme:

[View full width]

.pn-lblocktitle { font-family:".$fonts."; color:"._XA_TTEXT1COLOR."; font-size:16px; font-weight:bold; text-align:left; } .pn-lblockcontent { font-family:".$fonts."; color:"._XA_TTEXT1COLOR."; font-size:{$text}px; text-align:left; padding:8 0 8 0;} .pn-rblocktitle { font-family:".$fonts."; color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-align:left; text-transform:uppercase; padding:2px; } .pn-rblockcontent { font-family:".$fonts."; color:"._XA_TTEXT1COLOR."; font-size:{$text}px; text-align:left; padding:8px; background-color:"._XA_TCOLOR2." } .pn-newstitle { font-family:".$fonts."; color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-align:left; text-transform:uppercase; padding:2px; } .pn-newstitle a:link {color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-decoration:none; } .pn-newstitle a:visited {color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-decoration:none; } .pn-newstitle a:hover {color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-decoration:none; } .pn-newstitle a:active {color:"._XA_TCOLOR1."; font-size:12px; font-weight:bold; text-decoration:none; } .pn-newssub { font-family:".$fonts."; color:"._XA_TCOLOR1."; font-size:9px; text-align:right; padding:2px; } .pn-newscontent { font-family:".$fonts."; color:"._XA_TTEXT1COLOR."; font-size:{$text}px; text-align:left; padding:8px; }

You can see that the family for these styles is defined using a variable. This is accomplished by setting the variable at the top of the style.php file before the styles begin:

 $fonts = "Verdana,Arial,Helvetica"; echo "<style type=\"text/css\"> 

Setting the family globally using variables provides much greater control over future changes. If later you want to convert the site to use a Serif font, it can then be applied to every style with one edit.

Open the master.htm file in your editor and clean out all the references to the extra zones you previously removed. The following is an excerpt of code from the cleaned template file, starting after the body tag opening.

[View full width]

<div style="width:100%; background-color:<!--[$color6]-->;"> <span style="float:left;"><img src="/books/1/160/1/html/2/<!--[$imagepath]-->/header.gif" /></span> <span style="float:right;"><span style="color :<!--[$color1]-->;"><!--[datetime]--></span></span> </div> <div style="width:100%; border-top:1px solid <!--[$text1]-->; background-color :<!--[$color7]-->; padding:0 10 0 0;"> <span style="float:left;"><img src="/books/1/160/1/html/2/<!--[$imagepath]-->/leftcap.gif" /></span> <span style="float:right;" ><!--[search]--></span> </div> <table border="0" cellpadding="4" cellspacing="0" style="text-align:center;width:100%;'><tr> <td style="width:<!--[$lcolwidth]-->; vertical-align:top; background-color :<!--[$color2]--; border-left:1px solid #000000; border-right:1px solid #000000; padding:10 0 0 0;"> <!--[$leftblocks]--> </td> <td style="width:5px; border-bottom:1px solid #000000;"><img src="/books/1/160/1/html/2/<!--[$imagepath]--> /pixel.gif" style="width:5px; height:10px;" /></td> <td style="width:100%; vertical-align:top; border-bottom:1px solid #000000;"> <!--[$centerblocks]--> <!--[$maincontent]--> </td> <td style="width:5px; border-bottom:1px solid #000000;"><img src="/books/1/160/1/html/2/<!--[$imagepath]--> /pixel.gif" style="width:5px; height:10px;" /></td> <td style="width:<!--[$rcolwidth]-->;vertical-align:top; border-bottom:1px solid #000000;"> <!--[$rightblocks]--> </td> </tr></table> <div style="width:100%;border:solid;border-top:none;border-width:1px;border-color :<!--[$sepcolor]-->;text-align:center;background-color:<!--[$color2]-->;padding:0.2em;"> <span ><!--[footmsg]--></span> </div>

The one-pixel bottom borders used on many of the right-side content cells help to define the foot area as part of the left column. You can also see that two theme images are in use by this file: header.gif and leftcap.gif. The header was mentioned previously, but the cap image is designed to both fill space reserved in this design for the search box and to break up the line between the left column and the header area. The image seamlessly locks against the left column to make it appear the column overlaps the lower part of the header row (see Figure 11.11). Both images are available with this chapter's online materials.

Figure 11.11. Layout results.


The left- and right-side blocks both contain very simple code. The left block is this:

 <div style="width:<!--[$lcolwidth]-->px;"> <div ><!--[$title]--></div> <div ><!--[$content]--></div> <hr style="width:80%" align="center"></div><br /> 

And the code used with the right side is this:

 <div style="width:<!--[$rcolwidth]-->px; border:1px solid #000000;"> <div style="background-color:#213FD9; border-bottom:1px solid #000000;"><span ><![$title]--></span></div> <div ><!--[$content]--></div> </div><br /> 

The Main Menu block also has its own template file, and templating special blocks can be a very powerful design tool, but for this example, just use the same left-side code for the Main Menu. For the home page news summaries, place this code in the news-index template:

[View full width]

<div > <div style="background-color:#213FD9; border:1px solid #000000;"><!--[$preformat.catandtitle]--></div> <div style="background-color:#000000;"><!--[$info.longdate]--></div> <div ><a href="<!--[$links.searchtopic]-->"><img style="float :left; padding-right:10px;' src="/books/1/160/1/html/2/images/topics/<!--[$info.topicimage]-->" alt='<!--[$info .topicname]-->" /></a><!--[$preformat.hometext]--><br /><em><!--[$preformat.notes]--></em>< /div> </div><br />

This code breaks the article into three rows: title, date, and content. The other article and center blocks can be left relatively plain to flow more smoothly in the center area. This can be useful with the way PostNuke fences in every element. Often defining one border for a block can result in the change being reused recursively to interior elements, and visually a series of concentric boxes doesn't tend to help readability. For a basic PostNuke site, customizing the sides and leaving the central area more plain is often the easiest path.



    PostNuke Content Management
    PostNuke Content Management
    ISBN: 0672326868
    EAN: 2147483647
    Year: 2003
    Pages: 207
    Authors: Kevin Hatch

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net